float left makes home page disappear

[Historical Forums User]

So I have a float:left on one of my divs and it makes my whole content area disappear in ie7 only. The reason I have a float:left is because I have a negative top margin and without the float, it pushes everything up instead of it covering the top element. Is there an alternative to this? Or is there a way to fix this in ie7?

The page I am working with is http://www.mtrservices.com/home/

Here is my div structure:

Code:

(the element I wanted to cover)

(the element with the float:left and negative top margin)

…content

…content

…content

…content

…content

here is my css for topcontent:

Code:

#topcontent {
padding: 27px 20px 20px 30px;
margin: -40px 0 25px 10px;
float:left;
height:320px;
width: 900px;
}

I have tried taking the whole topcontent div out and the page reappears. So its definitely that div thats the problem.

Any help would be great! Thank you.

[Historical Forums User]

ok so i fixed all but three very minor errors. its still not there in ie7. i think its because of the float. the float needs to be there for the negative margin to take effect. any ideas?

[jamygolden]

Your code:

Code:

#topcontent { padding: 27px 20px 20px 30px; margin: -40px 0 25px 10px; float:left; height:320px; width: 900px; }

Take out the ‘float: left’. So it should be:

Code:

#topcontent { padding: 27px 20px 20px 30px; margin: -40px 0 25px 10px; height:320px; width: 900px; }

As soon as I took that out it worked on IE7.
(I couldn’t notice anything different, but maybe I’m not looking properly. If you have to have the float: left I would probably create an IE7 only stylesheet and make it "float: none" and do a work around in the css somehow. You seem to have a lot of irrelevant css, I think it creates room for error)

Edit:
Here is an example of how some of your code is redundant, also you are actually fighting against yourself with the css:

Code:

#contentbox #content { height:auto; padding: 25px 45px 25px 45px; }
#contentbox.home #content { height:auto; padding: 25px 45px 25px 45px; overflow:hidden; }

#sidecol ul.sidebox li.widget ul li a { display:block; padding:12px 15px 12px 15px; text-decoration: none; color:#ccc; }
#sidecol ul.sidebox li.widget ul li a:hover { color:#fff; background: #1e1e1e; }
#sidecol ul.sidebox li.widget ul li a { border-top: solid #393939 1px; }

.dropdown li a { display: block; padding:28px 36px 29px 36px; text-align: center; }
.dropdown ul li a { display: block; padding: 29px 15px 28px 25px; }

[Historical Forums User]

in firefox when you take the float:left out, it pushes the content box up into the header. in IE it might not do anything tho. The float left allows the negative margin to work properly.

As for the unnecessary css, the website is still in the developement stage. I was trying a few things out earlier and forgot to remove the code.

[Author]

Posts