View Full Version : CSS tab menu problems

08-17-2005, 02:46 PM
Hi everyone,

I have a very bizarre problem with a website I am working on. I got some CSS code off a website for a tab menu and when I applied it to my design it lined up the tabs very weirdly, in a diagonal row across the top. :confused:

View the site (http://www.melissamolenaar.com/milfordfire)

View the CSS (http://www.melissamolenaar.com/milfordfire/style.css)

If anyone can spot how to fix this problem I would really appreciate it.

Thanks a million! ;)


Tristan Gray
08-17-2005, 02:54 PM
Hey, someone else from Halifax. Damn, I was just going to blow you off and say I'd never come across this problem before and remind you that Internet Explorer does not render transparencies with .png images. But now I guess I should try to help, my reputation is at stake.

Could you include a link to where you go the menu?

Tristan Gray
08-17-2005, 03:09 PM
Ok, well I gotta say that the CSS I find very confusing because it is definitely much different than I would have gone with. But try using the macground image on the list items rather than on the header div or the span. Try putting all the graphic elements of the menu in the list attributes.

#header li {
float: left;
display: inline;
background:#757575 url("images/sliding-doors-mountaintops-1.png") no-repeat left top;

Now it seems like you may be using a sprite-based roll over so you may need to instead do it to the links and leave the list without the background images. In which case apply the background image you want to each link item and of course the hover as well. If there are any more problems please include a link to the original source of the menu and simplify the code.

08-17-2005, 04:28 PM
Use the full doctype, including the url to get IE in standards compliance mode.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

08-17-2005, 04:32 PM
Light Weight, Low Tech CSS Tabs (http://www.fiftyfoureleven.com/sandbox/weblog/2004/oct/light-weight-css-tabs/) <------ the site I got the code from which is based off of A List Apart's Sliding Doors of CSS (http://www.alistapart.com/articles/slidingdoors/) tutorial. I used the ALA tutorial first but didn't like the look of the buttons and wanted something simpler so I tried the Light Weight ones instead.

I am aware of the .png issue but the buttons aren't meant to be transparent. I'm just using the original image given in the tutorial for now before I bother creating my own images. That's why the background color doesn't match. I wanted to see if I could get the buttons to work before customizing too heavily. I'm pretty new to CSS based design so it's all trial and error for me. I'm not sure why the tutorial uses .png images in the first place....oh well.

I noticed you were from Halifax! That's awesome! We rock! :P

Thanks for stopping to help!


08-17-2005, 04:37 PM
mrruben5 --

I changed that part in the file and it didn't seem to make a difference.

But thanks anyways.

Tristan Gray
08-17-2005, 05:02 PM
Yes, Halifax is a fairly nice city. Whenever I am away I miss the universities. Alright well try making a barebones example of the menu and just get it working on a blank page, that way your code is less confusing. Because I know that as I encounter problems I tend to just add/change things and then my code ends up ugly. So try with just the most basic elements getting the menu to work first. I would also perhaps consider using these menus (http://www.alistapart.com/articles/hybrid). The hybrid drop down menus are in my opinion among the sleekest and most stylish available. Relatively simple too.

CSS design takes a while to get into but once you're used to it you'd never EVER go back. I am being forced to do a site in traditional HTML tables and use minimal to no CSS and it is killing me. Everything could be so much prettier and clean if only I could use CSS. Good luck, I am at work and things are busy but I will check in later to see if you've gotten it all sorted out.

08-17-2005, 05:25 PM
Ah yeah I see now.

#header ul {
list-style-type:none; /*This gets away the bullet in firefox*/

#header li {
display:inline; /*for IE, solves the diagonal things */

I'm not getting why you are declaring that border for each element: header, body and footer.

What's wrong with just

#global {
border:2px solid #fff;

08-17-2005, 07:31 PM
Thanks mrruben5, you're awesome, that fixed it!

08-17-2005, 07:38 PM

I checked out your menu idea and I really like it but I just need 1 level of navigation for this website. There are no sub-pages since this is a very basic site.

I love CSS now that I know it. I spent waaaaay too much time fiddling around with stupid tables in Dreamweaver. In college we mostly worked from the WYSIWYG side, but I hand code EVERYTHING now and I can't believe I ever preferred the old way before. When you're used to one way I guess you just tend to stick with it. Thank god I got the job I have now and it forced me to brush up on my HTML and CSS.

Do you work as a web designer?