SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: CSS Tab Issue

  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Tab Issue

    Hi,

    I had a problem with pages that had a lot of tabs wrapping to the next line. This problem was fixed, but while the tabs don't wrap, all the other CSS formatting stops where the screen would normally end.

    http://www.lib.uwo.ca:777/programs/philosophy

    You'll notice if you view this page in 1024x768 resolution, the tabs stay on the same line (which is good), but the grey bar below the tabs, the header image and the footer all stop pre-maturely.

    Any ideas on how to fix this? Most pages won't have this many tabs, but I want to make it look right for the odd publisher who needs to have more.

    Rob

  2. #2
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The line that stops is the bottom border for:

    ul .anchors tabs secondary

    It stops because it is currently determined by the size of:

    div #tabs-subjects-programs0-8 .fragment

    This is currently set to 741px. If you increase that, the line will lengthen.

    You could try to increase the size of the above element OR try to add
    a z-index to the first element I mentioned and give it a value of 20 or something.

    z-index:20;

    That 'might' work.

    To aid in your design work, get Firefox and download Web Developer.
    Now right click on a web page and nav to
    web developer--->information--->display element information
    OR press ctrl+shift+f

    This is absolutely invaluable to troubleshooting stuff like this.

    Hope that helps.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2005
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No luck.

    I don't actually specify the width of ul.secondary anywhere. It just defaults to 100%. The width always remained at 100% of the viewable screen (i.e. what's viewable without horizontal scrolling).

    I tried the following, based on a similar piece of code I was recommended to use in order to get the tabs to stop wrapping:

    Code:
    ul.secondary { display:inline; }
    That solved the problem more or less for IE and FF but caused some odd issues in Opera and Safari, even when there were only a few tabs. The bottom border was too long in Opera and not far enough below the tabs in Safari.

  4. #4
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Only other thing I can think of doing is defining ul.secondary yourself. It's currently defaulted until you change it yourself.

    I have just tried it on my server and it works.


Bookmarks

Posting Permissions

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