SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast Mikeymoo's Avatar
    Join Date
    Jul 2003
    Location
    St. Albans, Uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    List Style problem

    Hi all,

    I have been re-formatting one of my sites as a lesson and have come across a problem with Mozilla (I think) and my css. Using <ul> to create my navigation, I have found that Mozilla still leaves space of the bullet, even though I have used the
    Code:
    list-style: none;
    - the footer also seems to change.

    Page:- http://www.webdsign.co.uk/ror/test2.htm
    CSS:- http://www.webdsign.co.uk/ror/test2.css

    This is just for teaching purposes, so no urgency.
    Thanks,
    Mikel
    Good decisions come from experience.
    Experience comes from making bad decisions.

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

    Mozilla uses padding for its default margins and space for its bullets etc.

    Therefore you need to explicitly set both.

    e.g.
    Code:
    ul#mainnav {
     list-style: none;
     background-color: transparent;
     margin-left: 10px;padding:0
     }
    Paul

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    To get rid of the vertical scrollbar in mozilla just take care of the padding on your footer paragraphs.
    Code:
    #footer p {margin-top:0}
    Is that the problem you were talking about?

    Paul

  4. #4
    SitePoint Enthusiast Mikeymoo's Avatar
    Join Date
    Jul 2003
    Location
    St. Albans, Uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul.

    The padding in the navigation works well.

    The footer is an odd one. I've put 5px of top-padding in the footer, to move the <p> away from the top. But in IE6 it looks like 5px of padding - in Mozilla (Firefox) is looks like 10px!

    I've also noticed that Mozilla highlights the navigation links that are 'blocks'.

    Thanks for the comment in the other link too - I'm learning
    Mikel
    Good decisions come from experience.
    Experience comes from making bad decisions.

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

    The 10px padding on the p is made up of 5px margin as mentioned in my other post . Mozilla has different default margins for most elements so they need to be explicitly controlled to even everything up.

    I've also noticed that Mozilla highlights the navigation links that are 'blocks'
    I'm not quite sure what you meant there but I noticed that you've omitted the border color from your outset border.

    Code:
     ul#mainnav li {
     background-color: #B0C4DE;
     display: block;
     border:2px outset red;
     font-family: Verdana, Helvetica, sans-serif;
     font-size: 11px;
     text-align: center;
     margin: 3px 10px 3px 0px;
     padding: 2px;
     }
    (Mozilla and ie aren't consistent with their inset and outset colours anyway )

    Paul

  6. #6
    SitePoint Enthusiast Mikeymoo's Avatar
    Join Date
    Jul 2003
    Location
    St. Albans, Uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yup is was the outset colour. It was missing and so each were doing a best fit.

    Thanks.
    Mikel
    Good decisions come from experience.
    Experience comes from making bad decisions.


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
  •