308 posts
    Has referred 1+ members Has sold $75,000+ on Envato Market and is now an Elite Author Has been a beta tester for an Envato feature Has collected 10+ items on Envato Market
+4 more
brainbuzzmedia says

I have been working on a framework to use to develop my wordpress themes and it is entirely done except for one incredibly infuriating IE7 bug. This bug puts my footer content in my div#main and my main content in my footer, and then puts a ton of unnecessary space above both of them.

You can clearly see what I’m talking about by going to the following page in IE7 and then in anything else:

http://www.brainbuzzmedia.com/blueprint/blueprint.html

(Tip: If you have IE8 already installed, you can press F12 in it and open the dev panel, then click ‘Browser Mode’ and choose ‘Internet Explorer 7’ to see what it would look like in IE7 )

I have figured out that if I take out the nivo slider code then everything displays in the proper positions. That code is:

<!-- sliders --> <script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script> <!-- initialize sliders --> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script>

Also, the content of the post and sidebar are wrapped in their own divs (#content and #sidebar), then a 1000px wide div#main around the two, then that is wrapped in a 100% wide div#main_container. I have found that if I remove the following code from div#main that the layout also returns to the correct position:

width:1000px; min-height:100%;

Neither of these solutions will work though because I need to be able to include a slider and when I remove the width on div#main then there is nothing in place to hold the content in the right width.

I would be really, really grateful to anyone with more coding experience that could help me out with this as I have 10 wordpress / html themes that are ready to be coded and this is the only thing holding me back.

BTW , Kriesi if you happen to read this, thanks for the drop down code. I’m going to do something nice with it.

629 posts
    Has been part of the Envato Community for over 4 years Has referred 10+ members Has collected 10+ items on Envato Market Sells items exclusively on Envato Market
+2 more
VagrantRadio says

When you have two floated elements inside a div, it collapses the div. Try applying float:left on the #main div to clear it and move your clearing div after .sidebar outside of #main to clear the div so the footer doesn’t come up..

When I first opened it in IE7 , it appeared like you explained it. Then when I opened developer tools and toggled the floats for .content and .sidebar divs it went back to where they should be and the space was gone which leads me to believe it’s the collapsing div bug.

From Css-Tricks – All About Floats

The Great Collapse One of the more bewildering things about working with floats is how they can affect the element that contains them (their “parent” element). If this parent element contained nothing but floated elements, the height of it would literally collapse to nothing. This isn’t always obvious if the parent doesn’t contain any visually noticeable background, but it is important to be aware of.

http://css-tricks.com/all-about-floats/

If that doesn’t fix it, message me and we’ll get it sorted out.

308 posts
    Has referred 1+ members Has sold $75,000+ on Envato Market and is now an Elite Author Has been a beta tester for an Envato feature Has collected 10+ items on Envato Market
+4 more
brainbuzzmedia says

Wow. Thank you.

One question though; once I do this it works but the content and sidebar are floated to the left of the screen now. What’s the best way to center them?

1173 posts
    Has been part of the Envato Community for over 5 years Located in Australia Has sold $10,000+ on Envato Market Has been a beta tester for an Envato feature
+3 more
Motionreactor says
629 posts
    Has been part of the Envato Community for over 4 years Has referred 10+ members Has collected 10+ items on Envato Market Sells items exclusively on Envato Market
+2 more
VagrantRadio says

I don’t know but once I hover over the dropdown box floated in the content div, it flashes back to where it should be. Remove that and give it a try.

1173 posts
    Has been part of the Envato Community for over 5 years Located in Australia Has sold $10,000+ on Envato Market Has been a beta tester for an Envato feature
+3 more
Motionreactor says

To center a site:


<style>
#site {
width: 500px; /* A width, in this case fixed is needed to make it work */
margin: 0 auto 0 auto;
}
</style>

<div id="site">... whatever you want ... </div>

That adds automatic margins to the left and right. Vertical centering is a whole other issue, with some browser hurdles to jump.

308 posts
    Has referred 1+ members Has sold $75,000+ on Envato Market and is now an Elite Author Has been a beta tester for an Envato feature Has collected 10+ items on Envato Market
+4 more
brainbuzzmedia says
To center a site:

<style>
#site {
width: 500px; /* A width, in this case fixed is needed to make it work */
margin: 0 auto 0 auto;
}
</style>

... whatever you want … That adds automatic margins to the left and right. Vertical centering is a whole other issue, with some browser hurdles to jump.

Dude, no offense but did you even read my first post? I know how to center a div with margins. I’m trying to fix an IE7 only bug where two floated columns inside a container are not clearing and the only way i’ve figured out is to float their container left, thus ruining the margin 0 auto centering.

308 posts
    Has referred 1+ members Has sold $75,000+ on Envato Market and is now an Elite Author Has been a beta tester for an Envato feature Has collected 10+ items on Envato Market
+4 more
brainbuzzmedia says
I don’t know but once I hover over the dropdown box floated in the content div, it flashes back to where it should be. Remove that and give it a try.

Vagrant: I think that is just IE being weird. If you hover over or change anything in the dev panel, it resets the site to how it should display.

Right now this is basically how I have it:

<div id="main_container"> // full page width so I can style the background <div id="main"> // 1000px floated left to reset the bug <div class="content"> // floated left with content in it <div class="sidebar"> // floated left with sidebar content </div> // close sidebar </div> // close content </div> // close main <div class="clear"></div> // clear columns </div> // close main_container

If I take out that float left on the #main then the spacing is out of wack, if it is on there then everything goes to the left.

1173 posts
    Has been part of the Envato Community for over 5 years Located in Australia Has sold $10,000+ on Envato Market Has been a beta tester for an Envato feature
+3 more
Motionreactor says

Yeh sorry I didn’t read your post. You’re gonna have to place the floats in a container div I think, with position:relative and a clear:both as explained earlier. The apply the auto margins to the container. I don’t think text-align:center will do anything in this case. You could maybe try making them display: inline-block, but inline-block can be flaky across browsers.

308 posts
    Has referred 1+ members Has sold $75,000+ on Envato Market and is now an Elite Author Has been a beta tester for an Envato feature Has collected 10+ items on Envato Market
+4 more
brainbuzzmedia says

I just added this to my original code just inside the div#main_container:

<!-- IE7 float fix --> <!--[if lt IE 7]> <span style="display:none;">.</span> <![endif]-->

It seems to make IE7 think that there is something other than just floated divs inside that container and it displays properly. Is this horrible to do?

by
by
by
by
by
by