SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Lists and padding in IE

    Hi all,
    ok ive had a quick look at CSS faq,, nothing on lists there.

    Personally, everytime i try to do a list i get a headache SOB

    Could anyone explain to me why in IE 6 the padding-left on UL looks different?

    HTML code:::::

    <div id="onlineservices">Online Services
    <ul>
    <li>one</li>
    <li>one</li>
    <li>one</li>
    <ul>
    </div>

    CSS::

    #onlineservices {
    height: 210px;
    padding-top: 5px;
    padding-left: 5px;
    font-family:Arial, Helvetica, sans-serif;
    color:#29384E;
    font-size:11px;
    background-color:#8FA5C2;
    margin-bottom: 4px;
    }
    #onlineservices a {
    color:#29384E;
    }
    #onlineservices ul {
    margin: 0;
    list-style: none;
    padding-left: 15px;/*dont work in IE */
    list-style-image: url(../images/icon_arrow_grey.gif);
    }
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    List style image is currently very inconsistent across browsers so it's much better in most situations to use a background-image...

    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" xml:lang="en" lang="en">
    <head><title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    body {
    	font-size: 100&#37;;
    	font-family: arial, helvetica, sans-serif;
    	color: #29384E;	
    }
    #onlineservices {
    	height: 210px;
    	padding: 5px 0 0 5px;
    	font-size: 0.7em;
    	background-color: #8FA5C2;
    	margin-bottom: 4px;
    }
    #onlineservices a {
    	color: #29384E;
    }
    #onlineservices li {
    	margin: 0;
    	list-style: none;
    	padding-left: 15px;
    	background-image: url(../images/icon_arrow_grey.gif);
    	background-repeat: no-repeat;
    }
    </style>
    </head>
    <body>
    <div id="onlineservices">Online Services
    	<ul>
    	<li>one</li>
    	<li>one</li>
    	<li>one</li>
    	<ul>
    </div>
    </body>
    </html>
    You can also use background-position along with this to push it into position if required but I can't see what your image looks like so this is just a best guess

    Hope that helps.

  3. #3
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok so do use background-image instead of list-style-image which you still have in your code?

    just dont want to confuse me & the others reading this!

    dee
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  4. #4
    SitePoint Evangelist escapedf's Avatar
    Join Date
    May 2002
    Location
    Cape Town
    Posts
    458
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh,, and wouldnt i put this on the li then?

    background-image: url(../images/icon_arrow_grey.gif);

    Its on the UL - and therefore theres only 1 image there! ;-)?
    "have the courage to follow your heart and intuition. They somehow already know what you truly want to become"

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, you're correct with both assumptions and I've changed my code above to reflect this

    (Sorry for the confusion, I left both the solution and yours in whilst working on the correct method and removed the solution by mistake before posting )

    And yes, I always use background-image instead of list-style-image as it's much more consistent for styling cross browser.

    Hope that clear's things up


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
  •