[RESOLVED] IE8 and oddities with DIV Overflow?

_sh

Guys,

Please take a look at this page...

[mod]URL removed at poster request[/mod]

I've just upgraded to IE8, using 'compatibility mode' there's a large vertical banner on the far right hand side that shows perfectly (as it does in any other browser too), however switch to IE8 Native mode and all of a sudden that Div has a scroll bar which knocks the banner to the bottom of the page, its disabled but its still there and shouldn't be - whats changed in the CSS rendering in IE8?

Thanks in advance for your help, because I'm stumped!!!

johanafm

overflow:
The behavior of the 'auto' value is user agent-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes.

As such, they are free to provide the scrollbar wether it's needed or not, in the same way as it's required with overflow: scroll. And if you change it to overflow: scroll, the right side image is moved down in the exact same way in other browsers as well (checked FF3).

So, either overflow: hidden, or increase width of #wrapper_content_directory to 883px (and change how you apply the background colour or it won't look nice in browsers that don't show the scrollbar), or both change width and set overflow: scroll.

And if you do change the width, do double check the value I suggested in all browsers reelvant to you. I'm uncertain if SB widths differ between browsers, but iirc IE8, Safari 4 and FF3 all have 15 or 16px scroll bars.

_sh

Thanks for your quick reply Johana, very frustrating as it works fine in all pre IE8 browsers - I'll take onboard what you've said though and make some amendments 🙂 if Microsoft had interpretted CSS properly in the first place, I guess we wouldn't encounter such issues when they correct their browsers!

bpat1434

You might also think about giving that a min-height value as well. Although if you do so, then pre-IE8 browsers will ignore it (IE7 may still use it, but IE6 ignores it). This should allow for your div to grow as it needs.

There are some improvements you could make in the design of the HTML of the site if you're up for some criticism.

Using <div>s instead of <ul> and <li> elements for navigation or lists
using an empty div as your header instead of the more appropriate <h1> tag
Use of a large background image when one isn't necessary, but one smaller background image could be used instead (e.g. just the white circle in the center is needed, then the color can be #ccc or whatever).
Using images to maintain spacing (margins and padding can achieve the same effect).

The other thing you should do is validate your markup and then validate your css. Once you validate these items, then start looking in browsers to see what you need to modify to make it work.

It's best to start with the most standards compliant browser you can (which happens at this time to Opera, but Firefox is good too). Then once everything looks good, go back to IE and Safari and Chrome and see what needs fixing. Most likely, not a lot will; however, the lower you get in IE releases, the more you'll have to work at getting things to look right.

[EDIT] Links removed per poster request

_sh

Thanks for your feedback mate, really appreciate it - the W3 validator is a service I have had mean't to start using but just haven't had chance as I've been swamped - this site is a long way from its final destination, the site owner wanted it live quickly and so we have had to make sacrifices to get it online quickly. I have however cleared many of the validation errors.

Thanks again,.

_sh

Thanks for your help here guys - could someone/a mod do me a favour and blank out the web addresses that I posted on this page ASAP?

Thanks again!

bpat1434

Glad to hear you got it sorted. The links were removed per your request.

_sh

Many thanks BPat!