Forum Moderators: not2easy
I can't use a static background image since the width of the links can vary. So my solution was to break the "tab" up into 3 parts:
left -> paragraph, 8px wide, has the left side of the tab as a background image
middle -> paragraph, any width, has a repeating background image of the middle portion of tab
right -> paragraph, 8px wide, has the right side of the tab
Since these are all paragraphs they wouldn't appear side by side, so I had to float them to the right. It worked fine but they could be separated from each other. For example if the browser was shrunk and they got squeezed -- sometimes the right paragraph would jump down a line, leaving the rest of the tab behind.
My solution to that problem was to surround all 3 paragraphs in a div, and float that to the right. That's where the problem is now. Almost every browser I view this in has a different interpretation of how it should look.
firefox 2 -> thinks the tabs should be stacked. It thinks some part of each tab extends the width of the screen
IE7 -> thinks the tabs should be stacked
firefox 3 -> thinks the tabs should be side by side (which is what I want)
google chrome -> thinks the tabs should be side by side
Here's a code sample below. Anyone tackle a similar problem before, or see an error here? thanks in advance
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head></head>
<body>
<!-- start tab -->
<div style="float: right;">
<p style="float: right; margin: 0px; background-image: url(images/tab-right.png); width: 8px; height: 22px;"></p>
<p style="float: right; margin: 0px; background-image: url(images/tab-middle.png); height: 22px;">
Content here: middle
</p>
<p style="float: right; margin: 0px; background-image: url(images/tab-left.png); width: 8px; height: 22px;"></p>
</div>
<!-- end tab -->
<!-- start tab -->
<div style="float: right;">
<p style="float: right; margin: 0px; background-image: url(images/tab-right.png); width: 8px; height: 22px;"></p>
<p style="float: right; margin: 0px; background-image: url(images/tab-middle.png); height: 22px;">
Content here: middle
</p>
<p style="float: right; margin: 0px; background-image: url(images/tab-left.png); width: 8px; height: 22px;"></p>
</div>
<!-- end tab -->
</body>
</html>
Google css menus for some excellent pre-built templates.
The problems are:
1. I need a way to "stretch" a background image across the container - hence the left, middle, right approach
2. I need a way to keep the left, middle, and right attached to each other that works in all browsers
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head></head><body>
<ul>
<!-- start tab -->
<li style="display: block; float: right;"><p style="float: right; margin: 0px; background-image: url(images/tab-right.png); width: 8px; height: 22px;"></p>
<p style="float: right; margin: 0px; background-image: url(images/tab-middle.png); height: 22px;">
Content here: middle
</p>
<p style="float: right; margin: 0px; background-image: url(images/tab-left.png); width: 8px; height: 22px;"></p></li>
<!-- end tab -->
<!-- start tab -->
<li style="display: block; float: right;"><p style="float: right; margin: 0px; background-image: url(images/tab-right.png); width: 8px; height: 22px;"></p>
<p style="float: right; margin: 0px; background-image: url(images/tab-middle.png); height: 22px;">
Content here: middle
</p>
<p style="float: right; margin: 0px; background-image: url(images/tab-left.png); width: 8px; height: 22px;"></p></li>
<!-- end tab -->
</ul>
<p style="clear: both"> </p>
<!-- start tab -->
<div style="float: right;">
<p style="float: right; margin: 0px; background-image: url(images/tab-right.png); width: 8px; height: 22px;"></p>
<p style="float: right; margin: 0px; background-image: url(images/tab-middle.png); height: 22px;">
Content here: middle
</p>
<p style="float: right; margin: 0px; background-image: url(images/tab-left.png); width: 8px; height: 22px;"></p>
</div>
<!-- end tab -->
<!-- start tab -->
<div style="float: right;">
<p style="float: right; margin: 0px; background-image: url(images/tab-right.png); width: 8px; height: 22px;"></p>
<p style="float: right; margin: 0px; background-image: url(images/tab-middle.png); height: 22px;">
Content here: middle
</p>
<p style="float: right; margin: 0px; background-image: url(images/tab-left.png); width: 8px; height: 22px;"></p>
</div>
<!-- end tab -->
</body></html>
Basically:
<ul>
<li><a href="#">anchor</a></li>
<li><a href="#">anchor</a></li>
</ul>
Look at some examples to understand it fully, it's a rather basic technique that all should master till we get CSS3.
