Just nu i M3-nätverket
Jump to content

css frågor


webdesigner

Recommended Posts

Hej.

Jag har för första gången gjort en css layout baserad på relativ positionering och floats. Tidigare har jag endast jobbat med absolut potitionering.

 

Jag har stött på lite patrull med att marginalerna ser olika ut i IE och FF. För en gångs skull ser det ut som det skall i IE, men ej i FF el Opera heller för den delen.

 

Det är:

1. #content_wrapper som hamnar fel.

Den skulle behöva vara 1px mer åt hö än den är nu i FF. Divven hamnar också någon pixel för långt upp i FF mot vad den gör i IE.

 

Vidare är det:

2. #btn där knapparna är.

Här hamnar knapparna i FF 1px ifrån #navbuttons vänstra kant, medan knapparna i IE hamnar ca 3px ifrån #navbuttons vänstra kant.

(Här vill jag att de skall vara 3px ifrån den vänstra kanten både i FF och IE.)

 

Jag förstår att jag gör något fel och att det kanske finns något hack för detta.

 

Frågan är hur gör jag?

 

Kanske kan man korta ner min kod något så om någon som är duktig kan hjälpa mig med lite rättning vore det kanon!

Känner mig på lite osäker mark när jag inte kör med absolut positionering :-)

 

Mycket tacksam om någon vill hjälpa mig!

Postar koden nedan.

 

[log]

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title></title>

<style type="text/css">

<!--

 

body {

font: 75/100% Verdana, Tahoma, Arial, Helvetica, sans-serif;

color: #353535;

background-color: #e9e9e9;

}

 

img {

border: 0px;

}

 

 

#main {

position: relative;

width: 700px;

margin: 0 auto;

}

 

#header {

float: left;

width: 700px;

height: 85px;

}

 

 

#bar {

float: left;

width: 523px;

height: 38px;

}

 

#login {

float: left;

width: 116px;

height: 38px;

}

 

#home {

float: left;

width: 61px;

height: 38px;

}

 

 

 

 

#content_wrapper {

float: left;

margin: 0 0 0 2px;

padding: 0;

width: 678px;

border: 1px solid #ccc;

}

 

 

#navigation {

float: left;

margin: 3px 0 0 3px;

background-image: url(images/nav.gif);

background-repeat: no-repeat;

width: 142px;

height: 421px;

}

 

#navbuttons {

float: left;

margin: 2px 0 0 3px;

padding: 0 0 0 2px;

width: 131px;

height: 400px;

}

 

#btn {

float: left;

margin: 10px 0 0 0;

padding: 0px;

width: 131px;

height: 24px;

}

 

.btn {padding-left: 3px;}

 

 

#content {

float: left;

margin: 5px 0 0 23px;

padding: 0px;

width: 501px;

}

 

#top_bg {

float: left;

margin: 0px;

padding: 0px;

width: 501px;

height: 8px;

}

 

#content_bg {

float: left;

margin: 0px;

padding: 0px;

background-image: url(images/bg.gif);

background-repeat: repeat-y;

width: 501px;

}

 

#content_text {

font: 0.75em Verdana, Tahoma, Arial, Helvetica, sans-serif;

margin: 2px 10px 10px 10px;

width: 479px;

}

 

#content_fill {

float: right;

width: 1px;

height: 396px;

top: 0px;

}

 

.left {float: left;}

 

#bottom_bg {

float: left;

margin: 0 0 2px 0;

padding: 0;

width: 501px;

height: 8px;

}

 

#footer {

float: left;

background-image: url(images/footer.gif);

background-repeat: no-repeat;

margin: 3px 0 0 1px;

padding: 0;

width: 700px;

height: 39px;

}

 

-->

</style>

</head>

 

<body>

 

 

<div id="main">

 

 

<div id="header">

<img src="images/header.gif" width="700" height="85" alt="" />

</div>

 

 

<div id="login"><img src="images/login.gif" width="116" height="38" alt="" /> </div>

 

<div id="home"><img src="images/home.gif" width="61" height="38" alt="" /> </div>

 

<div id="bar"><img src="images/bar.gif" width="523" height="38" alt="" /></div>

 

 

<div id="content_wrapper">

 

<div id="navigation">

<div id="navbuttons">

 

<div id="btn">

<img src="btn/pil.gif" width="26" height="24" alt="" /><img src="btn/button1.gif" width="100" height="24" class="btn" alt="" />

</div>

 

<div id="btn">

<img src="btn/pil.gif" width="26" height="24" alt="" /><img src="btn/button2.gif" width="100" height="24" class="btn" alt="" />

</div>

 

<div id="btn">

<img src="btn/pil.gif" width="26" height="24" alt="" /><img src="btn/button3.gif" width="100" height="24" class="btn" alt="" />

</div>

 

</div>

</div>

 

 

<div id="content">

 

