SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bullet Points not displaying in IE

    Hi All,

    I've changed the standard bullet points with a custom picture for an unordered list, which works perfectly in firefox, but does not display at all in I.E. The code in question is below:

    table.moduletablerelated ul{
    list-style-type: none;
    padding-left: 1em;
    margin: 0;

    }

    table.moduletablerelated ul li {

    background-image: url(../images/white_arrow.gif);
    background-repeat: no-repeat;
    padding-left: 1.25em;
    line-height: 140%;

    }

    Any help would be much appreciated. Many thanks, Pete.

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

    The problem must lie in what you are not showing us as the code above works in ie6 and firefox straight out of the box. I just copied the code and used local image and it works fine.

    Do you have a link?

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML code

    Hi Paul,

    Unfortunately the site is not hosted at present, but I have pasted the html code below, which may help!

    <table cellpadding="0" cellspacing="0" class="moduletablerelated">
    <tr>
    <th valign="top">Related Articles</th>
    </tr>
    <tr>
    <td>
    <ul>
    <li><a href="index.php?option=com_content&task=view&id=23&Itemid=32">Can users edit content from the front end?</a></li>
    </ul>
    </td>
    </tr>
    </table>

    If you hover over them, the bullets do appear, apart from the first bullet in the list. Thanks again for your help. Pete

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you post the full HTML and CSS code?

    Also, you need to replace & with &amp; in links so they do not appear as data. The links will work the same, but will be parsed properly if you do this.

    Furthermore, different browsers use different means to indent lists so the bullets can appear normally. Some use margins, others use padding. Setting both to 0 to start is usually a good way to begin, that way you can use whichever one you want to control the position cross-browser.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    If you hover over them, the bullets do appear, apart from the first bullet in the list
    What you need to do to help us help you is to make a small working demo of the problem and then post the code (css and xhtml). The problem could be somewhere else or over-ridden by other styles that we can't see.

  6. #6
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sometimes IE screws up background positoning if you do not state it...

    Try adding background-position: top left;

    Of course, being that you didn't state it... it SHOULD be defaulting to center center - meaning the arrow should be appearing BEHIND your link text (well, offset left slightly due to the padding)

    Also, given that 'center' is not 'center' on all browsers with backgrounds, and you are declaring the heights in EM and %, you are going to have a stone cold *** of a time getting that image centered consistantly cross-browser.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by deathshadow
    Of course, being that you didn't state it... it SHOULD be defaulting to center center
    I think you'll find that the initial value is 0 0 which is left top

  8. #8
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    I think you'll find that the initial value is 0 0 which is left top
    You'd think so - but not in IE 'all the time', especially on inline elements... which is why I ALWAYS state it...

    That and if you use positioning on elements (even parent elements), the background can just 'dissapear' to god knows where...

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    You'd think so - but not in IE 'all the time', especially on inline elements.
    I think you are confusing that with another problem

    The default position for background images is always left top (0 0). Inline element do not have height and width and therefore a background image will only appear where there is room for it to appear which may be the problems you experienced .

    That and if you use positioning on elements (even parent elements), the background can just 'dissapear' to god knows where..
    Again this has nothing to do with the image position and is purely IE being stupid. The problem is usually related to "haslayout" but not limited to it and problems also occur if absolute elements come before static content in the same content and IE again gets confused. The issue can even be further back up the tree where a parent element doesn't have "layout".

    Setting left top for the background image in any of the above cases makes no difference as they are already left top and stating it will make no difference. If you can show me an example of what you mean then i will either admit you are right or show you where you are wrong

    If I am to be contradicted on specifics then I would like examples as I don't want to pass on incorrect information

  10. #10
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just tried styling an anchor thus:

    Code:
    a {
    	display:block;
    	width:240px;
    	text-align:right;
    	padding-left:16px;
    	background:url(test.png) no-repeat;
    }
    and was unable to recreate the problems I've had in the past... Couldn't figure it out as that's usually enough to break IE6... Then it occurred to me - the last time I actually HAD this problem was before I switched to doing everything as XHTML 1.0... (strict or otherwise). Delete the doctype and suddenly the image dissapears in IE... DOH

    Ok, so my bad, if you are using a proper doctype in XHTML, IE will position backgrounds consistantly - it's only when you aren't in XHTML that it becomes an issue... probably related to IE's 'quirks mode'

    Good to know - programming habits 'left over' from pre-XHTML that aren't necessary once you switch. Again, my bad.

  11. #11
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi All,

    I think it has something to do with the Mambo CMS, so i have posted on their forum. But thanks for all your advice and tips. Much appreciated. Pete

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by deathshadow
    probably related to IE's 'quirks mode'
    It wouldn't surprise me so I'll say you were half right then

    Quote Originally Posted by matthewspp
    But thanks for all your advice and tips.
    If you don't get it solved then post back with a bit more info and we'll have another look


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
  •