Skulle vilja veta hur man kan skapa en "tabell-liknande" struktur med CSS. Därför jag försöker lära mig använda CSS i största möjliga mån Men CSS är inte tänkt att ersätta tabeller, tabeller ska vara tabeller, så varför inte använda dem som sådana? > Men CSS är inte tänkt att ersätta tabeller, tabeller ska vara tabeller, så varför inte Tack Thomas =) > <b>Finns det nåt sätt som gör att jag kan få den tabell-liknande effekten jag är ute efter, dvs att det ser likadant ut i IE som i Mozzilla?</b> Ser bra ut, men jag får den nedre raden att börja 100px från vänsterkanten i Mozilla Hm, du råkar inte köra en gammal version av Mozilla? Jag kör Firebird som lär bygga på Mozilla 1.3-1.4 eller så, och här fungerar sidan! Kör Mozilla 1.3CSS: Skapa tabell-liknande struktur
Har följande:
<code>
<style type="text/css">
.row
{
margin-bottom: 5px;
}
.label
{
vertical-align: top;
width: 100px;
}
</style>
'...............
<div>
<div class="row">* Krävande fält (måste fyllas i)</div>
<div class="row"><span class="label">Namn *:</span>
<input class="textbox" type="text" name="name" size="30" maxlength="30" value='<% = strAuthorComment %>'>
</div>
</div>
</code>
Allt ser bra ut i IE, dvs jag kan mad .label width styra hur mycket från vänsterkanten som input-taggen skall visas, men i Mozilla visas den kloss intill "Namn *:"
Ex:
IE: Namn *: [inputtaggen]
Mozilla: Namn *:[inputtaggen]
Finns det nåt sätt som gör att jag kan få den tabell-liknande effekten jag är ute efter, dvs att det ser likadant ut i IE som i Mozzilla?
/UffeSv: CSS: Skapa tabell-liknande struktur
Dels därför att det är himla intressant, men också för att få ner filernas storlek och förbereda lite grand inför XHTMLSv: CSS: Skapa tabell-liknande struktur
Sv: CSS: Skapa tabell-liknande struktur
> använda dem som sådana?
Helt rätt. Men Ulf vill ju inte göra en tabell. Han vill ju bara bestämma var texten ska placeras, vilket är en av sakerna man använder CSS till.Sv: CSS: Skapa tabell-liknande struktur
Det lustiga är att allt validerar mot w3c, men (som brukligt är) renderar browsrarna dom olika.
Trodde att det skulle vara Mozilla jag skulle ha minst problem med.Sv: CSS: Skapa tabell-liknande struktur
Självklart! Det handlar bara om att skriva rätt kod! :-)
Hela ditt problem består i två saker.
1) Du har trott att man kan sätta width på ett inline-element, SPAN.
2) Webbläsarna IE6 och Mozilla beter sig olika beroende på vilken Doctype du har.
Om du kör utan Doctype, eller med Doctype Loose så kommer IE6 och Mozilla att vara "förlåtande" mot din kod och visa vad den tror att du vill uppnå, alltså att sätta en fast bredd på ett inline-element. Eftersom att detta inte egentligen är möjligt så får du olika resultat i webbläsarna.
Om du istället sätter Doctype Strict så är båda webbläsarna betydligt hårdare, och helt enkelt ignorerar din width, som dom ska!
Lösningen är enkelt. Sätt Din "Namn" inom ett blockelement (som du kan sätta width på). Problemet är då att nästa element (din inputruta) kommer på en ny rad. Detta löser du med float: left,
Kika på koden så ser du lösningen!
<code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="sv">
<head>
<title>CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<style type="text/css">
.label {
width: 100px;
float: left;
}
</style>
</head>
<body>
<form action="bla.html" method="get">
<p>* Krävande fält (måste fyllas i)</p>
<p class="label">Efternamn *:</p>
<p><input class="textbox" type="text" name="name" size="30" maxlength="30" value='<% = strAuthorComment %>'></p>
<p class="label">Föramn *:</p>
<p><input class="textbox" type="text" name="name" size="30" maxlength="30" value='<% = strAuthorComment %>'></p>
</form>
</body>
</html>
</code>Sv: CSS: Skapa tabell-liknande struktur
(Alltså raden med förnamn)Sv: CSS: Skapa tabell-liknande struktur
Sv: CSS: Skapa tabell-liknande struktur
Fick köra en (vet inte om jag skall kalla det "ful-lösning"), men jag fick lägga till en div med style="clear:both; mellan "raderna". Vet inte om det är ett måste, men då funkade det fint.
<code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="sv">
<head>
<title>CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<style type="text/css">
.label {
width: 100px;
float: left;
}
.divider {
clear: both;
}
</style>
</head>
<body>
<form action="bla.html" method="get">
<p>* Krävande fält (måste fyllas i)</p>
<div>
<p class="label">Efternamn *:</p>
<p><input class="textbox" type="text" name="name" size="30" maxlength="30" value='värde'></p>
</div>
<!-- Här var jag tvungen att lägga till den extra div-taggen -->
<div class="divider"></div>
<div>
<p class="label">Föramn *:</p>
<p><input class="textbox" type="text" name="name" size="30" maxlength="30" value='värde'></p>
</div>
</form>
</body>
</html>
</code>
PS
Tack för hjälpen Rickard!
DS