[Martin™]

Jag sitter och jobbar med min nya hemsida men CSS'en gör inte riktigt som jag vill. Vad kan vara felet?

Så här ser det ut i IE och på samma sätt vill jag att det ska se ut i FF.


Firefox



Så här ser min html / css ut:

<div id="header">

 <p class="logofont">Text text text text text</p>

 <div id="box">
   <p class="boxfont">text$</p>
 </div>

</div>


***********************************************


.logofont{
 margin: 0em 0em 0px 200px;
 text-align: left;
 font-weight: normal;
}


.boxfont {
 font-size: 48px;
 font-weight: bold;
	word-spacing: 0.5em;
	text-align: left;
	color: white;
 padding: 0.1em 0em 0px 18px;
}


#header {
 height: 130px;
 width: 594px;
 background: url(http://localhost/logo.png) no-repeat;
 margin: 15px 0px 0px 0px;
}


#box {
 background: url(http://localhost/box.png) no-repeat;
 height: 69px;
 margin: 10px 0em 0px 200px;
}

[Timofey]

Varför blandar du "0em" och "0px"?
Skriv bara "0".

[Martin™]

Originally posted by alltinggratis@Feb 20 2008, 21:00
Varför blandar du 0em och 0px?
Skriv bara 0.

Tack för tipset. Det är för att jag klippt och klistrat från en tutorial, jag tänkte fina till det sen när det fungerar som det ska.

[Kiper]

Det har att göra med att Explorer hanterar box modellen fel. Sök på "box model hack" så hittar du en hel del info.
Ett bra tips för att få till standardiserad CSS som funkar på alla webbläsare är att gå igenom det mesta du hittar här:
http://www.htmldog.com/guides/cssbeginner/

[Martin™]

Originally posted by Kiper@Feb 20 2008, 21:59
Det har att göra med att Explorer hanterar box modellen fel. Sök på box model hack så hittar du en hel del info.
Ett bra tips för att få till standardiserad CSS som funkar på alla webbläsare är att gå igenom det mesta du hittar här:
http://www.htmldog.com/guides/cssbeginner/

Tack, jag ska söka på hacken. Det är den där sidan som jag sitter och klipper och klistrar ifrån

[Martin™]

Föresten, som det är nu så är det firefox som inte visar som jag vill. Men det kanske också löses med hacken?

[Kiper]

Det hela beror på att IE tolkar boxmodellen fel. Den lägger inte till padding, border och margin som den ska göra enligt CSS-standard utan bakar in det i bredden du tilldelar boxen.
div {
width: 100px;
padding: 10px;
border: 10px solid #000;
}
Blir 100px i IE men i standardenliga (Firefox, Safari) webbläsare blir det 140px inklusive padding och border. Därav de skumma blankutrymmena i FF!
Men ger du rätt doctype, dvs undviker quirks mode (läs mer här: http://www.quirksmode.org/css/quirksmode.html), åt IE 6+ så ska den tolka boxmodellen korrekt.

[cyrre]

Tumregel:
när IEx och en vettig webbläsare visar olika resultat så är det IE som visar fel.

IE följer lite egna standarder..

[jonny]

Det finns undantag.

Och irriterande nog så verkar inte vertical-align stödas enligt standarden av någon av de stora webbläsarna.

[Martin™]

Jag fick det inte att fungera så jag använde dreamweaver och gjorde tabeller istället så nu ser det nästan ut som jag vill.. texten sitter lite för långt ner i boxen när man använder IE. h34r:

Om någon kan ge mig en bättre kod så vore det kalas!

<table width="546" height="140" border="0">
 <tr>
  <td width="169" rowspan="3"><img src="logo.png" width="169" height="123" /></td>
  <td width="367" height="29">texttextextxetxtxtxetxetxetxetxettext</td>
 </tr>
 <tr>
  <td id="box" ><div align="left"><span class="boxfont">text$</span></div></td>
 </tr>
 <tr>
  <td width="69"></td>
 </tr>
</table>

.boxfont {
	font-size: 48px;
	color: #FFFFFF;
	text-align: left;
    padding: 0px 0em 0em 20px;
}

#count {
 background: url(http://localhost/box.png) no-repeat;
 height: 69px;
}