IE6 div positioning

[Kenneth]

I’m new to "creating a website". I have a history of programming in vb .net. But lately more and more people are asking for webbased programs and websites. As i was looking for a challenge, why not give webdesign a try. I was searching for a good way to learn php, html & css. I got php covered and then I found CSS tricks about a week ago (great site! If there was a paypal button i’d hit it). I started watching the video’s and here is my first result.

It looks fine in Firefox an IE7 but IE6 (and before) breaks the design.
It is based on a wordpress with a custom page template. Maybe the CSS part isn’t quite like it should be but like i said, i’ve been learning about a week (about 25 hours) and it’s wordpress, php and css at once. :oops: Right now, it’s just the home page and the page when you click on "more info"

http://www.kapittel-wervik.be/kclub

CSS Header

Code:

/*
HEADER
*/

#header_links {padding: 0 10px 0 10px; width: 220px;}
h1#logo {width: 140px; height: 220px; text-indent: -9999px; background: url(images/logo.png) top left no-repeat;
margin: 0 0 8px 0; float: left;}

#header_rechts {float: left; width: 700px; margin: 15px 0 0 50px;}
#header_rechts p {color: #FF3366; float: left; font-size: 3.0em; font-weight: bold; font-family: Courier, sans-serif;}
ul#hoofdmenu {float: left; text-align: left; margin: 100px 0 0 0;}
ul#hoofdmenu li {display: inline;}
ul#hoofdmenu li a {color: white; font-size: 2.0em; padding: 3px 18px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
ul#hoofdmenu li a:hover {background: #FF3366; color: #272727;}

I know i still have a lot of work to do but i’m pretty satisfied getting this result after just a week :mrgreen:

[apostrophe]

This should sort out your navigation in ie6:

Code:

ul#hoofdmenu li {
display:inline;
float: left;
}

And I’m pretty sure you can solve the other problems by validating your html http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.kapittel-wervik.be%2Fkclub%2F. You need to close all of your list tags and I think you have forgotton to close the "page-wrap".

[Kenneth]

Ok, i fixed the </li> ‘s that were missing. :oops:

Now the page validates but the problem remains.

Then I changed the css file to your code. Now the menu is next to the slogan but still under the logo and not next to the logo.

So the problem stays the same

[apostrophe]

Ok, box model problem. So how about this:

Code:

#header_links {
float:left;
padding:0 0 0 10px;
width:220px;
}

#header_rechts {
float:left;
margin:15px 0 0;
width:auto;
}

#FeaturedEventDetails {
float:left;
width:490px;
}

p.FeatureTitle {
color:#FF3366;
font-size:2em;
margin-left:220px;
text-align:left;
}

p.FeatureContent {
color:white;
font-size:2em;
margin-left:240px;
text-align:left;
}

a#MeerInfo {
color:yellow;
font-size:2em;
margin:0 0 10px 220px;
}

You may need to reduce the width of #header_links but that’s your call.

[Kenneth]

I started over with the code you provided but I didn’t see much difference except some styling.

But then, by accident, I found the problem

Code:

#header_rechts p {color: #FF3366; float: left; font-size: 3.0em;

When I removed the float: left; everything worked :?
Strange, I thought <p> had a float element.
But the float:left wasn’t even necessary since the parent div floats left.

Or is this complete crap i’m saying?

Thank you for your replies

[apostrophe]

It still looks the same in ie6.

Quote:

I started over with the code you provided but I didn’t see much difference except some styling.

The difference is that I took all the left margins off the left floated divs and added it to the contents of those divs instead, ie6 has a problem with margins on the same side of boxes (in this case your divs) as the direction they are floated eg. float:left; margin:left; which effectively doubles the margin and causes the next element to "wrap".

[Kenneth]

I only just uploaded the new code to my webspace. It worked on my computer

So this was the "Double Margin bug" Chris talked about in his http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/ article. I read the article but never realised this was the mistake

Thanks again

[Author]

Posts