vertical image streching issue in ie/firefox- help!

[virus1]

I am working on the design for this site, and i am having a compaitbility problem with ie. the problem is that the shadows on the left and the right are streched vertically with this attribute in the image tag: height="100%". now i know that is not the usual way of doing that, but it works fine in safari, but not ie or firefox. is there any other way of vertically streching images to thier maximum height?

 

[supermario19]

I would say to try just making the image whatever size you need it instead of trying to stretch it. But I'm sure someone else has a better idea.

 

[virus1]

I would say to try just making the image whatever size you need it instead of trying to stretch it. But I'm sure someone else has a better idea.

yeah the problem is i dont' want those images to strech the page, but they need to extend to thier fullest lengths in case the page is long.

 

[virus1]

ha.. well while i was looking for an example of where this was used in other websites, i had trouble finding it, but it was right under my nose this entire time. there is some kind of use for it on the apple osx page here. i tried to take apart the page to see how the white glow on the sides are done, but i couldn't figure it out. anyone good at taking apart code?

 

[iceprincess0966]

Hi,
The way you're doing it won't work. You need to take the image out of the HTML and put it in your CSS.

.sidebar_left {
height:100%;
background-image:url(siteimages/leftblend.png);
background-position:top right;
background-repeat:repeat-y;
}

Then it should display the image along the right side of the table cell, all the way to the bottom. There's shorthand for that code, which you can find on the web... but this seems easiest to understand when you're just starting out.

Do the same thing on the other side, only set the position to "top left" and call the class ".sidebar_right".

Oh, and you should use all lower-case in CSS.

Good luck!

Michelle

 

[virus1]

Hi,
The way you're doing it won't work. You need to take the image out of the HTML and put it in your CSS.

.sidebar_left {
height:100%;
background-image:url(siteimages/leftblend.png);
background-position:top right;
background-repeat:repeat-y;
}

Then it should display the image along the right side of the table cell, all the way to the bottom. There's shorthand for that code, which you can find on the web... but this seems easiest to understand when you're just starting out.

Do the same thing on the other side, only set the position to "top left" and call the class ".sidebar_right".

Oh, and you should use all lower-case in CSS.

Good luck!

Michelle

thanks so much! now i got the sidebars working in all browsers, so it looks perfect in firefox and safari, but there is a strange white bar to the right of the header in ie, and it is the last flaw i can find, but is odd because it is only in ie. any ideas?

 

[homerjward]

before you put your final site up, please, please make sure you use relative links. *never* use absolute links within your site; moving the site will completely bork it. all the links you have currently lead to a location on your mac's hard drive.

 

[iceprincess0966]

Hi again. Your shadows look great.

I wonder if this is the problem?

<table width="709" height="171%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td height="90" colspan="3" bgcolor="#000000" class=".headercell"><a href="index.html"><img src="siteimages/header.gif" alt="Troop 57 Header" width="700" height="90" border="0" align="left"></a></td>
</tr>

Your table is 709 px and your image is only 700px wide. Where are the extra 9px coming from?

I learned HTML recently enough that I've rarely had to use tables, so it's not my area of expertise. I could be way off the mark.

 

[virus1]

Hi again. Your shadows look great.

I wonder if this is the problem?

<table width="709" height="171%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td height="90" colspan="3" bgcolor="#000000" class=".headercell"><a href="index.html"><img src="siteimages/header.gif" alt="Troop 57 Header" width="700" height="90" border="0" align="left"></a></td>
</tr>

Your table is 709 px and your image is only 700px wide. Where are the extra 9px coming from?

I learned HTML recently enough that I've rarely had to use tables, so it's not my area of expertise. I could be way off the mark.

still not working, but thanks for your help. if anyone else has any ideas, i would really love some help!

 

[virus1]

before you put your final site up, please, please make sure you use relative links. *never* use absolute links within your site; moving the site will completely bork it. all the links you have currently lead to a location on your mac's hard drive.

obviously i haven't set up the links. but in many circumstances, absolute links are very useful. i plan on using them for the images of the site.