Hej allihopa,
Jag har ett problem med min hemsida jag håller på att knåpa ihop.
Koden är följande:
<div id="container" style="width:930px; margin: 0 auto 30 auto; overflow: hidden;"
<div id="content" style="padding:20px;">
<div id="navbar" style="float:left; width:160px; text-align:right;">
<ul id="nav">
<li id="current"><a href="/" style="display:block; width:150px; padding:5px 10px 5px 0;">Hem</a></li>
<li><a href="#">Tjänster</a></li>
<li><a href="#">Om oss</a></li>
<li><a href="#">Hitta hit</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
<div id="maincontent" style="width:716px; margin-left:160px; padding-left:15px;">
<div id="top" style="width:716px;">
</div>
</div>
</div>
</div>
Mitt problem är att #maincontent och dess innehåll inte hamnar till höger om #navbar som har float:left på sig. #maincontent hamnar förvisso 160px från vänsterkanten som den ska, men den vertikala positionen är i linje med den nedre kanten på #navbar. Jag har gjort ett tappert försök att rita nedan.
detta är felet
--------
|navbar |
-------- --------------
.............| maincontent|
men det ska vara så här
-------- --------------
navbar| |maincontent|
------- --------------
Jag har klurat på detta ett tag nu men kan inte komma på vad felet ligger i för någonting. Det inträffar endast i IE6 och 7 så jag misstänker att det har nåt med width och floats att göra eller IE's felaktiga rendering av box model.
Jag är väldigt ny på detta område så det är troligtvis ett mycket enkelt fel :P
Vad kör du för doctype?, hur ser parent noden ut runt navbar och maincontent, IE tolkar width, border, padding och margin annolunda än vad exempelvis firefox gör, sen så skriver man CSS med ":" inte med "=" ;)
voigtann1 skrev:
Vad kör du för doctype?, hur ser parent noden ut runt navbar och maincontent, IE tolkar width, border, padding och margin annolunda än vad exempelvis firefox gör, sen så skriver man CSS med ":" inte med "=" ;)
Hoppsan, se där vad man råkar skriva när man håller på sent på kvällen :P Ändrat till ":" i koden nu i inlägget.
Jag kör med xhtml 1.0 strict. navbar och maincontent ligger i en div #content utan någon bestämd width, men detta ligger sedan i en container div som har en bestämd width på 930px, utan padding och margin: 0 auto;
Anledningen till #content diven är att jag använder den för att lägga till en bakgrundsbild med repeat-y. Jag har sedan kopplat två andra bilder till två andra divs för att fixa rundade kanter.
EDIT: har lagt till parent i koden i första inlägget.
#container { width:930px; margin: 0 auto 30px auto; overflow: hidden }
#content { padding:20px; background: #f00 }
#navbar { float:left; width:160px; text-align:right}
#maincontent { width: 715px; margin-left:175px /*+15px*/}
voigtann1 skrev:
#container { width:930px; margin: 0 auto 30px auto; overflow: hidden }
#content { padding:20px; background: #f00 }
#navbar { float:left; width:160px; text-align:right}
#maincontent { width: 715px; margin-left:175px /*+15px*/}
Fungerar ej vad jag kan se. Undra vad det då kan vara...
la in 15px extra för det gör du med din padding, med din kod just nu så ser det ut som du har 1px för mycket
+930px
-20px*2
-160px
-716px+15px
== -1
voigtann1 skrev:
la in 15px extra för det gör du med din padding, med din kod just nu så ser det ut som du har 1px för mycket
+930px
-20px*2
-160px
-716px+15px
== -1
Där löste du det, tack så otroligt mycket för hjälpen! :bire Tänka sig vad en liten pixel kan orsaka för någonting. Har spenderat timtal på detta :e
Varför visas inte detta fel i alla andra webbläsare, det saknades ju 1 pixel med utrymme?
jag kan inte återskapa det du säger att det händer för dig, men du kör overflow hidden vilket kan förklara en del i de andra webbläsarna, glöm inte att sätta tråden som löst på det svar du acceptera som lösning.
Välkommen till wF förresten!
Det jag gjorde var att jag tog 174px left margin istället för 175 för att kompensera för pixeln som var för mycket.
Givetvis ska jag klicka i vilken som blev lösningen :)
Tackar för snabba svar också, på det här forumet känns det som att jag kommer spendera en hel del tid på :h
