SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    essex, england
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Applying border to ul leaves bullets outside of border in IE

    I would like to style the ul element with a border and a background colour.

    Trouble is that in IE it puts the list bullets (li) outside of the border and the background.

    Does anyone know how to make the border extend round the li within the ul in IE?

  2. #2
    SitePoint Member
    Join Date
    Sep 2006
    Location
    Calarasi, Romania
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    v-wdd.net/blog/

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    ul li {
      list-style-position:inside;
    }
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    essex, england
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Great, thank you, but that makes another problem!

    I would like the box to extend to the left edge of it's parent container.

    As you can see below it extends to the right but is indented on the left.
    Do you know how i can do this?




    Thanks for your help thus far. I really appreciate it.

  5. #5
    SitePoint Zealot
    Join Date
    May 2005
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I find that in cases like these you are better off with a background position than a bullet as CSS control over bullets is very poor accross browses. Make your bullet into a background image for your li's then position it exactly where you want with background-position.

  6. #6
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    essex, england
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ahh okay

    Does that effect the size and position of the UL background box?

  7. #7
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    essex, england
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What i did is

    What i did is simply put

    Code:
    margin-left:0px;
    That made the box extend properly.

    I find that with css, more and more i have to define everything on an element for IE.

    I'm quite impressed that when they coded the css handling for IE they decided to give loads of elements a default value of something other than 0. I wonder what went through their heads.

    "hmm, everyone will want a 3px gap between divs if they float them to the same side wont they. Course they will, course they will"

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,855
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    I find that with css, more and more i have to define everything on an element for IE.
    The default left margin for a ul in IE is about 16px and this is the space it allows to display the bullets. Other browers use a similar method but you will find that some browsers (such as mozilla) will apply a default 16px left padding instead.

    Therefore setting margin-left to zero will do nothing for mozilla as it will still have its default left padding.

    You need to control both padding and margins on all elements for all browers to be the same.

    Mozilla applies a top and bottom margin of about 1 em to nearly all elements while ie only applies a bottom margin.

    You can set all margins and padding to zero (* {margin:0;padding:0}) or just set them as you go. (Setting all to zero does affect inputs in mozilla and stops them from getting the depressed effect when pushed. Not a major problem but some people don't like it. Also if you set all to zero then you must add some margin when you want bullets to show in lists.)

  9. #9
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    essex, england
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    well

    I do want the li to be indented. So my left-margin:0; actually did nothing to firefox.

    Only trouble is that in IE the li is not indented anymore. Something i suppose i will have to live with.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,855
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    I do want the li to be indented. So my left-margin:0; actually did nothing to firefox.
    I thought I just explained all this in detail

    Firefox has no default left margin so setting margin-left:0 makes no difference.

    Firefox has a default 16px left padding and you would need to set that to zero to be the same as IE. Alternatively add 16pxx left padding to ie (with marign-left:0 otherwise there will be 32px space to the left) and it will be the same as firefox.

    I don't think I can make it any clearer

  11. #11
    SitePoint Zealot
    Join Date
    Nov 2004
    Location
    essex, england
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I think someone must have interupted me reading your post

    Umm, yes quite.

    I must have drifted off into space for a while. You had explained that perfectly. I just err, looked at the pretty words you wrote and didn't bother asking brain to explain what they meant.

    Amazing how many times a day that happens to me.....

    Thanks for the advice and thanks for not firing off a long long list of expletives at my reply. I think i need a lie down..away from the keyboard....


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
  •