SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: Qu

  1. #1
    SEO Link Building Master I, Brian's Avatar
    Join Date
    Apr 2003
    Posts
    1,284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Qu

    I'm still new to CSS, and trying to mix a couple of styles from different sites.

    For a new navigation menu for one of my (always non-commerical) sites, I'm using the attribute:

    Width: 100%;

    In IE, it makes the whole cell highlight - but in Mozilla Firebird it only highlights aross the text - leaving the right-hand side of the cell unaffected by hover colour changes.

    It's hard to explain and my nav is not up - but if you check the following site, the left hand nav works on a similar principle - highlighting a left link in IE 6 and Firebird will show different:

    http://www.ofpec.com/missions/view_type.php?type=1

    Question is, is this a problem with the CSS or Firebird?

    Any help much appreciated.
    Internet Business Forums - free business help & advice

  2. #2
    SitePoint Addict
    Join Date
    Sep 2003
    Location
    Europe
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whenever there is a difference between IE and a Mozilla-based browser (such as Firebird), you can safely assume that Mozilla gets it right and IE is wrong.

    For what you want you probably need to add a display:block to the a or li element in your css.

  3. #3
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    width on an inline element (like <a>) is meaningless. From theCSS2 spec:
    'width'
    [...]
    This property specifies the content width of boxes generated by block-level and replaced elements.

    This property does not apply to non-replaced inline-level elements.
    As yngwin said, you should apply "display:block;" to the <a> elements

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    What they've already said above
    Code:
    a.leftlink{display:block}
    Paul

  5. #5
    SEO Link Building Master I, Brian's Avatar
    Join Date
    Apr 2003
    Posts
    1,284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies - I'm not quite sure what "display block" means, though.

    Do you mea
    Code:
    A.leftLink:hover {
    BORDER-RIGHT: #999999 1px solid; etc
    }
    
    is the "display:block" or is "display:block" an actualy command?

    Feel free to link to anything you useful - technical langage always goes over my head - I'm very much a trial and error person.
    Internet Business Forums - free business help & advice

  6. #6
    SitePoint Addict
    Join Date
    Sep 2003
    Location
    Europe
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes something like
    Code:
    a.leftlink {
       display:block;
       width:100%;
       color:#00c;
       }
    a.leftlink:hover {
       background:#ccc;
       border: 1px solid #999;
       }

  7. #7
    SEO Link Building Master I, Brian's Avatar
    Join Date
    Apr 2003
    Posts
    1,284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the help. I'm still having serious problems, though, so I'll get my files uploaded and start a new thread to try and work out what little thing in the code I've messed up on.
    Internet Business Forums - free business help & advice

  8. #8
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Display block in CSS displays the styled contents much like an XHTML Block level element for example; <p>, <div> or <h1> essentially most block level elements leave vertical white space below themselves.


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
  •