annoying problem in IE regarding images... 1

[Halcrow]

take a look at this example code:

<style>
#main-content {
    width: 760px;
    }
#side-menu { 
    float: left;
    width: 150px;
    }
#left-image {
    float: left;
    }
#right-image {
    float: right;
    }
</style>

...

<div id="main-content">
  <div id="side-menu">
    <ul>...<li>...</li>...</ul>...(my side menu)
  </div>

  <div id="content">
    <p>hello...blah blah</p>
    <img class="left-image" src="myimage1.jpg" alt="blah" />
    <p>hello...blah blah</p>
    <img class="right-image" src="myimage1.jpg" alt="blah" />
    <p>hello...blah blah</p>
  </div>
</div>

<div id="footer">
  <p>footer stuff...</p>
</div>

Now, my side menu is larger in height than my content. When there are no images in #content then the footer sits nicely below the side menu, where (of course) I want it - but when I add the images as indicated in the code, the footer cuts the side menu short and sits directly below the last <p> tag in #content. As soon as I hover over my side menu, the footer leaps to where is should be, at the bottom of the page.

This only happens in IE - does anyone know whats going on?

Thankyou
Calum

 

[Vragabond]

This would be easier to test/see if we have actual page and not some example. In example you use IDs in CSS to define images but classes in HTML code. You have footer and content IDs that are not defined in CSS. It is hard to tell what could be the problem in IE with limited information.

 

[Halcrow]

oops, that id tags in the CSS should be classes.

<style>
#main-content {
    width: 760px;
    }
#side-menu { 
    float: left;
    width: 150px;
    }
.left-image {
    float: left;
    }
.right-image {
    float: right;
    }
</style>

 

[Halcrow]

http://www.shetland2005.com/example/

here's an example

 

[Halcrow]

about the example - be careful not to hover over the menu until you the see the problem - if everything looks ok then press refresh.

use IE

I put a red border around the divs to highlight them

 

[Halcrow]

somebody help me pleeeeeese.....

 

[Vragabond]

Relax, you've been without an answer for an hour or so. Funny thing is, I cannot recreate your problem with if I test the page offline. That is, I can see the problem in IE, however, when I take the page offline to try and work with it, the problem is gone.

Funnier even, I feel the behaviour of IE is correct. Floated elements (in your case side-menu) are taken out of the flow. That means the elements below floated elements are not affected. This would mean IE is correct in floating your side menu under your footer instead of pushing your footer down.

This is how other browsers would act as well, were it not for the min-height: 600px; declaration in your #main-content. This forces the main content (where side-menu and content lie) to be at least 600px high and footer lies underneath these 600px. IE however cannot understand min-height property and ignores it. You could use IE's incorrect interpretation of height property and do a quick and dirty fix by adding this to your CSS code:

#main-content {
	width: 760px;
	margin: 20px 0px 0px 20px;
	min-height: 600px;
}

[b]* html #main-content {
	height: 600px;
}
[/b]

This will cause IE to render the main content at least 600px high as well and should eliminate your problem. I cannot offer more sophisticated solution, since as I said, I cannot reproduce the problem.

 

[Halcrow]

Thankyou very much for your reply - it has fixed my problem. Sorry about the impatent post, I was watching my thread slip down the forum and didn't want to see it dissapear! I also get worked up when something isn't working, and I don't know why.

In regard to your view on floated elements. Before I say this please remember I am a newby to web developement so this may not make any sense...

You said that you thought IE was correct in how it treated this because floated elements are taken out of the natural flow. This may well be true, but my side menu is contained inside another div called #main-content, which isn't floated, so is in the natural flow of things. I closed this div before opening my #footer div, so shouldn't #footer come after #main-content? Since my side-menu is contained inside #main-content, shouldn't this force #footer to be placed below the side menu?
Or are floated div completely taken out of the natural flow - even outside its containing div?

Just a thought....

Thanks once again...
Calum

 

[Vragabond]

Well, you misunderstood me a little. But it is natural when you're new to the business, you have hard time understanding some of the aspects. Lets look at it again.

You are correct in saying your side-menu is inside an element called main-content. However, it is the height of the main-content that is the issue here. You did not specify the height, thus height: auto; is implied, meaning it is high enough to accomodate all the elements within it that are part of the natural flow of the document. Min-height was specified and was accepted by modern browsers (Mozilla, FF, Opera, Safari, Netscape...) in making main-content at least 600px high. Others (IE and older browsers) have only that auto height to work with.

Now comes the float. Which takes the element out of the flow, meaning its size does not affect the size of the parent element. Main-content is as high as every element inside that is not either floated or positioned absolutely. Since your side-menu is floated, its size does not affect main-content -- only the size of content does.

To break from this problems in floating elements, one must stop the float. To do this, you insert an element which clears all the floating. In your code, you could have put another element after your content and your problem would be solved as well. Because at the end of the floated element you now insert a normal element which will extend the parent to the end of the floated element.

<div style="clear: both;"></div>

In your case, I saw you were already using the min-height property to solve the problem in other browsers, so I went with that option. In this case, main-content is forced to be at least 600px high, and floated element fits in nicely. However, if your floated element (side-menu) should grow to be longer than 600px, you will experience problems again. With the method above, you should be ok even with that. But as I said, I was unable to test this on my system, so I wasn't ready to experiment too much.

 

[Halcrow]

Ahh, I see what you mean now. Thanks for the insight, it has helped me understand better how divs are treated by browsers. I think I will use the "<div style="clear: both;"></div>" because I try to avoid using set heights and widths as much as possible (as you say, changes in content can lead to further problems when setting heights etc.)

A final point though:

The problem only occured in the first place when I inserted images into my content. When my content is only text, everything is ok:

http://www.shetland2005.com/example2/

why doesn't the footer cover the side menu in this example? Is the use of images significant?

Thanks again,
Calum