Member Avatar for 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

  • 3 Contributors
  • 6 Replies
  • 131 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by rexibit
Member Avatar for 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. :)

Member Avatar for 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.

Member Avatar for 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/

Member Avatar for johnnysan

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

Thankyou very much!

Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.