SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I get the padding on my list to look the same cross-browser?

    How can I get the padding on my list to look the same cross-browser? The padding around the text appears different in each browser I have tested in. Below is my code. Please provide an example if possible. Thanks!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    .upcomingEventsTitle {
    font-size: 10px;
    color: #003366;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    }
    #upcomingEvents {
    padding: 0;
    margin: 0;
    }
    #upcomingEvents li {
    font-size: 10px;
    color: #333;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    list-style: none;
    background-color:#e9f0f7;
    margin: 6px;
    padding: 4px;
    }
    #upcomingEvents li#upcomingEventsLast {
    list-style: none;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 78%;
    color: #993333;
    background-color:#fff;
    border-bottom: 0px;
    border-top: 1px solid #dfdfdf;
    margin: 0 6px 0px 6px;
    padding: 0 0 6px 0;
    }
    #upcomingEvents li#upcomingEventsLast a:link {color: #993333; text-decoration: none;}
    #upcomingEvents li#upcomingEventsLast a:visited {color: #993333; text-decoration: none;}
    #upcomingEvents li#upcomingEventsLast a:hover {color: #993333; text-decoration: underline;}
    </style>
    </head>

    <body>
    <ul id="upcomingEvents">
    <li><span class="upcomingEventsTitle">Insert title here...</span><br />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque aliquam malesuada nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</li>
    <li><span class="upcomingEventsTitle">Insert title here...</span><br />
    Integer eget eros a nibh fermentum porta. Maecenas consequat nunc quis nibh. Phasellus pede tortor, consectetuer molestie.</li>
    <li><span class="upcomingEventsTitle">Insert title here...</span><br />
    Nullam bibendum arcu et urna. Nullam interdum, risus at sodales varius, pede ipsum ultricies pede, ac accumsan mauris ipsum ac arcu.</li>
    <li id="upcomingEventsLast"><a href="#">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 3</a></li>
    </ul>
    </body>
    </html>

  2. #2
    SitePoint Zealot
    Join Date
    Apr 2007
    Location
    New London, CT
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My understanding is that a good rule of thumb is to always remove the default padding from all browsers. The easiest way is adding:

    Code CSS:
    * {
         margin: 0;
         padding: 0;
    }

    However this will remove a margin and padding from all elements in your document. That is the quick and easy, yet sloppy and inefficient answer.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I am not sure if you noticed but I actually set the margins and padding to zero in my code above. Might you have any other ideas?

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just tried adjusting the line-height and that appeared to do the trick. Do you see any downfall with this method?

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

    There are a number of issues at play here and you need to address them all.

    The first is collapsing margins. In Firefox (and other good browsers) the margins of vertically adjacent elements will collapse if there is nothing solid in the way such as padding or borders, whereas IE will often not collapse elements especially if the element has "layout" (see faq on haslayout). This can make a considerable difference to the layout.

    Then there are whitespace bugs in IE where it interprets the space in the html as a gap and pushes the lists further apart than they should be. You can usually cure most of the gap by giving the element "layout" but the best way to completely clear the gap is to float your lists and this works every time.

    You have used non semantic html as you have marked up your title with a span and a class. If its a title then it should be a relevant heading tag which would also provide a hook so that no class was necessary. The text under the title should be in a paragraph tag because that's what it is.

    Adding all those things together we end up with code like this that is more or less pixel perfect in Firefox, IE, and Opera and Safari(Win).

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    
    #upcomingEvents li h3{
    font-size: 10px;
    color: #003366;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin:0;
    padding:0 4px;
    }
    #upcomingEvents {
    padding: 0 6px;
    margin: 0;
    list-style: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    }
    #upcomingEvents li {
    color: #333;
    background-color:#e9f0f7;
    margin: 6px 0 0 0;
    padding: 4px 0;
    }
    #upcomingEvents li p{margin:0;padding:0 4px}
    #upcomingEvents li {float:left;width:100&#37;;clear:left}
    
    #upcomingEvents li#upcomingEventsLast {
    text-align: center;
    color: #993333;
    background-color:#fff;
    border-bottom: 0px;
    border-top: 1px solid #dfdfdf;
    padding: 0 0 6px 0;
    }
    #upcomingEvents li#upcomingEventsLast a:link {color: #993333; text-decoration: none;}
    #upcomingEvents li#upcomingEventsLast a:visited {color: #993333; text-decoration: none;}
    #upcomingEvents li#upcomingEventsLast a:hover {color: #993333; text-decoration: underline;}
    </style>
    </head>
    <body>
    <ul id="upcomingEvents">
        <li>
            <h3>Insert title here...</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque aliquam malesuada nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
        </li>
        <li>
            <h3>Insert title here...</h3>
            <p>Integer eget eros a nibh fermentum porta. Maecenas consequat nunc quis nibh. Phasellus pede tortor, consectetuer molestie.</p>
        </li>
        <li>
            <h3>Insert title here...</h3>
            <p>Nullam bibendum arcu et urna. Nullam interdum, risus at sodales varius, pede ipsum ultricies pede, ac accumsan mauris ipsum ac arcu.</p>
        </li>
        <li id="upcomingEventsLast"><a href="#">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 3</a></li>
    </ul>
    </body>
    </html>
    Hope that helps

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thank you so much for your detailed example. As always, your feedback is greatly appreciated and most helful!


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
  •