SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot Dreamweb Designs's Avatar
    Join Date
    Nov 2005
    Location
    Detroit, MI.
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ul/li works fine in FF but not in IE (help)

    Hi,

    *EDIT: Friend of mine told me how to fix it. In the css, you'll see #navcontainer li {list-style: none; } and all I needed to do was add padding: 0; margin: 0; like this: #navcontainer li {list-style: none; padding: 0; margin: 0;}

    I have this theme I'm working on for wordpress and the sidebars are showing properly in Firefox, but in IE, they have a weird padding/margin on the left and they aren't showing right. This also happens with the lists in the footer area as well.

    If you could help me out as to why this is happening, I'd greatly appreciate it.

    Here is the HTML I'm using:
    Code HTML4Strict:
    			<div id="navcontainer">
    <ul>
    <?php wp_list_categories('title_li='); ?>
    </ul>
    			</div>

    and here is the CSS for the list:

    Code CSS:
    #navcontainer {
    float: left;
    width: 180px;
    padding: 0;
    margin-bottom: 5px;
    margin-top: 2px;
    text-align: left;
    background-color: #000;
    clear: both;
    }
     
    #navcontainer ul
    {
    position: normal;
    text-align: left;
    margin-top: 2px;
    padding: 0;
    list-style-type: none;
    font-family: Tahoma;
    font-size: 14px;
    font-weight: normal;
    }
     
    #navcontainer li {list-style: none; }
     
    #navcontainer a
    {
    display: block;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 174px;
    background-color: #252525;
    font-weight: normal;
    color: #898989;
    text-decoration: none;
    }
     
    #navcontainer a:link, #navlist a:visited
    {
    color: #898989;
    text-decoration: none;
    font-weight: normal;
    }
     
    #navcontainer a:hover
    {
    background-color: #363636;
    color: #898989;
    }
    Last edited by Dreamweb Designs; Oct 10, 2007 at 22:47.
    with great sacrifice comes great rewards

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    As you found out yourself you always need to take control of the padding and margins on all the elements you use because the defaults the browser applies will vary between browser.

    This applies to nearly all the elements you use and not just lists

  3. #3
    SitePoint Zealot Dreamweb Designs's Avatar
    Join Date
    Nov 2005
    Location
    Detroit, MI.
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah. I don't know how I let that slip by.

    Do you know if adding margin:0; padding: 0; in the body tag takes care of all elements for each browser? so I won't have to add those codes to each element in my css? or do I need to do it manually?
    with great sacrifice comes great rewards

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Do you know if adding margin:0; padding: 0; in the body tag
    No that just takes care of the body tag

    You can use the universal selector to address all elements like so.

    * {margin:0;padding:0}

    However there are some minor drawbacks due to its effect on form elements.

    There are a lot of reset css styles about so have a google for them.

    Here is probably one of the best.

    http://meyerweb.com/eric/thoughts/20...eset-reloaded/


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
  •