Forum Moderators: not2easy
<Ooops!>
As you can see, the "tabs" extend 23px past 100% of the window width. This is because I have a padding of 23px on the left of the tabs, and width set to 100%. If I remove the width from the class, then everything looks great in Mozilla & Safari. And of course if I remove the padding, the tabs push up against the right side of the window. However, the tab background only repeats to the end of the tabs in IE. What can I do?
Here's the snippet in question:
#tabs {
margin: 0;
padding: 6px 0 0 23px;
position: absolute;
left: 0px;
width: 100%;
top: 82px;
right: 0;
background: #BFBFBF url("img/bg.gif") repeat-x bottom;
font-size: 10px;
border-top: solid 5px #7F7F7F;
}
<Eeek!>
I may be able to use "float: left" instead of absolute positioning here, but that often seems to muck everything else up. If that's the only way I can get this to work then I'll explore it. Does anyone have any other ideas, however?
Thanks for your help
Chris
[edited by: Nick_W at 10:20 am (utc) on Oct. 22, 2003]
[edited by: chiller255 at 10:33 am (utc) on Oct. 22, 2003]
Anyway, my solution was simply this:
#tabs {
height: 28px;
margin: 0;
padding: 6px 0 0 23px;
background: #BFBFBF url("img/bg.gif") repeat-x bottom;
font-size: 10px;
border-top: solid 5px #7F7F7F;
voice-family: "\"}\"";
voice-family: inherit;
height: 22px; /* the correct height */
}
body>#tabs { /* be nice to Opera 5 */
height: 22px;
}
The point of the tabs in question was to allow for the height of the tab to increase with text-zooming; which is why I would use a float or absolute positioning. This solution is not what I want the site to do, but it works in the interim.
So the question still remains: can I use float/abs positioning, and get that background image to repeat all the way across the window (in IE)?
You can't float AND absolutely position, the 2 just don't mix.
Anyone have any suggestions here?
Nick
