Mobile Friendly Website


Doing it with style

tabbed pages COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}

Post a comment

Current posts

Problem with "Cross browser tabbed pages with embeded links"


I'm just having a problem with your solution with IE 6+ and Opera 9+.... Firefox is ok.

I have tried to put inside a tab page a form.Everything seams to be working but for the element <SELECT> there is a little problem.

When you try to select a voice the complete flyout menu disapears. I have tried to fix the problem but without success.

Any suggests?

Great job.
(14.09.2007, 16:50)

I, as well as others, wanted to have one of the rollovers displaying when the page first loads, so here's how I did it (using the two_page.css/html):

Line 53 of the two_page.css contains the line .menu2 ul li:hover a {. This triggers the rollover effect. Knowing that, I added this CSS to that line (.menu2 ul li:hover a, .menu2 ul a {) and then I added a class="active" to line 4 of the HTML code (two_page.txt if you downloaded Stu's file). This will keep the rollover trigger in the 'on' state when the page loads. Now for the content...

Line 58 of the CSS contains the hover state for the content (.menu2 ul li:hover ul {). I added my active state here as well (.menu2 ul li:hover ul, .menu2 ul ul {), then I added the class call to the HTML at line 11 <ul class="active">.

If you want to see it in action, go here: The area where I used it is the main photo along with the rollover to the right of the photo.
(19.09.2007, 19:04)

Hi Stu,

Noob here. I must say, the collection of your CSS work is an inspirational and educational.

I'm a bit type-sensitive, and I noticed that the P's with a link in them have the line height blown out, while the p's without are more closely spaced. Is there a way to compensate for, or correct, the effect the link is having on the line height? Thanks...
(25.02.2008, 06:08)

I have modified this to list the links vertically on the left instead of horizontal. I am using it to display a lot of content that had to go on a home page. There is a problem however, the drop down menu at the top of the page is showing below the tabbed pages box...

I messed around a bit with z-index on both the top dropdowns and the tabbed pages, but it refuses to cooperate with me, any ideas?
(28.02.2009, 07:02)

Hello Stu, Thanks for all the great CSS studies. With menu 2 of this example, I see your content of varying lengths sometimes overflows what's below it. Can it be made to push down the remaining page content, or is that only possible with JS?
(25.10.2012, 00:45)

It would be possible to push down the content by adding extra styling to make the containing element grow vertically to match the height of the tabbed pages.
(25.10.2012, 08:16)

Sorry, feeling like such a novice right now. The content of the tabbed page is kept in an absolutely positioned UL tag. Are you saying the styling would need to be applied to the LI tag which contains the UL or are you talking about a container above (outside) of that? Thanks again. Was pleasantly surprised by the quick response.
(27.10.2012, 02:44)

Cannot guarantee this will work without testing, but if you add the following style to the first version then it should push down the content below.
.menu ul li:hover {height:200px;}
(27.10.2012, 08:24)

Stu, that does work, sort of. Applying that to your menu2 though, are you saying that the height would need to be explicitly defined for each tabbed content area? No way you are aware with CSS to have it automatically expand to fit the content (and still work in IE8)? Specifically, I'm referring to the Claude Monet and Marc Chagall tabs in your menu2. Their content covers the "No javascript - just CSS - and it validates" tagline, while the others don't.
(29.10.2012, 21:56)

Mark Stewart:-
Stu, can you 'adjust' this demo so that the top tab-line with three links pushes down the following tab-line with five links. Then you demonstrate a "push-down" and an "overlay" in the same demonstration.
(23.03.2013, 18:22)

10 of 45 comments (part 1). [ » ] [ * ]


Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page