IE7 adds blank space to all my website, in other browsers it looks normal

[johnnysan]

Hi All,

I'm a new bie to the world of web design especially coding.

I have posted threads on other sites hoping for help with my problem but the answers received do little to fix it.

Basically my web pages are fine except for when I view it in IE7 (I am guessing the error is viewable in earlier versions too) there is quite a bit of blank space before the footer. I have read that there are always errors when testing across browsers but I'm finding that IE has more bugs than any other browser at least from my meager experience.

I know there is a bug which adds space between closed list element tags and open list element tags and found a rather crude way of correcting the error, however I still have the problem of a big section of blank space on all of my pages.

If there is a fix for this I would love to know even if you could point me in the right direction i would be very grateful!!

My site is www.johnnyharu.byethost3.com.

Thanks

[rexibit]

IE has an issue with doing an accurate box model. It also likes to double the margins on floated elements, and collapse margins. These are all triggered from hasLayout.

If you want to target IE specifically you can do so in your CSS using the "." hack.

#thisIsATestID {margin: 5px;
/*This is going to target IE*/
.margin: 2.5px;}

If you notice, the second margin attribute is preceded by a "." The first margin will be picked up by compliant browsers, and IE will override the previous margin with the one following the "." This will allow you to target your doubled margins for all versions of IE.

I actually had an issue similar to this this morning. :)

[johnnysan]

IE has an issue with doing an accurate box model. It also likes to double the margins on floated elements, and collapse margins. These are all triggered from hasLayout.

If you want to target IE specifically you can do so in your CSS using the "." hack.

#thisIsATestID {margin: 5px;
/*This is going to target IE*/
.margin: 2.5px;}

If you notice, the second margin attribute is preceded by a "." The first margin will be picked up by compliant browsers, and IE will override the previous margin with the one following the "." This will allow you to target your doubled margins for all versions of IE.

I actually had an issue similar to this this morning. :)

Hi Rexibit,

thanks for trying to help me.

I think I am lost , i think you mean that IE doubles the margins set in my CSS.

Ive been trying to figure out what I should do.

The "." hack you listed, should I add this to my CSS and then put a this as a div around all the elements which use margins in my html?

Sorry I am pretty new, but thanks alot, i will keep trying and research this hack.

[tomleo]

I didn't look at your source code, but if your given div is floating left. Then in IE you will likely have double the margin you wanted.

To fix this simply add display:inline to that dive. This is known as the IE Double Margin Float Bug

Their are actually a lot of stupid bugs in IE here is a pretty good list that I often browse through when I am having a problem: http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html

[rexibit]

What you are going to need to do is put that in your CSS. you are not trying to float the DIV containing the images, just the images. So, you want to target the images inside the DIV.

Here is a fairly explanatory tutorial to get the effect you want. Or, if not, you can learn some basics to help infer what to do.

http://css.maxdesign.com.au/floatutorial/

[johnnysan]

Hi Thankyou for your comments, especially the helpful links. I will be reading through these this week!

Thankyou very much!

[rexibit]

I am glad that you found the help you needed. :) If you require some explanations to them, don't be afraid to Google a keyword that has been mentioned on this thread such as "CSS Box Model" or something like that for your question and you will usually find a tutorial.