PDA

View Full Version : right side DIV breaks to under left side DIV in MSIE 6



jollyrabbit
Aug 31st, 2007, 04:05 PM
Hello,

I'm new to CSS and just did my first site: http://www.alldrynow.com for a friend. The second page, http://www.alldrynow.com/about.html breaks in half in MSIE6, with the right column ending up under the left column at the bottom.

I've validated each page for HTML and CSS in the W3C validator. The page was adapted from the Dreamweaver CS3 template, as were the other pages, which seem to work fine in MSIE 6. I've redone this page many times with the same result.

I think I must be missing something simple, but can't seem to figure it out and don't know where to look to find the answer.

I'd be eternally grateful if someone could point me in the right direction!

By the way, the page works in all browers except MSIE 6, 5.5 and 5 (but I'm not worrying about 5 & 5.5 - my friend has 6 on his laptop.)

Many thanks,
Jollyrabbit

croatiankid
Aug 31st, 2007, 04:21 PM
You are probably not aware of IEs double floated margin bug. If an element has a margin in the same direction it is floated, it will actually use exactly double the margin. The solution is to add display:inline to it.
Change the following

.anim {
float: right;
margin-bottom: 0px;
margin-right: 43px;
text-decoration: none;
}
to

.anim {
display:inline;
float: right;
margin-bottom: 0px;
margin-right: 43px;
text-decoration: none;
}

The thing is, though, that you use the anim class on the home page as well, but you said the page breaks on the about page. First change this css, and say if you still have any problems.


EDIT: yeah, that's just something unrelated that you didn't notice, I don't think it'll fix the page.

jollyrabbit
Sep 1st, 2007, 06:19 PM
Thank you for the suggestion! I have the same problem even with I get rid of the footer!

Thanks for taking a look, I appreciate it!