SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Nov 2003
    Location
    Maryland
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS rollover list problem

    I'd be truly grateful if someone could help me with this. The web page in question is http://www.planet-roz.com/Intranet/PA.html.

    I am testing it in IE 6 and Mozilla. I got the code from here: http://css.maxdesign.com.au/listutorial/roll10.htm. Can someone tell me why 1) in IE6 both the hover and the link background do not extend to the edge of the td cell background behind it? and 2) why in Mozilla they display correctly, but for some reason the margin and padding properties display erractically?

    The CSS is at http://www.planet-roz.com/Intranet/commstylesheet.css. Thanks.

    Tormeadgirl

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think the IE6 problem can be solved by using a full doctype so that you aren't working in quirks mode.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    I think the mozilla problem is related to the use of ems for your padding. (As you have fixed the text then there seems little point in providing ems for the padding as the text will not be resized by the browser anyway.)

    What I am saying is I can't work out why the space between the list items is different other than specifying in px seems to cure the problem
    e.g.
    Code:
    #navcontainer li { margin: 0 0 1px 0;} 
    #navcontainer a
    { 
     display: block;
     color: #fff;
     background-color: #5C6F90;
     width: 11em;
     padding: 2px .8em;
     text-decoration: none;
    }
    I also note that in some of your other style you have missed the unit off the style.
    e.g.
    Code:
    h2 {
     font: bold 17px Arial, Helvetica, sans-serif; 
     color: #003366; 
     margin: 20 0 10 0;
     }
    Ie will guess you mean pixels but mozilla will assume zero. You must therefore specify a unit.

    Hope that helps.
    Paul

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2003
    Location
    Houghton, Michigan
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All I can think of for the erratically displaying things is maybe the link is overflowing the list items on some of them. There is something for this, like overflow: hidden or something like that, dont remember what it is.

    EDIT: Yeah, overflow: hidden. But looking at the post above this one, and thinking for a bit, I dont think its the overflow. I need another cup of coffee...

  4. #4
    SitePoint Member
    Join Date
    Nov 2003
    Location
    Maryland
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    I think the IE6 problem can be solved by using a full doctype so that you aren't working in quirks mode.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    I think the mozilla problem is related to the use of ems for your padding. (As you have fixed the text then there seems little point in providing ems for the padding as the text will not be resized by the browser anyway.)

    What I am saying is I can't work out why the space between the list items is different other than specifying in px seems to cure the problem
    e.g.
    Code:
    #navcontainer li { margin: 0 0 1px 0;} 
    #navcontainer a
    { 
     display: block;
     color: #fff;
     background-color: #5C6F90;
     width: 11em;
     padding: 2px .8em;
     text-decoration: none;
    }
    I also note that in some of your other style you have missed the unit off the style.
    e.g.
    Code:
    h2 {
     font: bold 17px Arial, Helvetica, sans-serif; 
     color: #003366; 
     margin: 20 0 10 0;
     }
    Ie will guess you mean pixels but mozilla will assume zero. You must therefore specify a unit.

    Hope that helps.
    Paul

    Cheers Paul. Your advice worked. I haven't posted it online yet, but it works on my local drive. I also submitted my problem to another forum help site, and I got a slightly different solution to yours, but it also works.

    This took care of the problem.

    #navcontainer li { margin: 0 0 1px 0; }

    #navcontainer a
    {
    display: block;
    color: #FFF;
    background-color: #036;
    width: 153px;
    padding: 2px 5px;
    text-decoration: none;
    }


    I've obviously just bumbling through CSS. I'm often too impatient to sit down and figure stuff out. Thanks for your help. Now I have to make each menu item the same height.

    thanks again.


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
  •