Forum Moderators: open
I am working on a website that requires the design to stretch across the entire page. I currently have it set so that each row has 3 columns, the middle being the content of the page, at 766px, and the outer columns supporting the stretch features. I can it it to work in Firefox just fine, however it simply will not work in IE. I have been looking everywhere for a solution but just cant seem to find one. I also tried using divs but they didn't seem to work when I had the middle defined to a set pixel width.
IE simply puts the layout to the left, and does not repeat the repeating image that makes it strecth.
Here is my CSS
.header{
background-image:URL('images/header_img.png');
background-repeat:no-repeat;
width:766px;
height:222px;
}
.white_bar{
background-image:URL('images/white_bar.png');
background-repeat:no-repeat;
width:766px;
height:23px;
}
.repeat_bar{
background-image:URL('images/repeat_bar.png');
background-repeat:repeat-x;
height:23px;
width:inherit;
}
.glass_nav{
background-image:URL('images/glass_nav.png');
background-repeat:no-repeat;
width:766px;
height:143px;
}
.repeat_glass{
background-image:URL('images/repeat_glass.png'); background-repeat:repeat-x;
height:143px;
}
And here is my html and doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table width="100%" align="center" cellpadding="0" cellspacing="0" style="display:table">
<tr>
<td style="width:inherit"></td>
<td class="header" style="width:766px"></td>
<td style="width:inherit"></td>
</tr>
<tr>
<td class="repeat_bar" style="height: 22px;"></td>
<td class="white_bar"></td>
<td class="repeat_bar"></td>
</tr>
</table>
</body>
If anyone knows a solution it would be greatly appreciated.
[edited by: Davasso at 11:09 pm (utc) on Mar. 3, 2009]
Instead of using .repeat_bar, .white_bar and so on. Name them like so: td.repeat_bar, td.repeat_bar and so on.
Doing it the way you have it now, table cells still feel that they need to be adjusted by HTML (center, left, right, mostly)
Give what I gave you a shot and let me know if it helps.
Wait scratch that, it did solve it!
Thanks so much, so what exactly caused that? Simply not having the td. in front of the css class?
[edited by: Davasso at 11:26 pm (utc) on Mar. 3, 2009]
