Copy & paste the code below to embed this comment.
Steven Urmston
Great technique, but I have experienced some problems positioning the tabs. When using absolute positioning, this can work in Mozilla/IE , but Opera 6(win) has problems. Relative positioning works in Opera, but this dies a sad death in IE.
If anyone has perfected positioning the 2 floats , I would be very grateful for a few pointers!!
Copy & paste the code below to embed this comment.
Yuri
I am having a problem with a site, http://www.wfmuziek.nl, which seems to be caused by the same thing as the IE/Mac CSS rendering problem.
I don’t have a Mac to test on, but a Mac sent me a screenshot… there’s a huge gap where the content div should be, and you have to scroll all the way to the right to see the content.
Is there a Mac user who wants to take a look at the site’s CSS and suggest what might be causing this?
Copy & paste the code below to embed this comment.
LostPacket
For those of you looking for more positioning control (i.e. centering your tabs, etc), don’t forget that this technique can be easily adapted to a table-based layout. Simply style the <td> tag instead of the <li>.
I know it’s not perfect, but if your business/design requirements make a CSS-based layout impractical, it’s a nice compromise.
I implemented tabs similar to these, but the background images kept flickering in IE6. After much head-scratching, I copied your example verbatim up to my web server, and the problem still occured. It turns out that IE6 won’t cache images when the web server sends them gzipped (which Apache often does). Since your sliding doors are hosted on IIS which doesn’t use gzip content-encoding, there is no problem for you.
In my previous post I mentioned the IE6 content-type:gzip bug. If you’re on a Linux/Apache system that uses mod_gzip, you’ll need to disable it to avoid constant image reloads in IE6. My host is crediblehost.com, and I created this .htaccess file at my public_html root:
As I just commented on the follow up article, there’s no need to split the tab images into left and right. The background alignment allows a single image to be used. See this at http://www.alzonline.net/en/forums/
Copy & paste the code below to embed this comment.
Krishna
Hi,
The article is wonderful and I implemented this in my current project. One of my screens has lot of tabs and they wrap around to the next line. I am using this inside one of the frames. The frame doesn’t have the scrolling=“no” , so how to make the tabs without wrapping to the next line.
What if you have one DIV container that is transparent (DIV1), and inside that DIV is another DIV (DIV2) that is colored, and has the link text in it. DIV2 is centered horizontally and vertically in DIV1.
Now, use your sliding doors technique, but instead of a regular graphic, you create a graphic that has the rounded-edge look that fades to transparency. The region between the inside edge of DIV2 and the outside edge of DIV1 would be filled with the graphic, which would fade to transparency at the junction between DIV1 and DIV2.
What does this accomplish? Well, you have the rounded ‘graphic’ look, but you can change the color of DIV2. Hence, you can use CSS to change the color of the ‘button’ (DIV2) at will, and since DIV1 is transparent, you won’t see the little corners of color at the outside corners of DIV1, where the graphic is transparent.
Copy & paste the code below to embed this comment.
Geert Vancompernolle
This is really awesome! Didn’t know this was all possible with ‘simple’ CSS.
You really showed me the power of CSS. I’m convinced more than ever about the capabilities of CSS.
Yesterday, I reported Japanese character wrapping within a tab.
After that I noticed that the same symptom happens for alphabetic words.
For verification, I changed tab wording from single word to two words, such as New York, New Jersy, and so on.
If you make browser’s width narrower ‘New’ and ‘York’ are formatted in two lines.
Copy & paste the code below to embed this comment.
Pratlina
This was a wonderful article and I love the technique used here. It has made my work so much easier. I have tried using the same technique with a vertical menu but without much success. Has anyone out there accomplished this?
Copy & paste the code below to embed this comment.
James Atkinson
Please excuse my total ignorance.
I’m redesigning an old table-based page with a lot of tabs along the top (ie “news | gallery | store | contact” etc). Since this navbar is a repeating element that gets reused in plenty of pages, what’s the best strategy for structuring the site? My current options seem to be:
1) paste in the tab markup by hand into each page
2) use a SSI to reference a “nav.shtml” file
(pro: if i use this method I can script nav.shtml so the current page’s tab is highlighted or “greyed out”
con: the scripted “nav.shtml” is pretty hefty)
3) use the <object> tag to reference “nav.html”
(do other designers use this tag a lot?)
I just want to have tabs that I can easily update 6 months from now without editing a million html pages.
Copy & paste the code below to embed this comment.
squalis
Hi,
great css…I had one problem though..I couldn’t get the little white corners to disappear….: ( I followed along everything was going great..I added the css to my file ..to remove them….but they remained ….I use IE 6 I dunno if that matters ….other than that it worked Great …Im sure it’s probably something I’ve overlooked….but I tried 3 times & I’m stumped…any help would be great…Thanks
Thank you Doug for sharing this great idea with us. These tabs are fantastic and so useful!
One minor note: Netscape 6 on the Mac has a problem with the #header containing div collapsing rather than containing the floats. The result is the background image does not appear behind the floated links. I think it may be because unlike most browsers, NN6mac doesn’t follow the CSS 2.1 specs on expanding to contain child floats. (It still follows the older CSS2.0 specs). And so, the only solution I could think of would be to put a clearing div in the html as the last element in the #header div. This of course adds clutter to the html code and is therefore probably not worth it, given the few percentage of people using Netscape 6 on the Mac.
Has anyone else noticed this too?
I noticed this issue in Netscape 6.2.3 on a Mac running OS9.
Copy & paste the code below to embed this comment.
heatherh
This is really a cool feature and I was about to use it on the redesign of our new corporate site until I tested it in NS 4.7. Unfortunately our web stats show people still hitting our site with this dinosaur so we have to build for it. It’s completely broken, totally unusable in NS. Bummer :(
131 Reader Comments
Back to the ArticleRen
Up to now I used this technique without CSS. You’ve made it much easier now. Thank you!
Steven Urmston
Great technique, but I have experienced some problems positioning the tabs. When using absolute positioning, this can work in Mozilla/IE , but Opera 6(win) has problems. Relative positioning works in Opera, but this dies a sad death in IE.
If anyone has perfected positioning the 2 floats , I would be very grateful for a few pointers!!
Lino
For some reason, when I open my page in netscape, it doesn’t break between the final </div> and the procedding code.
That tabs are there and working fine, but then my stuff is to the right of them, as opposed to under them.
Yuri
I am having a problem with a site, http://www.wfmuziek.nl, which seems to be caused by the same thing as the IE/Mac CSS rendering problem.
I don’t have a Mac to test on, but a Mac sent me a screenshot… there’s a huge gap where the content div should be, and you have to scroll all the way to the right to see the content.
Is there a Mac user who wants to take a look at the site’s CSS and suggest what might be causing this?
Yuri
It included the comma in the link, so here is is again:
http://www.wfmuziek.nl
LostPacket
For those of you looking for more positioning control (i.e. centering your tabs, etc), don’t forget that this technique can be easily adapted to a table-based layout. Simply style the <td> tag instead of the <li>.
I know it’s not perfect, but if your business/design requirements make a CSS-based layout impractical, it’s a nice compromise.
John Simons
I implemented tabs similar to these, but the background images kept flickering in IE6. After much head-scratching, I copied your example verbatim up to my web server, and the problem still occured. It turns out that IE6 won’t cache images when the web server sends them gzipped (which Apache often does). Since your sliding doors are hosted on IIS which doesn’t use gzip content-encoding, there is no problem for you.
John Simons
In my previous post I mentioned the IE6 content-type:gzip bug. If you’re on a Linux/Apache system that uses mod_gzip, you’ll need to disable it to avoid constant image reloads in IE6. My host is crediblehost.com, and I created this .htaccess file at my public_html root:
<ifmodule mod_gzip.c>
mod_gzip_on no
</ifmodule>
Which did the trick.
Rob Winters
This is why I missed you guys. :)
Steve Clay
As I just commented on the follow up article, there’s no need to split the tab images into left and right. The background alignment allows a single image to be used. See this at http://www.alzonline.net/en/forums/
Krishna
Hi,
The article is wonderful and I implemented this in my current project. One of my screens has lot of tabs and they wrap around to the next line. I am using this inside one of the frames. The frame doesn’t have the scrolling=“no” , so how to make the tabs without wrapping to the next line.
thanks in advance,
Krishna
Darren Brothers
Excellent article, and it gave me an idea.
What if you have one DIV container that is transparent (DIV1), and inside that DIV is another DIV (DIV2) that is colored, and has the link text in it. DIV2 is centered horizontally and vertically in DIV1.
Now, use your sliding doors technique, but instead of a regular graphic, you create a graphic that has the rounded-edge look that fades to transparency. The region between the inside edge of DIV2 and the outside edge of DIV1 would be filled with the graphic, which would fade to transparency at the junction between DIV1 and DIV2.
What does this accomplish? Well, you have the rounded ‘graphic’ look, but you can change the color of DIV2. Hence, you can use CSS to change the color of the ‘button’ (DIV2) at will, and since DIV1 is transparent, you won’t see the little corners of color at the outside corners of DIV1, where the graphic is transparent.
Geert Vancompernolle
This is really awesome! Didn’t know this was all possible with ‘simple’ CSS.
You really showed me the power of CSS. I’m convinced more than ever about the capabilities of CSS.
Thanks for this great example!
Rgds,
Geert
Hiro Katsumi
Yesterday, I reported Japanese character wrapping within a tab.
After that I noticed that the same symptom happens for alphabetic words.
For verification, I changed tab wording from single word to two words, such as New York, New Jersy, and so on.
If you make browser’s width narrower ‘New’ and ‘York’ are formatted in two lines.
I prefer to have a fix for this issue.
rz
include a non-breaking space rather than a ” ” in menu items that have 2 or more words.
Pratlina
This was a wonderful article and I love the technique used here. It has made my work so much easier. I have tried using the same technique with a vertical menu but without much success. Has anyone out there accomplished this?
Rob Green
Thats given me some good ideas… thanks for taking the time out.
James Atkinson
Please excuse my total ignorance.
I’m redesigning an old table-based page with a lot of tabs along the top (ie “news | gallery | store | contact” etc). Since this navbar is a repeating element that gets reused in plenty of pages, what’s the best strategy for structuring the site? My current options seem to be:
1) paste in the tab markup by hand into each page
2) use a SSI to reference a “nav.shtml” file
(pro: if i use this method I can script nav.shtml so the current page’s tab is highlighted or “greyed out”
con: the scripted “nav.shtml” is pretty hefty)
3) use the <object> tag to reference “nav.html”
(do other designers use this tag a lot?)
I just want to have tabs that I can easily update 6 months from now without editing a million html pages.
squalis
Hi,
great css…I had one problem though..I couldn’t get the little white corners to disappear….: ( I followed along everything was going great..I added the css to my file ..to remove them….but they remained ….I use IE 6 I dunno if that matters ….other than that it worked Great …Im sure it’s probably something I’ve overlooked….but I tried 3 times & I’m stumped…any help would be great…Thanks
Michael Ryznar
Thank you Doug for sharing this great idea with us. These tabs are fantastic and so useful!
One minor note: Netscape 6 on the Mac has a problem with the #header containing div collapsing rather than containing the floats. The result is the background image does not appear behind the floated links. I think it may be because unlike most browsers, NN6mac doesn’t follow the CSS 2.1 specs on expanding to contain child floats. (It still follows the older CSS2.0 specs). And so, the only solution I could think of would be to put a clearing div in the html as the last element in the #header div. This of course adds clutter to the html code and is therefore probably not worth it, given the few percentage of people using Netscape 6 on the Mac.
Has anyone else noticed this too?
I noticed this issue in Netscape 6.2.3 on a Mac running OS9.
Nice work Doug!
heatherh
This is really a cool feature and I was about to use it on the redesign of our new corporate site until I tested it in NS 4.7. Unfortunately our web stats show people still hitting our site with this dinosaur so we have to build for it. It’s completely broken, totally unusable in NS. Bummer :(