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 5 of 5
  1. #1
    Regular Coder Tyree's Avatar
    Join Date
    Sep 2003
    Posts
    254
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Background image for lists in multiple browsers

    I'm having a speck of difficulty getting Netscape and Firefox to display bullets in a list the same way as Internet Explorer shows them. Can anyone give me some pointers?

    Here's the code for it:
    Code:
    styles:
    ul.firm
    {
    list-style-type: none;
    padding: 0;
    margin: 0;
    }
    li.firm
    {
    background-image: url(/images/arrow.gif);
    background-repeat: no-repeat;
    background-position: 0 .7em;
    padding-left: 1.0em;
    }
    
    display code:
    <span class="smalltext">
    <ul class="firm">
    <li class="firm">Project Management
    <li class="firm">Design Concept Development
    <li class="firm">Local Administration and Review Board Approvals
    <li class="firm">Construction Administration
    <li class="firm">Tax Credit Applications for Adaptive Use Projects
    </ul>
    </span>
    And here's the page on the web:
    http://www.craddockcunningham.com/pe...loyee.php?ID=6
    If you look at it in several different browsers, you can see that the bullets do vastly different things.

    Thanks!!!
    Matt Tyree

  • #2
    Regular Coder Pepe, the bull's Avatar
    Join Date
    Feb 2005
    Location
    Vancouver, WA
    Posts
    163
    Thanks
    1
    Thanked 16 Times in 16 Posts
    They look the same to me. Just like normal bullets. I looked in IE6 and FF.
    Pepe, the bull

  • #3
    Regular Coder Tyree's Avatar
    Join Date
    Sep 2003
    Posts
    254
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, I guess Opera shows the most difference. However, Ie shows the bullet pretty much dead center vertically on each line. In Netscape and Firefox the bullet is near the bottom of the line. In Opera it's even being chopped because it's so low.

    The difference between IE and FF is subtle, but it's there.

  • #4
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just one question, why dou you give all elements classes? Don't you know how cascades work?
    Code:
    ul.firm
    {
    list-style-type: none;
    padding: 0;
    margin: 0;
    }
    ul.firm li
    {
    background-image: url(/images/arrow.gif);
    background-repeat: no-repeat;
    background-position: 0 .7em;
    padding-left: 1.0em;
    }
    
    display code:
    <span class="smalltext">
    <ul class="firm">
    <li>Project Management
    <li>Design Concept Development
    <li>Local Administration and Review Board Approvals
    <li>Construction Administration
    <li>Tax Credit Applications for Adaptive Use Projects
    </ul>
    </span>
    It may also be the smalltext class wich cause problems.
    CATdude about IE6: "All your box-model are belong to us"

  • #5
    Regular Coder Tyree's Avatar
    Join Date
    Sep 2003
    Posts
    254
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Heh heh...I do crazy things because I am just learning CSS! That's why I'm asking questions. I don't know it all yet!

    Here's what my code looks like now after some tips:
    Code:
    .smalltext {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    line-height: 1.4em;
    font-style: normal;
    text-decoration: none;
    }
    
    ul.firm
    {
    list-style-type: none;
    padding: 0;
    margin: 0;
    }
    
    .firm li
    {
    background: url(/images/arrow.gif) no-repeat 0 0.5em;
    padding-left: 1.0em;
    }
    
    
    <ul class="firm smalltext">
    <li>Project Management
    <li>Design Concept Development
    <li>Local Administration and Review Board Approvals
    <li>Construction Administration
    <li>Tax Credit Applications for Adaptive Use Projects
    </ul>
    Does that look better? Is that a pretty clean way of doing it?

    The bullets are still SLIGHTLY off between the browsers. Not as bad as before though.

    Thanks!


  •  

    Posting Permissions

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