Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Aug 2005
    Location
    Halifax, NS, Canada
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation CSS tab menu problems

    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.

    View the site

    View the CSS

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

    Thanks a million!

    Melissa

  • #2
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?
    Once I thought I was wrong but I was mistaken.

  • #3
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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;
    etc
    }

    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.
    Once I thought I was wrong but I was mistaken.

  • #4
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Use the full doctype, including the url to get IE in standards compliance mode.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    CATdude about IE6: "All your box-model are belong to us"

  • #5
    New to the CF scene
    Join Date
    Aug 2005
    Location
    Halifax, NS, Canada
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Light Weight, Low Tech CSS Tabs <------ the site I got the code from which is based off of A List Apart's Sliding Doors of CSS 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!

    Melissa

  • #6
    New to the CF scene
    Join Date
    Aug 2005
    Location
    Halifax, NS, Canada
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    mrruben5 --

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

    But thanks anyways.

  • #7
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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. 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.
    Once I thought I was wrong but I was mistaken.

  • #8
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah yeah I see now.
    Code:
    #header ul {
    	margin:0;
    	padding:0;
    	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
    Code:
    #global {
    	border:2px solid #fff;
    	border-top:0;
    }
    Last edited by mrruben5; 08-17-2005 at 05:31 PM.
    CATdude about IE6: "All your box-model are belong to us"

  • #9
    New to the CF scene
    Join Date
    Aug 2005
    Location
    Halifax, NS, Canada
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks mrruben5, you're awesome, that fixed it!

  • #10
    New to the CF scene
    Join Date
    Aug 2005
    Location
    Halifax, NS, Canada
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Tristan,

    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •