IE6 and IE7 problem text and images

[spazzer]

My site is at:
http://www.eustonfishingclub.com/Reports/index.html

The problem page is the Reports Page, I have inserted some images and a floated left table but the table seems to dissapear at midpoint where a new p tag starts a new sentence next to it, the h3 tags in the same page only show the text then stop whereas in firefox they show correctly across the page then any overflow is hidden, can you help, this only seems a problem in IE7 in IE6 the h3 tags just show across the whole page and continue beneath the images floated next to it !
I would really appreciate some help on this one !

Many Thanks,
Nick C

[jscheuer1]

It looks like, using IE 8 developer tools in IE 7 mode, that adding position:relative to the tables will fix it.

[spazzer]

Thanks John,
That worked a treat, brilliant, can you possbly help with one further problem on the same page the h3 tags in IE6 dont show overflow hidden they carry on under the images floated right and in IE7 the h3 tags only show the background and border behind the text only can you advise if poss, I'm sure its just a conditional comment needed ?

Thanks Again,
Nick C

[jscheuer1]

I'm not sure I get all of what you are saying here. The overflow I see. If you want there to be a cropping effect, you may need to specify a width and or clip, perhaps for each specific h3 element.

However, there is no cropping effect in IE 8, or 6. And, when the overflow: hidden is removed from the h3 selector, all others will lose this cropping effect as well. Personally, I think it looks better without the cropping effect.

The part I don't get is:

in IE7 the h3 tags only show the background and border behind the text

I see no difference with other browsers, that's also all they show behind the text, at least as far as I can see.

[spazzer]

Hi,
Thanks for taking time to reply, maybe the reason your not seeing what I,m seeing is possibly because of your screen size and that everything looks in place, maybe if you try narrowing screen size it may show up then,I will try to explain further.
In IE6 when I look at the page the h3 tags background colour and border dont seem to see the hidden property and carry on across the content div and behind the floated image to the right,its like the h3 tag doesnt see the image floated and is behind the image floated !
In IE7 the background colour and border of the h3 tag only shows behind the h3 tags text and then stops abruptly it doesnt carry on across the page as it shows in firefox and IE8 etc.
Hope this helps !
Thanks for your time !
All the Best NC

[jscheuer1]

Well, if I narrow the window enough (below 950px), I get a horizontal scrollbar. Anything greater (like 1024x768 and above) though, the width of the division with the id of 'container' (950px) limits what the h3 elements can do. In fact, with the width set like that, the 'container' can never be anything other than 950px wide. So the h3 elements will be pretty much the same in all browsers and on all screens. Pretty much, with the exception of how the overflow property is interpreted in some browsers.

I just think that there's nothing wrong with the h3 element appearing underneath the image. It looks better to me than having it cropped. All browsers show the full text, none of that is covered by an image that I could tell.

So my recommendation would be to scrap the overflow hidden for h3. If you really like the crop though, I also told you what you would probably have to do to get it in those browsers that don't do it automatically, which was to set an explicit width and/or clip for each h3 element.

Since the container is limited to be no less and no more than 950px in width, whatever you set for the h3's width or clip will work cross browser. The only possible exception would be a descrepancy of a few pixels here and there, most likely in one or more versions of IE. If that happens, then you may use conditional comments to rectify that.

But, as I say, I would just scrap the overflow hidden. I think it looks better that way. Having the image go over the h3 looks cool to me. I see things like that in magazines and on other web sites all the time. Also, it would require less styles and less precision, always a good thing when possible in web design.