cross browser html help

[khujo56]

HI Guys

I've embedded a rss feed in a table on my main page. The feed will display 4 stories at a time. I've notice that on IE..the table seems to expand bigger because the headlines are to long. When it expands, my background image in the table seems to repeat itself, making the page untide. Is there a way to stop the table from expanding by restricting it's size. The page looks fine in firefox. Here is the address. www.iheartvacation.com. look where it's says travel news..Thanks

[WebJoel]

You must be testing this in IE6, it doesn't do what you describe in IE7.

IE tends to incorrectly expand a container to fit the contents, while compliant browsers, do not.

A full validating !doctype with URI would be a first best step to getting this to work. Screenshot image:

[khujo56]

HI Thanks for the response.

Is there a site that can do the validating for you. It does the same if i open the site on IE 7. i get the overlap on background images

[WebJoel]

Unless I am not looking at the same thing, I don't see this in IE7. Can you get a screenshot image and show what is overlapping?

[khujo56]

Sure, i've attached the screenshot. It's highlighted in red.

Thanks

[kelly23]

One thing I noticed is that you have a couple of empty paragraph tags on lines 91 and 92 that could be causing problems:


<p> </p>
<p></p>


Remove those and see what happens.

Kelly

[WebJoel]

The 'empty' <p></p> tags won't affect anything, except add an invisible "line-height". They do throw a validational warning. Adding "!comment" ( "<p><!-- --></p>" ) inside of them validates it & elminates the warning on validation, but makes no change to the document.

I suspect that one of these children elements are 'floated'? If so, to the 'parent container', add "overflow:hidden;". This would cause IE to correctly expand to enclose any 'floats'...

back:

Oh, -we're not using floats it seems...

okaaay then.... here's a 'quick patch':....<div style="margin-left:13px; margin-top:6px; padding-bottom:5px ">
<table width="475" height="auto" border="0" cellpadding="0" cellspacing="0" background="images/contentbox.jpg" style="margin-bottom:-23px;">
<tr>
<td width="239" height="170"> <div style="margin-left:30px; margin-top:11px ">
<table width="239" height="119" border="0" cellpadding="1" cellspacing="1">
<tr>.... What this does, is 'pull up' any element below it, by the negative-amount stated. -Sort of like pulling the blanket up over your feet...
What we see, is the background-image, repeating('tiling'). If the background is the same size as the container, this should not occur. but if the container is bigger than the background-image, tiling is the default behaviour..

The HEIGHT of this TABLE (I tried stating "auto" and it isn't doing anything at all), is picking up some padding or something. Maybe it's the 'list' in the blue box, which seems to extend out of the blue box and thus, forces IE to incorrectly expand vertically...

Anyway... this works in IE now. I didn't test it in Firefox, but yes, I saw it now that you pointed it out in the image.

[kelly23]

Removing those empty paragraph tags on lines 91 and 92 fixed it for me when I tried it.

Kelly

[WebJoel]

Removing those empty paragraph tags on lines 91 and 92 fixed it for me when I tried it.

Kelly You are correct. It appears that the empty "<p>"s here were acting as two line-height elements of the DIV that contains the TABLE that my solution used a negative margin to correct. Excellent. A better fix than pulling the bottom element up-over itself is..

<div style="margin-left:13px; margin-top:6px; padding-bottom:5px ">
<table width="475" height="177" border="0" cellpadding="0" cellspacing="0" background="images/contentbox.jpg" >
<tr>
<td width="239" height="170"> <div style="margin-left:30px; margin-top:11px ">
<table width="239" height="119" border="0" cellpadding="1" cellspacing="1">
<tr>

<td height="117" scope="col"> <script language="JavaScript" src="http://convert.rss-to-javascript.com/?num=4&font_size=10&src=http%3A%2F%2Frss.cnn.com%2Frss%2Fcnn_travel.rss">
</script></td>
</tr>
</table>
<p></p>
<p> </p>
</div>