vertical image streching issue in ie/firefox- help!

virus1

macrumors 65816
Original poster
Jun 24, 2004
1,191
0
LOST
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

macrumors member
Aug 17, 2006
36
0
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

macrumors 65816
Original poster
Jun 24, 2004
1,191
0
LOST
supermario19 said:
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

macrumors 65816
Original poster
Jun 24, 2004
1,191
0
LOST
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

macrumors newbie
Jul 13, 2006
13
0
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

macrumors 65816
Original poster
Jun 24, 2004
1,191
0
LOST
iceprincess0966 said:
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

macrumors 68030
May 11, 2004
2,745
0
fig tree
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

macrumors newbie
Jul 13, 2006
13
0
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

macrumors 65816
Original poster
Jun 24, 2004
1,191
0
LOST
iceprincess0966 said:
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

macrumors 65816
Original poster
Jun 24, 2004
1,191
0
LOST
homerjward said:
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.