HTMLHelp Forums > Problems stretching an image in a TD Tag

Full Version: Problems stretching an image in a TD Tag

HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)

jrattinger

Feb 14 2011, 07:13 PM

Hi All,

I have a problem that seems to only occurs in IE (i'm currently using IE8). Basically, i have web pages that consist of a header, content area and a footer. I am trying to stretch an image to be displayed as a left and right border in the content area. the image is not a solid color, so simply setting a border property would not work. In all browsers but IE, the image stretches just fine.

The site is heavily table based due to the fact that it is written for a CMS known as NetSuite. A lot of the tables and html are created by the CMS and are very difficult and tricky to modify.

You can see the page in action at - http://staging.marware.com/iphone-cases/iphone-4-cases

I have tried numerous combination's of height:100% and different positioning values with little help. One of the problems is that the height of the content area is dynamically set.

The code in place now looks like this:

<table border="0" cellpadding="0" cellspacing="0" width="1020" height="100%" align="center">
<tr style="height:100%;">


<td style="width:9px; height:100%;"><img src="http://www.marware.com/images/body_outer_border.png" border="0" height="100%" width="9" /></td>
<td valign="top" width="400" align="center">

<td style="width:9px; height:100%;"><img src="http://www.marware.com/images/body_outer_border.png" border="0" height="100%" width="9" /></td>
</tr>
</table>

Frederiek

Feb 15 2011, 03:10 AM

Start by fixing the markup errors, some of which are structural, found by the validator http://www.htmlhelp.com/cgi-bin/validate.c...s&input=yes .

Barthal

Feb 15 2011, 03:48 AM

you could cheat and make a nested table in the cells that you need the imagae in, and give that table a background on repeat.

Not really a structered way to go tho

jrattinger

Feb 15 2011, 09:39 AM

thanks for the replies.

The CMS i am using (Netsuite) is old and notorious for not being able to validate. This is a project where i am implementing a few design changes to an existing site. Due to complexity and time constraints, i cant make too many changes to the structure of the site.

I can't use the image as a background and repeat, because it needs to appear as one long, stretched, image, not tiled.

any other ideas are more than welcome. I'm really in a bind and don't know what to do.

thanks,
John

jrattinger

Feb 26 2011, 06:25 PM

Help! I still cannot resolve this issue and it is now holding back a release of my site... I have stripped down the site to just the table that contains the border images and the content. if the content stretches the content td in the table it should cause the border images to stretch. This works perfectly in all browsers but IE - naturally.

I'm losing it here, so please any help will be greatly appreciated.

Here's the stripped down code. It can be seen in action at - Border Test

Here's the code:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Border Test</title>

<style type="text/css">
p { margin-left:50px;}
</style>

</head>

<body marginheight="0" marginwidth="0" bottommargin="0" topmargin="0">

<table border="0" cellpadding="0" cellspacing="0" align="center" width="1020" style="background-color:lightgrey;">
 <tr style="height:100%;">
 <td style="width:9px; height:100%;">
 <img src="http://www.marware.com/images/body_outer_border.png" border="0" height="100%" width="9" style="zoom: 1;" />
 </td>

 <td style="width:1002px; float:left; height:100%;">
 Border Test
 Border Test
 Border Test
 Border Test
 Border Test
 Border Test
 Border Test
 Border Test
 Border Test
 Border Test
 Border Test
 Border Test
 Border Test
 Border Test
 Border Test
 Border Test
 Border Test
 Border Test
 Border Test
 Border Test
 Border Test
 Border Test
 Border Test
 Border Test
 Border Test
 Border Test
 </td>

 <td style="width:9px; height:100%;">
 <img src="http://www.marware.com/images/body_outer_border.png" border="0" height="100%" width="9" />
 </td>
 </tr>
</table>



</body>
</html>

Christian J

Feb 26 2011, 07:21 PM

You could use CSS gradient filters instead of images.

jrattinger

Feb 26 2011, 07:27 PM

QUOTE(Christian J @ Feb 26 2011, 07:21 PM)

You could use CSS gradient filters instead of images.

But that's only good for browsers that support CSS3, right? Thanks, but i don't think that's an option.

Christian J

Feb 27 2011, 07:44 AM

All the major browsers (IE, Firefox, Safari, Chrome) already support proprietary gradient mechanisms: http://www.quirksmode.org/css/gradient.html. MSIE has supported it (with varying syntax) since version 5.5 already, the other ones added support in recent versions.

You could also use Conditional Comments to show a gradient background only for IE, and stretched images to other browsers.

jrattinger

Feb 27 2011, 09:19 AM

Hi Christian,

Thanks for your input! I added all of those gradient settings and it works like a charm on my PC in all browsers. I do see a problem when i run on my laptop with an older version of firefox (3.0.19). if you know of a workaround, that would be great.

i could use a conditional css file to show the gradient for IE, but i think the image would overwrite that border, or make it wider. i think i would need to conditionally display the image as well. i'm not sure how to do that, but i guess some javascript would be needed.

Here's a link to my sample page - My Webpage

You can see how the gradient perfectly matches the solid colors from the header and footer.

Here's a test page with both the new css gradient settings and the "old" image displayed - My Webpage. it looks fine on all browsers except IE, because the image stretches properly over the border. In IE it doesn't stretch, so you can see the image displayed over the css gradient in IE.
Thanks!

pandy

Feb 27 2011, 09:52 AM

The only browser of the ones I tried that showed a gradient on that page was Safari Win. Not IE6, not Opera 9.5, not FF 3.5.6. Think I should upgrade?

Christian J

Feb 27 2011, 09:55 AM

QUOTE(jrattinger @ Feb 27 2011, 03:19 PM)

I do see a problem when i run on my laptop with an older version of firefox (3.0.19). if you know of a workaround, that would be great.

Afraid it's not supported by older FF. Same thing goes for Opera, even in current version 11.

QUOTE

i could use a conditional css file to show the gradient for IE, but i think the image would overwrite that border, or make it wider. i think i would need to conditionally display the image as well.

You might do it like this:

CODE

<img src="not_for_msie.gif" alt="">

jrattinger

Feb 27 2011, 10:15 AM

that final conditional did the trick!

here's the updated URL - it works on all browsers - i think!

Thanks so much for you help, this saved me big time.

pandy

Feb 27 2011, 10:24 AM

Yeah, I see it in IE6 even. I didn't follow - what did you do for IE?

QUOTE(Christian J @ Feb 27 2011, 03:55 PM)

Afraid it's not supported by older FF. Same thing goes for Opera, even in current version 11.

Oh crap. Is Opera up to 11? Then I really should upgrade. Maybe tomorrow...

Christian J

Feb 27 2011, 04:44 PM

QUOTE(pandy @ Feb 27 2011, 04:24 PM)

I didn't follow - what did you do for IE?

Me? It's a downlevel-revealed CC, but hidden inside an SGML comment to make it valid SGML. Makes your head spin for sure.

See second example here: http://en.wikipedia.org/wiki/Conditional_c...itional_comment

QUOTE

Oh crap. Is Opera up to 11? Then I really should upgrade. Maybe tomorrow...

IIRC it's a 10.x version in practice. If you already have 10 it will be overwritten.

Christian J

Feb 27 2011, 04:49 PM

QUOTE(jrattinger @ Feb 27 2011, 04:15 PM)

here's the updated URL - it works on all browsers - i think!

None of the versions seem to work in Opera, but I wouldn't worry since that browser has a very small market share.

QUOTE

Thanks so much for you help, this saved me big time.

You're welcome.

Christian J

Feb 27 2011, 04:56 PM

Almost forgot: what is the correct CSS behavior when it comes to percentage heights in auto-height tables? http://www.w3.org/TR/CSS21/visudet.html#propdef-height doesn't seem to make exceptions for tables.

pandy

Feb 27 2011, 05:07 PM

It didn't use to work and since CSS 2.1 is a snapshot of how things actually worked in browsers back when they put it together...

I didn't follow what actually made it work.

Christian J

Feb 27 2011, 06:17 PM

This works even in my old K-Mel:

CODE

<table border="1">
<tr style="height: 100%;">
<td style="height: 100%;"><img src="dog.jpg" alt="" style="height: 100%;"></td>
<td>Lorem ipsum</td>
</tr>
</table>

pandy

Feb 27 2011, 06:23 PM

The OPs page worked in K-Mel from the start. It was ppk's page that didn't. I wondered what made it work even in IE6. I seem to lose track somewhere in this thread every time I try to read it.

Christian J

Feb 27 2011, 06:41 PM

QUOTE(pandy @ Feb 28 2011, 12:23 AM)

The OPs page worked in K-Mel from the start.

I just mentioned my old K-Mel since you wrote "since CSS 2.1 is a snapshot of how things actually worked in browsers back when they put it together" --so why didn't W3C snapshot this too? But now I remembered more than one browser needed to support something to make it appear in CSS2.1. It didn't work in MSIE or Opera, and I can't remember when Webkit appeared (and does KHTML/Konqueror count?), so maybe the Gecko browsers was in the minority back then. Still that doesn't explain why it has appeared in Webkit now.

QUOTE

It was ppk's page that didn't.

Come again?

QUOTE

I wondered what made it work even in IE6.

Did it? The OP just mentioned using IE8.

pandy

Feb 28 2011, 03:02 AM

CODE

[quote]It was ppk's page that didn't.[/quote]
Come again? :unsure:

The gradients on ppk's test page didn't work in any browser I had, except Safari.

QUOTE

I wondered what made it work even in IE6.

Did it? The OP just mentioned using IE8.

I did. That's what I'm asking about.

Christian J

Feb 28 2011, 06:13 AM

QUOTE(pandy @ Feb 28 2011, 09:02 AM)

The gradients on ppk's test page didn't work in any browser I had, except Safari.

I wondered why you mentioned PPK, but now I realized it was me that linked to that page in the first place.

You're right, (using IETester) his MSIE example doesn't work, except in IE8 --and then the effect disappears as soon as I scroll it slightly out of view. Without his external CSS and JS it works properly in IE8.

On http://www.quirksmode.org/css/gradient.html he doesn't enable "hasLayout" for MSIE, which IIRC is required for MSIE-filters (but apparently not in IE8). Height, width or zoom should help.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.