Grow your CSS skills. Land your dream job.

IE bug: text-indent on first line of a list item?HELP PLEASE

  • luk
    # July 7, 2009 at 12:20 pm

    Hi everybody,

    I’m working on a site right now and I have some really strange issue (I think it’s css, and that’s the reason I ask here…), the particular site is: http://dev.matconsulting.ch/change.php

    It’s obviously a developement page and far from perfect =) but the problem I have occurs only in all IE versions, not in Firefox or Chrome (I just have IE version 7, but checked it with netrenderer in other versions 6 & 8 and there’s the same problem, k in IE 6 there are many more =D).

    The list items have something like a text-indent on the first line, the other lines are ok, it’s only the first. I searched in various forums and also googled for it but I found no solution (or I searched for the wrong terms^^), so I thought I’ll ask here, maybe somebody had this problem already and knows how to fix it…

    Thank you very much for your time!

    Here is some of the target code:

    First the html part:

    Code:

    • Some text
    • Some text
    • Some text
    • Some text
    • Some text

    ^^, don’t know what that inline css on the p tag is doing there…have to fix this =)…

    And the CSS:

    Code:
    div#speech {
    margin: -18px 0px 0px 0px;
    background: #F0F0F0;
    width: 225px;
    /* border-top: 1px solid #363636; */
    }
    #speech .padding {
    padding: 0px 1px 1px 1px;
    line-height: 1.7em;
    }

    p.speech-text {
    padding: 0px 10px 0px 10px;
    margin-top: 15px;
    }

    ul.speech-list {
    list-style: none;
    padding: 0px 20px 0px 8px;
    text-align: justify;
    }
    ul.speech-list li {
    background: url(../images/layout/bullet.gif) no-repeat 0px 12px;
    padding: 5px 2px 0px 15px;
    margin: 0px;
    }

    # July 7, 2009 at 1:17 pm

    Try adding this to the css for ul.speech-list

    Code:
    list-style-position:inside;

    EDIT
    Don’t wrap your ul’s in <p> tags. You have also used <div id="speech"> twice, you can only use an id once per page so change it to a class.

    luk
    # July 7, 2009 at 2:42 pm

    Thanks for the advice, the <p>-tags are anyway strange, don’t know what they’re there for^^…

    I have a problem to understand what you mean with two ids of "speech", can’t find them in the html code, I see only a class of "speech-border", a class with "speech-title-gray", one id of "speech" and another class of "speech-title" but no double ids, it’s also valid xhtml strict, wouldn’t the validator show double id’s?

    Or do you mean the CSS here?

    Code:
    div#speech {
    margin: -18px 0px 0px 0px;
    background: #F0F0F0;
    width: 225px;
    /* border-top: 1px solid #363636; */
    }
    #speech .padding {
    padding: 0px 1px 1px 1px;
    line-height: 1.7em;
    }

    I thought I can select elements in css in several ways, 1) always give the whole html structure like in extreme

    Code:
    /* means an element with id of “speech” in a div in html in body */
    html body div #speech { somevalue: 10px; }

    or

    Code:
    /* a “milder” version; take all elements with an id of “speech” in a div */
    div #speech { somevalue: 10px; }

    or just with the id (because it’s uniqe on the page)

    Code:
    #speech { somevalue: 10px; }

    so the real css above would mean: give the div with id "speech" some values like with or margin and give the div with class "padding" within a div with id of "speech" some padding as value, the problem stays, I see no double ids…maybe I’m just blind =)? So I’ll try to remove the p tags and add you css this evening! Thx again

    EDIT: Just tried it, but it did not the trick…I removed the p tags in the code and added the list-style-position: inside; to the ul .speech-list css, had to make also some margin and padding adjustments because of the removed p-tag, here’s how it looks right now…but IE just doesn’t (bah, I let that out, I’m tired of this shitty peace of software =D)…

    The HTML:

    Code:

    Header-Bereich

    • Some content
    • Some content
    • Some content
    • Some content
    • Some content
    • Some content

    And the CSS:

    Code:
    div.speech {
    margin: -7px 0px 0px 0px;
    background: #F0F0F0;
    width: 225px;
    /* border-top: 1px solid #363636; */
    }
    .speech.padding {
    padding: 0px 1px 15px 1px;
    line-height: 1.7em;
    }

    p.speech-text {
    padding: 0px 10px 0px 10px;
    margin-top: 15px;
    }

    ul.speech-list {
    list-style: none;
    list-style-position: inside;
    padding: 0px 20px 0px 8px;
    text-align: justify;
    }
    ul.speech-list li {
    background: url(../images/layout/bullet.gif) no-repeat 0px 12px;
    padding: 5px 2px 0px 15px;
    margin: 0px;
    }

    any ideas? Thx in advance!

    # July 7, 2009 at 2:53 pm

    The validator does show the double id http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fdev.matconsulting.ch%2Fchange.php that’s how I noticed it.
    They are in the main content and both look like this:

    Code:
    luk
    # July 7, 2009 at 3:02 pm

    Uuuuh, what a stupid am I =)…thx for enlighten me!

    EDIT: Fixed this now, it was even three times the same id, just for every speech-thing in there^^, but it changed not the problem in IE =/

    Don’t know if it helps, but I’ve an IE fixes stylesheet, here the relevant css, but I see nothing in there that would affect this strange text-indent…

    Code:
    div.speech {
    margin: 0px 0px 0px 0px !important;
    }
    ul.speech-list { list-style-position: inside !important;
    }

    lol, now I’ve lost some padding around the content section in IE and another padding problem in the other browsers, but this time inside the ul…have to fix this =D

    And I’ve also seen that I had in the browser reset already ul, ol { list-style: none inside; } –> wouldn’t that do the list-style-position: inside; already?

    # July 7, 2009 at 3:55 pm

    The first time I looked there was a rule overriding the reset and setting the list-style-position to outside.
    It may be a long shot but how about this:

    Code:
    ul {
    margin-left: 0;
    }

    If that doesn’t work then try it on the li

    luk
    # July 7, 2009 at 3:59 pm

    GOT IT! Lol, web-coding is sometimes so damn crazy^^, I wrote about the browser-reset above, I just had the idea to change it to the other value (just to see what happens =D) allowed, means "outside", and see, it works in IE and has no effect on FF or Chrome…can’t really explain it but it worked, maybe somebody has a more indepth knowledge of css and can tell why this happend?

    It’s maybe important, that I wanted a custom list-style item –> the red square, thus I set list-style: none; and added a background image to the li elements, a bit a strange way isn’t it?? I read on selfhtml that there is an attribute list-style-image: url();, maybe a more elegant way? Would it be or not, what do the pro’s mean? EDIT: Tried it and it didn’t work for me because I don’t know how to control the distance of the red square to the first line of text when I use list-style: none outside url(); – with the background image this is possible…

    I also noticed another IE problem with the navigation in the right sidebar, in IE there is some kind of jumping on rollover, it seems to add something like padding or margin to the list items on rollover and this results in a jumpy behaviour…anybody knows a solution?

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".