Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Aug 2006
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lists/Bullets appear different in FF vs. IE

    I made a menu using list styles which shows up perfectly in FF, but badly in IE.

    There are problems with the borders and with the bullet images, which you can see in this jpeg here:

    http://www.xsystem.gr/stylebytes/IE.jpg

    i want it to look more like this:

    http://www.xsystem.gr/stylebytes/mozilla.jpg

    maybe someone can give me some advice?


    this is the CSS:

    #sectionlinks {
    background-image: url(images/menu_img.jpg);
    background-repeat: no-repeat;
    background-position: right top;
    height: 315px;
    width: 196px;
    float: left;
    margin: 0px;
    padding: 0px;
    font-size: 105%;
    padding-top: 10px;
    }

    #sectionlinks a {
    display: block;
    padding: 0px 0px 0px 0px;
    color: #17253E;
    text-decoration: none;
    }

    #sectionlinks a:hover{
    background-color: #E5E3E0;
    font-weight: bold;
    }

    #sectionlinks a:active{
    font-weight: bold;
    }

    #sectionlinks ul a:link{
    display: block;
    list-style-position: inside;
    }

    #sectionlinks ul {
    margin: 0;
    padding: 0;
    text-align: left;
    margin-left: 21px;
    list-style-image: url(images/bullet_link.jpg);
    line-height: 150%;
    }

    #sectionlinks ul ul {
    line-height: 150%;
    list-style-image: url(images/bullet_link2.jpg);
    }

    #sectionlinks ul ul ul{
    line-height: 120%;
    list-style-image: url(images/bullet_link3.jpg);
    }

    #sectionlinks li {
    border-bottom-width: 1px;
    border-bottom-color: #DDDDDB;
    border-bottom-style: solid;
    }

    #sectionlinks li li {
    border-bottom-width: 1px;
    border-bottom-color: #DDDDDB;
    border-bottom-style: solid;
    }

    #sectionlinks li li li{
    border-bottom-width: 1px;
    border-bottom-color: #DDDDDB;
    border-bottom-style: solid;
    }

    #subnav a:link {
    color: #3F64A0;
    text-decoration: none;
    }

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lists, image bullets

    Default list styling is implemented slightly differently by the various browsers; to overcome this, it's adviced to explicitly set both margin and padding values for lists and list items to make sure the styling is consistent across browsers.

    For the disappearing borders you could try out a small top and bottom margin for the list items; the line height may need adjusting as well.

    If you use background images on the list items for bullets, rather then image style bullets, you'll have more control over placement and alignment. You can read more about this in the Listutorial, tutorial 1.
    Regards,
    Ronald.
    ronaldvanderwijden.com


  •  

    Posting Permissions

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