css positioning noob question - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

css positioning noob question

WebMasterLudwig

2:38 pm on Sep 7, 2004 (gmt 0)

10+ Year Member

Ok, the next code works fine in IE6:
Css:

body {
background-color: #FFFFFF;
margin:0px 0px; padding:0px;
text-align:center; /* Hack voor IE5/Win */
}

#wrapper {
width:760px;
margin:5px auto;
text-align:left;
background-color:#FFFFFF;
}

#header {
width: 760px;
height: 100px;
text-align: left;
border: thin solid #000000;
}

#hoofdnav {
width: 760px;
margin: 5px 0px 0px;
text-align: left;
border: thin solid #000000;
}

#linksNav {
width: 130px;
margin: 5px 0px 0px;
position: static;
float: left;
text-align: left;
border: thin solid #000000;
}

#content {
width: 625px;
margin: 5px 0px 0px 5px;
position: static;
float: left;
text-align: left;
border: thin solid #000000;
}

HTML:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>
</head>

<body>
<div id="wrapper">
<div id="header">Hier komt de header</div>
<div id="hoofdNav">Hier komt de hoofdnavigatie</div>
<div id="linksNav">Hier komt de extra navigatie</div>

<div id="content">Hier komt de content</div>
</div>
</body>
</html>

Wiht Netscape 7, the content-box is positioned under the linksNav-box... What do i do wrong?
(and are there any good tutorials for css-positioning on the net, or maybee someone can recomend me a book?)

Bonusbana

3:21 pm on Sep 7, 2004 (gmt 0)

10+ Year Member

The question is -what are you trying to do?

If you want the #linksNav to be floating left to your content, why are you then floating your content as well? That confuses the browser engine and you will see that diferent browsers interpret this differently.

There are many great tutorials out there. I modified your code in a way I think you wanted it:

body {
background: #fff;
margin: 0;
padding: 0;
text-align: center; /* Hack voor IE5/Win */
}

#wrapper {
width: 760px;
margin: 5px auto;
text-align: left;
}

#header {
width: 760px;
height: 100px;
border: thin solid #000;
}

#hoofdnav {
width: 760px;
margin: 5px 0;
border: thin solid #000;
}

#linksNav {
width: 130px;
float: left;
border: thin solid #000;
}

#content {
width: 625px;
margin: 0 0 0 135px;
border: thin solid #000000;
}

The key is to locate what does what and to use a minimal amount of code. That way you eliminate browser differntials and it will be easier to understand how everything works. Good luck!

[edited by: SuzyUK at 6:59 pm (utc) on Sep. 7, 2004]
[edit reason] tidying.. [/edit]

WebMasterLudwig

4:37 pm on Sep 7, 2004 (gmt 0)

10+ Year Member

I've allready tried that... It works in Netscape 7, but in IE 6, the contect-box somehow has a top-margin that is as big as the linksNav-box...

Bonusbana

4:43 pm on Sep 7, 2004 (gmt 0)

10+ Year Member

Well, now youre on the right path! Gecko browsers are displaying CSS more accurately than IE, so its good to make it work for gecko first, then deal with the IE bugs.

Try removing the borders and add a color instead, makes it easier to locate the problem. Also, make sure youve got all margins and floats correctly.

WebMasterLudwig

5:00 pm on Sep 7, 2004 (gmt 0)

10+ Year Member

I think I've found the problem: it seems like IE does not render the content-box margin correct: when I change the right-margin of te content-box to 67 (135/2), it all looks fine for IE... So: what is the sollution: using 2 style-sheets, or is there a workaround for this problem?

Bonusbana

5:17 pm on Sep 7, 2004 (gmt 0)

10+ Year Member

Sounds like the double margin bug... If you specify a margin on floating elements, the margin gets doubled in IE/win. You can solve it easily by adding a display: inline; to the floating div.

But I thought you didnt float your content div...?