<div id="top_bg"><img src="images/top_bg.gif" width="501" height="8" alt="" /></div>

 

<div id="content_bg">

 

<div id="content_text">

 

<span class="left">Content Text<br /><br /><br /><br />

Lorem ipsum dolor sit amet<br /><br /><br /><br />

Lorem ipsum dolor sit amet<br /><br /><br /><br />

Lorem ipsum dolor sit amet<br /><br /><br /><br />

Lorem ipsum dolor sit amet<br /><br /><br /><br />

Lorem ipsum dolor sit amet<br /><br /><br /><br />

Lorem ipsum dolor sit amet<br /><br /><br /><br />

 

 

</span>

 

 

<div id="content_fill"></div>

 

</div>

 

</div>

 

<div id="bottom_bg"><img src="images/bottom_bg.gif" width="501" height="8" alt="" /></div>

 

</div>

 

</div>

 

<div id="footer"></div>

 

</div>

 

 

</body>

</html>

 

[/log]

 

[inlägget ändrat 2006-11-02 20:05:48 av webdesigner]

[inlägget ändrat 2006-11-02 20:07:08 av webdesigner]

Link to comment
Share on other sites

Utan att ha kollat närmare på din kod så låter det som att det du råkat ut för är att IE har en egen boxmodell som inte följer standarden: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

 

För att måtten ska bli lika i IE och i de webbläsare som följer standarden så måste du ange andra mått för IE än för alla andra. Det finns en mängd olika sätt att göra det på. Här är en:

http://tantek.com/CSS/Examples/boxmodelhack.html

 

Link to comment
Share on other sites

Tack för länkarna, men jag vore verkligen jättetacksam om någon kunde visa hur jag skall göra för jag förstår inte hur jag skall gå till väga.

 

Link to comment
Share on other sites

Hej!

Inte omöjligt att det har med box model att göra men jag har för mig att det var IE5 som hade problem med det...

 

Det brukar vara svårt att få till den där sista pixeln men jag skulle prova att switcha doctype för att se om det gör saker bättre eller sämre.

 

Den doctype du har nu gör, vad jag har för mig, att Mozilla är i "Almost standard rendering mode", men om du byter till strict kör du "Standard rendering mode". Det finns en skillnad i hur nånting med bilder renderas (kommer inte ihåg riktigt hur dock) i de olika lägena. Men strict kan å andra sidan få mozilla att bete sig ännu mer olika än IE... men prova skulle jag göra.

 

Sedan skulle jag ta bort ";" efter doctypedeklarationen som i varje fall finns med i din exempelkod.

 

/Bara en tanke

H

 

Link to comment
Share on other sites

Hej.

; tecknet vet jag inte varför det hamnade där, men nu är det borta, och när jag ändrade till strict doctype så blev det ingen skillnad förutom att bilden i divvarna #top_bg och #bottom_bg såg helkonstiga ut.

 

Förut lade jag dem som bakgrundsbilder, men då blev det ett konstigt mellanrum med min transitional doctype, därför lade jag dit dem som vanliga bilder och då såg det bra ut. Ursprungsproblemet med pixel problemen återstår dock även om jag byter doctype.

 

Jag kan leva med 1px förskjutning men i #btn är det ju 3px som diffar.

 

Link to comment
Share on other sites

Hej igen!

Nu har jag kikat lite mer på koden och om jag hade gjort det hade jag ändrat lite. Vet dock inte om det avhjälper problemet...

 

Ett fel är att du specat id="btn" på tre ställen, vilket ju inte är riktigt ok. Kan hända att mozilla gör fel av den anledningen. Om du vill ha en och samma klass på de omslutande divarna för knapparna får du sätta ett klassnamn istället.

 

Sedan hade nog jag tagit bort alla div-ar som bara omsluter EN bild och istället satt id, klassnamn direkt på bilden. Divarna är där i onödan om de bara omsluter ett element.

 

#header gissar jag inte behöver någon float:left då det antagligen är meningen att den ska bryta rad.

 

#content_bg känns som den är onödig men jag kanske missar nå´t. Borde inte #content_text kunna innehålla bgn men ändra margin till padding? Men jag vet inte riktigt vad de två överblivna pixlarna tar vägen förstås...

 

En annan grej är att IE (<7 i varje fall) kan göra större avstånd mellan saker för att man har space, ny rad, tab mellan elementen (brukar mest vara vertikala skillnader och bilder) vilket kanske är en orsak till att du får till det i IE.

 

Ligger koden upp nånstans? Kanske skulle kunna säga mer om man hade alla bilder så man såg hur det är tänkt.

 

/Tjo

H

 

Link to comment
Share on other sites

Tack så hemskt mycket för ditt utförliga svar. Jag skall ändra som du sagt och kommer tillbaka och meddelar hur det gick :)

Nej, den ligger inte uppe någonstans än.

 

[inlägget ändrat 2006-11-07 14:39:23 av webdesigner]

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...