CSS Tabs

Hi there, on the basis that you have shown no code or a link example best thing to suggest is that you read up on the stacking context and use of z-index to order the stacking context which should allow you to play around with z axis positioning of selected tabs with focus/hover classes and body id links for selected page links..

Hugo.

Thanks that worked perfectly.

Just had to set a z-index of 0 to the linked tabs and a z-index of 1 to the non linked tab or selected tab. Thanks for your help

Stewart

You think I could get your honest opinion on the tabs? I like them but I'm not sure their quite right. You can see them here. It's hosted locally for the moment because i don't want to upload anything till I'm satisfied with it. None of the links work.

Thanks

Stewart

You think I could get your honest opinion on the tabs? I like them but I'm not sure their quite right. You can see them here. It's hosted locally for the moment because i don't want to upload anything till I'm satisfied with it. None of the links work.

http://67.167.84.2/testout2.asp

Thanks

Stewart

They look good, not a bad effort at all and not the simplest thing to do,

i would have all the left edges underlapping until hovered or selected, the last two overlap at the moment which looks a bit odd and you need to loose the slight but perceptible height shift.

So just a little refinement, I might also tweak the font size up a tad.

Hugo.

The hight shift was intentional but if you think they'd look better without it I can take it out. The way I have it atm is the selected tab sits ontop of the tabs to it's right except the selected tab. It sits ontop of everything unless another tab is hovered over. Let me throw it together as you suggested and see how it comes together.

Actually I may well have been wrong about the height shift thinking about it, maybe it needs defining a little bolder.

You mean like more of a hight shift? I changed the font to a 8pt bold font and made it so the spanned one isn't raised by when you hover over one it is raised. Let me know what you think.

Getting the tabs unstyled at the moment.

Which browser you using? I'm testing it and their appearing styled in IE and Firefox. Now just discovered an odd issue. I was trying to center the table so I used:

div align="center"

Works great in firefox but in IE everything is centered both the table and text within it. Any idea what a simple workaround for this is?

Thanks

Get rid of the align center your using deprecated nasty attributes, style only through CSS align the table using margins (auto) I've not commented on the use of tables for layout but it's really not favoured, but remove all styling and don't use any deprecated code.

I'm viewing the page on both FF 1.5 and IE6 and there is no applied styling, but that may well be due to the fact that your selecting and applying styles based on the #tab ID/hook yet I see no use of that ID in the markup :?

You need to check and validate your markup as it looks as though you have some problems with your element structure missing closing tags?

For readability and visual error checking and code reading it would be an idea to check your editors settings you seem to have some odd tabs and spacing formatting which makes it rather hard to follow the markup.

Hugo.

Actually I'm guessing what may be happening is your not getting full source. I've validated the page and the css with w3c and there's no errors on either. I believe the problem is that since it's the IIS server that ships with winxp pro and limits itself to 10 people it may be bugging out. If you want I can restart it and you can try refreshing it.

As far as the spacing method it's not the editor it's IIS. The best suggestion I can make on it is to use HTML tidy or something on the source to clean it up but what appears to be happening is the server isn't properly reading in the included files.

In reality the page in edit time contains the tabs and the text and 3 server side includes. If I litterly opened the server side includes in notepad or UE or anything else and copied it directly into the right spot in the document it would have a 2 space per element formatting. But for some reason IIS when it's reading it in is screwing with the spaces. I apologize about that.

I'll remove the text-align: center for you but honestly I'm not sure how the tabs aren't working for you unless it's like I think and the servers just struggling with it's limit. I'll reset it and you can see what happens

Oh and in response to the use of tables for the layout atm I prefer it because CSS doesn't seem quite up to the challenge yet in my opinion. It can be done but it seems to involve a lot of hacks that are questionably handled by different browsers and can result in some odd effects. But because of the fact that none of the table code is actually on each individual page but all in SSI's, I can easily modify it if my opinion on that changes.

Well I don't know whats going on your end but I do know that the only hook I can see on a tab related element is the class .tabsback on the parent td of the ul going through all the tab related css rulesets and changing #tabs for .tabsback ul li a{} etc brings the tabs back into life !?

So you may want to examine what your script is generating now or set up a AMP server .

They are three possible tag errors right after the ul element for the tabs closes, all highlighted as 'unexpected tags'


</DIV>
</td>
</tr>

Yeah there's gotta be a server problem because it's validating fine on my side. I just reset it. Wasn't sure if you were around so I didn't bother but the url you can get it at is:

http://67.167.84.2/index.asp

I don't know what ampserver is but right now I'm just trying to get it working before I upload it to the real server.

BTW I removed the text-align for the tabs and used margins to fix the text align on them.

While your helping I've got 2 little issues I'm having. The main table I want to align center so I attempted to align it center with <div align="center">. Works fine in Firefox in IE everything in the entire document is centered including what's within the table.

Other issue is the table cell below the copyright displays fine in firefox with borders and all. But in IE the borders aren't displayed. I read somewhere that IE won't display borders on a table cell if it's empty. Is that true and if so is there anyway around it? Thanks for your continued help

Stewart

A debate on Tables VS. CSS-P haven't had one of them in a while:

Not a bit of it there are issues but nothing that outweighs the flexibility and power that CSS-P offers in the hands of someone wishing to put the time in to learn a new conceptual method of layouts.



It's an absolute myth that to get CSS to work requires loads of hacks again once one has put some time into learning one realises how to avoid hacks. Hacks really are a sign of an inexperienced coder - to a large extent.

Still I wasn't drawing issue on your use of tables which is surprising for me

Don't really want to debate about it. I would agree that total CSS would be nice but I'm not yet up to that challenge I'd say. In the mean time my planning in making it all SSI's instead of directly in each document was for the very reason that if I descide to update it to CSS and or make any other major modifications the entire site can be changed by editing the 3 files that each page is derived from. Thanks

Stewart

Ah well this has appeared now in the markup

<!-- This line drags in the source from the start.asp file.
 It just basicly starts the document off.  Text, HTML, etc. -->													
<!-- This is the tabs.  Since they vary based on which document
													       their in I can't readily include them in a seperate include
													       file so I just left them in the document. -->
														<DIV id="tabs">

and the markup errors have gone!

I think I mentioned earlier if the table width is less than the div then center the table using margin:0 auto;

As for debating tables I don't do that anymore I care not a jot for converting people.

As for the border problem I'm not sure as I tend not to use tables in this way but you can try position relative but it's a guess.

Hugo. [/code]