List item bullets

Discussion in 'HTML' started by Paul Lautman, Dec 28, 2006.

  1. Paul Lautman

    Paul Lautman Guest

    When viewed in IE6 or Firefox, the list beginning "Unsurpassed design and
    manufacturing quality." on the page http://www.osg-uk.com has blue arrows as
    bullets.

    However, in IE7, the arrows are hidden under the image to the left of it. I
    have tried various ways to rectify this but if I get it looking OK in IE7,
    it looks rubbish in FF.

    Can someone point me to the correct magic incantation?

    TIA
     
    Paul Lautman, Dec 28, 2006
    #1
    1. Advertising

  2. Paul Lautman

    Martin Clark Guest

    Paul Lautman wrote...
    >When viewed in IE6 or Firefox, the list beginning "Unsurpassed design and
    >manufacturing quality." on the page http://www.osg-uk.com has blue arrows as
    >bullets.
    >
    >However, in IE7, the arrows are hidden under the image to the left of it. I
    >have tried various ways to rectify this but if I get it looking OK in IE7,
    >it looks rubbish in FF.
    >
    >Can someone point me to the correct magic incantation?
    >

    Have a read of http://meyerweb.com/eric/css/list-indent.html

    Having a quick read through, it looks as if you will need to set left-
    margin and left-padding for ul to something other than 0.

    I am not an html guru but, as I understand it, Firefox, etc includes the
    bullet in the space for the list item whereas IE places it outside. You
    have set the list to have no indentation, so in IE, your bullets appear
    to the left of the text block, i.e. beneath the image.
    --
    Martin Clark
     
    Martin Clark, Dec 28, 2006
    #2
    1. Advertising

  3. Paul Lautman

    Paul Lautman Guest

    Martin Clark wrote:
    > Paul Lautman wrote...
    >> When viewed in IE6 or Firefox, the list beginning "Unsurpassed
    >> design and manufacturing quality." on the page http://www.osg-uk.com
    >> has blue arrows as bullets.
    >>
    >> However, in IE7, the arrows are hidden under the image to the left
    >> of it. I have tried various ways to rectify this but if I get it
    >> looking OK in IE7, it looks rubbish in FF.
    >>
    >> Can someone point me to the correct magic incantation?
    >>

    > Have a read of http://meyerweb.com/eric/css/list-indent.html
    >
    > Having a quick read through, it looks as if you will need to set left-
    > margin and left-padding for ul to something other than 0.
    >
    > I am not an html guru but, as I understand it, Firefox, etc includes
    > the bullet in the space for the list item whereas IE places it
    > outside. You have set the list to have no indentation, so in IE, your
    > bullets appear to the left of the text block, i.e. beneath the image.


    I tried that but still no luck. When the image was missing, I noticed that,
    far from being just out of sight under the image, the arrows are in fact
    right under the left hand side of it. As I say it was all fine under IE6,
    it's just IE7 that is giving me grief!
     
    Paul Lautman, Dec 28, 2006
    #3
  4. Paul Lautman

    Ben C Guest

    On 2006-12-28, Martin Clark <> wrote:
    > Paul Lautman wrote...
    >>When viewed in IE6 or Firefox, the list beginning "Unsurpassed design and
    >>manufacturing quality." on the page http://www.osg-uk.com has blue arrows as
    >>bullets.
    >>
    >>However, in IE7, the arrows are hidden under the image to the left of it. I
    >>have tried various ways to rectify this but if I get it looking OK in IE7,
    >>it looks rubbish in FF.
    >>
    >>Can someone point me to the correct magic incantation?
    >>

    > Have a read of http://meyerweb.com/eric/css/list-indent.html
    >
    > Having a quick read through, it looks as if you will need to set left-
    > margin and left-padding for ul to something other than 0.
    >
    > I am not an html guru but, as I understand it, Firefox, etc includes the
    > bullet in the space for the list item whereas IE places it outside. You
    > have set the list to have no indentation, so in IE, your bullets appear
    > to the left of the text block, i.e. beneath the image.


    There's a list-style-position property, which can have the value
    "inside" or "outside". Default is outside. The list-item is formatted
    just like a block box with the list item marker projected out to the
    left. Its precise position is not specified, but I think FF puts its
    right edge 8 pixels to the left. IE is allowed to put it somewhere
    slightly different. There's no way to control the exact position in CSS
    2.1.

    If you do want to place them more precisely across browsers, you could
    just use relatively positioned inline boxes instead.

    I can't actually find the list you're talking about on the url you
    posted.
     
    Ben C, Dec 28, 2006
    #4
  5. Paul Lautman

    Paul Lautman Guest

    Ben C wrote:
    > On 2006-12-28, Martin Clark <> wrote:
    >> Paul Lautman wrote...
    >>> When viewed in IE6 or Firefox, the list beginning "Unsurpassed
    >>> design and manufacturing quality." on the page
    >>> http://www.osg-uk.com has blue arrows as bullets.
    >>>
    >>> However, in IE7, the arrows are hidden under the image to the left
    >>> of it. I have tried various ways to rectify this but if I get it
    >>> looking OK in IE7, it looks rubbish in FF.
    >>>
    >>> Can someone point me to the correct magic incantation?
    >>>

    >> Have a read of http://meyerweb.com/eric/css/list-indent.html
    >>
    >> Having a quick read through, it looks as if you will need to set
    >> left- margin and left-padding for ul to something other than 0.
    >>
    >> I am not an html guru but, as I understand it, Firefox, etc includes
    >> the bullet in the space for the list item whereas IE places it
    >> outside. You have set the list to have no indentation, so in IE,
    >> your bullets appear to the left of the text block, i.e. beneath the
    >> image.

    >
    > There's a list-style-position property, which can have the value
    > "inside" or "outside". Default is outside. The list-item is formatted
    > just like a block box with the list item marker projected out to the
    > left. Its precise position is not specified, but I think FF puts its
    > right edge 8 pixels to the left. IE is allowed to put it somewhere
    > slightly different. There's no way to control the exact position in
    > CSS
    > 2.1.
    >
    > If you do want to place them more precisely across browsers, you could
    > just use relatively positioned inline boxes instead.
    >
    > I can't actually find the list you're talking about on the url you
    > posted.


    It's right there on the front page. Under the "Part of the OSG Corporation"
    text there is a heading "Mission Statement". Then there is a paragrapg and
    then there is the list, whose first item is "Unsurpassed design and
    manufacturing quality.". Just do a search on the page for "unsurpassed". If
    you look at the url in FF or IE6 you will see the list with the blue arrows
    as bullets.

    I did think of putting it in boxes, but then it won't wrap around the image
    if the text size or the number of items in the list changes.
     
    Paul Lautman, Dec 29, 2006
    #5
  6. Paul Lautman

    Ben C Guest

    On 2006-12-29, Paul Lautman <> wrote:
    > Ben C wrote:
    >> On 2006-12-28, Martin Clark <> wrote:
    >>> Paul Lautman wrote...
    >>>> When viewed in IE6 or Firefox, the list beginning "Unsurpassed
    >>>> design and manufacturing quality." on the page
    >>>> http://www.osg-uk.com has blue arrows as bullets.
    >>>>
    >>>> However, in IE7, the arrows are hidden under the image to the left
    >>>> of it. I have tried various ways to rectify this but if I get it
    >>>> looking OK in IE7, it looks rubbish in FF.
    >>>>
    >>>> Can someone point me to the correct magic incantation?

    [snip]
    >> I can't actually find the list you're talking about on the url you
    >> posted.

    >
    > It's right there on the front page. Under the "Part of the OSG Corporation"
    > text there is a heading "Mission Statement". Then there is a paragrapg and
    > then there is the list, whose first item is "Unsurpassed design and
    > manufacturing quality.". Just do a search on the page for "unsurpassed". If
    > you look at the url in FF or IE6 you will see the list with the blue arrows
    > as bullets.
    >
    > I did think of putting it in boxes, but then it won't wrap around the image
    > if the text size or the number of items in the list changes.


    OK I've found it. You're doing the arrows now with background images and
    padding-left, which presumably solves your original problem?
     
    Ben C, Dec 29, 2006
    #6
  7. Paul Lautman

    Paul Lautman Guest

    Ben C wrote:
    > On 2006-12-29, Paul Lautman <> wrote:
    >> Ben C wrote:
    >>> On 2006-12-28, Martin Clark <> wrote:
    >>>> Paul Lautman wrote...
    >>>>> When viewed in IE6 or Firefox, the list beginning "Unsurpassed
    >>>>> design and manufacturing quality." on the page
    >>>>> http://www.osg-uk.com has blue arrows as bullets.
    >>>>>
    >>>>> However, in IE7, the arrows are hidden under the image to the left
    >>>>> of it. I have tried various ways to rectify this but if I get it
    >>>>> looking OK in IE7, it looks rubbish in FF.
    >>>>>
    >>>>> Can someone point me to the correct magic incantation?

    > [snip]
    >>> I can't actually find the list you're talking about on the url you
    >>> posted.

    >>
    >> It's right there on the front page. Under the "Part of the OSG
    >> Corporation" text there is a heading "Mission Statement". Then there
    >> is a paragrapg and then there is the list, whose first item is
    >> "Unsurpassed design and manufacturing quality.". Just do a search on
    >> the page for "unsurpassed". If you look at the url in FF or IE6 you
    >> will see the list with the blue arrows as bullets.
    >>
    >> I did think of putting it in boxes, but then it won't wrap around
    >> the image if the text size or the number of items in the list
    >> changes.

    >
    > OK I've found it. You're doing the arrows now with background images
    > and padding-left, which presumably solves your original problem?


    ??confused??
    I was always doing the arrows like this and the "original" problem (actually
    there is only one) is still there. The arrows are not visible on IE7, whilst
    they work fine on IE6 and FF.
     
    Paul Lautman, Dec 30, 2006
    #7
  8. Paul Lautman

    Ben C Guest

    On 2006-12-30, Paul Lautman <> wrote:
    > Ben C wrote:
    >> On 2006-12-29, Paul Lautman <> wrote:
    >>> Ben C wrote:
    >>>> On 2006-12-28, Martin Clark <> wrote:
    >>>>> Paul Lautman wrote...

    [snip]
    >>>>>> http://www.osg-uk.com has blue arrows as bullets.
    >>>>>>
    >>>>>> However, in IE7, the arrows are hidden under the image to the left
    >>>>>> of it. I have tried various ways to rectify this but if I get it
    >>>>>> looking OK in IE7, it looks rubbish in FF.
    >>>>>>
    >>>>>> Can someone point me to the correct magic incantation?

    >> [snip]

    [snip]
    >> OK I've found it. You're doing the arrows now with background images
    >> and padding-left, which presumably solves your original problem?

    >
    > ??confused??


    I assumed you were using list-style-type: image to get the arrows
    originally and therefore that that was the problem. Never mind.

    > I was always doing the arrows like this and the "original" problem
    > (actually there is only one) is still there. The arrows are not
    > visible on IE7, whilst they work fine on IE6 and FF.


    Sounds like IE is starting the background-image behind where the bullets
    would have been.

    You could try making the list items display: block, instead of using
    list-style: none. Just a guess, but it might confuse IE less.

    So in template_css.css: 474 delete list-style: none, and add display:
    block to the li selector just below it.
     
    Ben C, Dec 30, 2006
    #8
  9. Paul Lautman

    rwap Guest

    On Dec 30, 10:20 am, "Paul Lautman" <>
    wrote:
    > Ben C wrote:
    > > On 2006-12-29, Paul Lautman <> wrote:
    > >> Ben C wrote:
    > >>> On 2006-12-28, Martin Clark <> wrote:
    > >>>> Paul Lautman wrote...
    > >>>>> When viewed in IE6 or Firefox, the list beginning "Unsurpassed
    > >>>>> design and manufacturing quality." on the page
    > >>>>>http://www.osg-uk.comhas blue arrows as bullets.

    >
    > >>>>> However, in IE7, the arrows are hidden under the image to the left
    > >>>>> of it. I have tried various ways to rectify this but if I get it
    > >>>>> looking OK in IE7, it looks rubbish in FF.

    >
    > >>>>> Can someone point me to the correct magic incantation?

    > > [snip]
    > >>> I can't actually find the list you're talking about on the url you
    > >>> posted.

    >
    > >> It's right there on the front page. Under the "Part of the OSG
    > >> Corporation" text there is a heading "Mission Statement". Then there
    > >> is a paragrapg and then there is the list, whose first item is
    > >> "Unsurpassed design and manufacturing quality.". Just do a search on
    > >> the page for "unsurpassed". If you look at the url in FF or IE6 you
    > >> will see the list with the blue arrows as bullets.

    >
    > >> I did think of putting it in boxes, but then it won't wrap around
    > >> the image if the text size or the number of items in the list
    > >> changes.

    >
    > > OK I've found it. You're doing the arrows now with background images
    > > and padding-left, which presumably solves your original problem???confused??

    > I was always doing the arrows like this and the "original" problem (actually
    > there is only one) is still there. The arrows are not visible on IE7, whilst
    > they work fine on IE6 and FF.- Hide quoted text -- Show quoted text -



    Opera v9 and even Front Page do not display the bullets. Firefox v2
    does however.

    The problem I think is to do with floating divs which have caused
    problems in IE 7 for some reason.

    The solution to this problem is fairly straightforward, you need to
    create a table with two columns to put the image in the left hand
    column and the text in the right hand one.

    Rich
    www.internetbusinessangels.com
     
    rwap, Dec 30, 2006
    #9
  10. Paul Lautman

    Paul Lautman Guest

    rwap wrote:
    > On Dec 30, 10:20 am, "Paul Lautman" <>
    > wrote:
    >> Ben C wrote:
    >>> On 2006-12-29, Paul Lautman <> wrote:
    >>>> Ben C wrote:
    >>>>> On 2006-12-28, Martin Clark <> wrote:
    >>>>>> Paul Lautman wrote...
    >>>>>>> When viewed in IE6 or Firefox, the list beginning "Unsurpassed
    >>>>>>> design and manufacturing quality." on the page
    >>>>>>> http://www.osg-uk.comhas blue arrows as bullets.

    >>
    >>>>>>> However, in IE7, the arrows are hidden under the image to the
    >>>>>>> left of it. I have tried various ways to rectify this but if I
    >>>>>>> get it looking OK in IE7, it looks rubbish in FF.

    >>
    >>>>>>> Can someone point me to the correct magic incantation?
    >>> [snip]
    >>>>> I can't actually find the list you're talking about on the url you
    >>>>> posted.

    >>
    >>>> It's right there on the front page. Under the "Part of the OSG
    >>>> Corporation" text there is a heading "Mission Statement". Then
    >>>> there is a paragrapg and then there is the list, whose first item
    >>>> is "Unsurpassed design and manufacturing quality.". Just do a
    >>>> search on the page for "unsurpassed". If you look at the url in FF
    >>>> or IE6 you will see the list with the blue arrows as bullets.

    >>
    >>>> I did think of putting it in boxes, but then it won't wrap around
    >>>> the image if the text size or the number of items in the list
    >>>> changes.

    >>
    >>> OK I've found it. You're doing the arrows now with background images
    >>> and padding-left, which presumably solves your original
    >>> problem???confused??

    >> I was always doing the arrows like this and the "original" problem
    >> (actually there is only one) is still there. The arrows are not
    >> visible on IE7, whilst they work fine on IE6 and FF.- Hide quoted
    >> text -- Show quoted text -

    >
    >
    > Opera v9 and even Front Page do not display the bullets. Firefox v2
    > does however.
    >
    > The problem I think is to do with floating divs which have caused
    > problems in IE 7 for some reason.
    >
    > The solution to this problem is fairly straightforward, you need to
    > create a table with two columns to put the image in the left hand
    > column and the text in the right hand one.
    >
    > Rich
    > www.internetbusinessangels.com


    As I said above, I did think of doing that, but then it won't wrap around
    the image if the text size or the number of items in the list changes.
     
    Paul Lautman, Dec 30, 2006
    #10
  11. Paul Lautman

    rwap Guest

    > As I said above, I did think of doing that, but then it won't wrap around
    > the image if the text size or the number of items in the list changes


    Yes but if surely the idea of a bulleted list is that they appear one
    underneath the other, so you would not want them to wrap around the
    image?

    Rich
    http://www.internetbusinessangels.com
     
    rwap, Dec 30, 2006
    #11
  12. Paul Lautman

    Ben C Guest

    On 2006-12-30, rwap <> wrote:
    [snip]
    > Opera v9 and even Front Page do not display the bullets. Firefox v2
    > does however.
    >
    > The problem I think is to do with floating divs which have caused
    > problems in IE 7 for some reason.


    Now I see the problem! I have Opera, so I can actually see it.

    First of all, don't make the img (hightech.jpg) align="left"; instead
    add "float: left" to its styles and lose the align attribute.

    The float extends past the bottom of the <h4> it's in, which means it
    overflows subsequent block boxes. But inline boxes in those block boxes
    flow around the float. So the background images are right at the left,
    under the image, but the inline text is flowed around the float, to the
    right.

    This is as it should be and Opera (and Konqueror, and possibly IE) are
    displaying the page correctly. It's Firefox that's wrong.

    So put a new div in, starting after the <h4>, and ending after the
    <div> containing the <ul>, i.e. around everything that's supposed to be
    to the right of that image. Set that div's style to "margin-left:
    200px", which is the width of hightech.jpg.

    That way all the block boxes in that area have their left edges to the
    right of the image, and so the background images shouldn't get left
    behind. This works in Opera, Konqueror and Firefox. I don't have IE to
    test it on.

    > The solution to this problem is fairly straightforward, you need to
    > create a table with two columns to put the image in the left hand
    > column and the text in the right hand one.


    Or you could use a table, but it isn't necessary.
     
    Ben C, Dec 30, 2006
    #12
  13. Paul Lautman wrote:
    > rwap wrote:
    >> On Dec 30, 10:20 am, "Paul Lautman" <>
    >> wrote:
    >>> Ben C wrote:
    >>>> On 2006-12-29, Paul Lautman <> wrote:
    >>>>> Ben C wrote:
    >>>>>> On 2006-12-28, Martin Clark <> wrote:
    >>>>>>> Paul Lautman wrote...
    >>>>>>>> When viewed in IE6 or Firefox, the list beginning "Unsurpassed
    >>>>>>>> design and manufacturing quality." on the page
    >>>>>>>> http://www.osg-uk.comhas blue arrows as bullets.
    >>>>>>>> However, in IE7, the arrows are hidden under the image to the
    >>>>>>>> left of it. I have tried various ways to rectify this but if I
    >>>>>>>> get it looking OK in IE7, it looks rubbish in FF.
    >>>>>>>> Can someone point me to the correct magic incantation?

    <SNIP>

    Well on a quick look your markup is a mess with overly nested TABLEs and
    DIVs and you are not quoting values and using UPPERCASE on some element
    and parameters which are no-nos in XHTML. All this aside I'm on dialup
    so I could see what was happening as images loaded. IE and Opera are
    showing your arrow list images but they a located at the left-hand edge
    of your bits image to the list's left. As the bits image loads if covers
    up your arrows.

    Personally I would dump the tables and the overuse of containers and try
    again. A simpler design could yield the same result with a fraction of
    the markup. Also switch from XHTML Transitional >> HTML 4.01 Strict will
    coax better cooperation from IE

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Dec 30, 2006
    #13
  14. Paul Lautman

    Paul Lautman Guest

    Ben C wrote:
    > On 2006-12-30, rwap <> wrote:
    > [snip]
    >> Opera v9 and even Front Page do not display the bullets. Firefox v2
    >> does however.
    >>
    >> The problem I think is to do with floating divs which have caused
    >> problems in IE 7 for some reason.

    >
    > Now I see the problem! I have Opera, so I can actually see it.
    >
    > First of all, don't make the img (hightech.jpg) align="left"; instead
    > add "float: left" to its styles and lose the align attribute.
    >
    > The float extends past the bottom of the <h4> it's in, which means it
    > overflows subsequent block boxes. But inline boxes in those block
    > boxes flow around the float. So the background images are right at
    > the left, under the image, but the inline text is flowed around the
    > float, to the right.
    >
    > This is as it should be and Opera (and Konqueror, and possibly IE) are
    > displaying the page correctly. It's Firefox that's wrong.
    >
    > So put a new div in, starting after the <h4>, and ending after the
    > <div> containing the <ul>, i.e. around everything that's supposed to
    > be to the right of that image. Set that div's style to "margin-left:
    > 200px", which is the width of hightech.jpg.
    >
    > That way all the block boxes in that area have their left edges to the
    > right of the image, and so the background images shouldn't get left
    > behind. This works in Opera, Konqueror and Firefox. I don't have IE to
    > test it on.
    >
    >> The solution to this problem is fairly straightforward, you need to
    >> create a table with two columns to put the image in the left hand
    >> column and the text in the right hand one.

    >
    > Or you could use a table, but it isn't necessary.


    I'll try that and let you know
     
    Paul Lautman, Dec 30, 2006
    #14
  15. Paul Lautman

    Paul Lautman Guest

    Jonathan N. Little wrote:
    > Paul Lautman wrote:
    >> rwap wrote:
    >>> On Dec 30, 10:20 am, "Paul Lautman" <>
    >>> wrote:
    >>>> Ben C wrote:
    >>>>> On 2006-12-29, Paul Lautman <> wrote:
    >>>>>> Ben C wrote:
    >>>>>>> On 2006-12-28, Martin Clark <> wrote:
    >>>>>>>> Paul Lautman wrote...
    >>>>>>>>> When viewed in IE6 or Firefox, the list beginning "Unsurpassed
    >>>>>>>>> design and manufacturing quality." on the page
    >>>>>>>>> http://www.osg-uk.comhas blue arrows as bullets.
    >>>>>>>>> However, in IE7, the arrows are hidden under the image to the
    >>>>>>>>> left of it. I have tried various ways to rectify this but if I
    >>>>>>>>> get it looking OK in IE7, it looks rubbish in FF.
    >>>>>>>>> Can someone point me to the correct magic incantation?

    > <SNIP>
    >
    > Well on a quick look your markup is a mess with overly nested TABLEs
    > and DIVs and you are not quoting values and using UPPERCASE on some
    > element and parameters which are no-nos in XHTML. All this aside I'm
    > on dialup so I could see what was happening as images loaded. IE and
    > Opera are showing your arrow list images but they a located at the
    > left-hand edge of your bits image to the list's left. As the bits
    > image loads if covers up your arrows.
    >
    > Personally I would dump the tables and the overuse of containers and
    > try again. A simpler design could yield the same result with a
    > fraction of the markup. Also switch from XHTML Transitional >> HTML
    > 4.01 Strict will coax better cooperation from IE


    Well an awful lot of what you see is generated by Mambo,so my only option
    there is to work on the base code, which of course makes upgrading a
    nightmare.
     
    Paul Lautman, Dec 30, 2006
    #15
  16. Paul Lautman wrote:
    > Jonathan N. Little wrote:

    <snip>
    >> Personally I would dump the tables and the overuse of containers and
    >> try again. A simpler design could yield the same result with a
    >> fraction of the markup. Also switch from XHTML Transitional >> HTML
    >> 4.01 Strict will coax better cooperation from IE

    >
    > Well an awful lot of what you see is generated by Mambo,so my only option
    > there is to work on the base code, which of course makes upgrading a
    > nightmare.


    Not familiar with Mambo, but I must say I am underwhelmed. But then
    again I do advocate hand-coded markup....

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Dec 31, 2006
    #16
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Bob H

    Datagrid and bullets

    Bob H, Feb 5, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    402
    =?Utf-8?B?QXZuZWVzaA==?=
    Feb 5, 2004
  2. ComputerSnack
    Replies:
    7
    Views:
    1,889
    Jonathan N. Little
    Apr 13, 2006
  3. babz
    Replies:
    0
    Views:
    455
  4. dorayme
    Replies:
    35
    Views:
    1,326
    John Hosking
    Aug 26, 2008
  5. ssg31415926

    BulletedList and Unordered List - no bullets are displayed

    ssg31415926, Sep 21, 2006, in forum: ASP .Net Web Controls
    Replies:
    1
    Views:
    977
    ssg31415926
    Sep 21, 2006
Loading...

Share This Page