Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > List item bullets

Reply
Thread Tools

List item bullets

 
 
Paul Lautman
Guest
Posts: n/a
 
      12-28-2006
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


 
Reply With Quote
 
 
 
 
Martin Clark
Guest
Posts: n/a
 
      12-28-2006
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
 
Reply With Quote
 
 
 
 
Paul Lautman
Guest
Posts: n/a
 
      12-28-2006
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!


 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      12-28-2006
On 2006-12-28, Martin Clark <(E-Mail Removed)> 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.
 
Reply With Quote
 
Paul Lautman
Guest
Posts: n/a
 
      12-29-2006
Ben C wrote:
> On 2006-12-28, Martin Clark <(E-Mail Removed)> 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.


 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      12-29-2006
On 2006-12-29, Paul Lautman <(E-Mail Removed)> wrote:
> Ben C wrote:
>> On 2006-12-28, Martin Clark <(E-Mail Removed)> 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?
 
Reply With Quote
 
Paul Lautman
Guest
Posts: n/a
 
      12-30-2006
Ben C wrote:
> On 2006-12-29, Paul Lautman <(E-Mail Removed)> wrote:
>> Ben C wrote:
>>> On 2006-12-28, Martin Clark <(E-Mail Removed)> 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.


 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      12-30-2006
On 2006-12-30, Paul Lautman <(E-Mail Removed)> wrote:
> Ben C wrote:
>> On 2006-12-29, Paul Lautman <(E-Mail Removed)> wrote:
>>> Ben C wrote:
>>>> On 2006-12-28, Martin Clark <(E-Mail Removed)> 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.
 
Reply With Quote
 
rwap
Guest
Posts: n/a
 
      12-30-2006


On Dec 30, 10:20 am, "Paul Lautman" <(E-Mail Removed)>
wrote:
> Ben C wrote:
> > On 2006-12-29, Paul Lautman <(E-Mail Removed)> wrote:
> >> Ben C wrote:
> >>> On 2006-12-28, Martin Clark <(E-Mail Removed)> 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

 
Reply With Quote
 
Paul Lautman
Guest
Posts: n/a
 
      12-30-2006
rwap wrote:
> On Dec 30, 10:20 am, "Paul Lautman" <(E-Mail Removed)>
> wrote:
>> Ben C wrote:
>>> On 2006-12-29, Paul Lautman <(E-Mail Removed)> wrote:
>>>> Ben C wrote:
>>>>> On 2006-12-28, Martin Clark <(E-Mail Removed)> 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.


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
BulletedList and Unordered List - no bullets are displayed ssg31415926 ASP .Net Web Controls 1 09-21-2006 12:50 PM
Bullets overlapping image aligned to left ComputerSnack HTML 7 04-13-2006 01:57 AM
Bullets not rendering properly babz XML 0 06-27-2005 06:57 AM
html unordered list bullets? jmcckz NZ Computing 2 10-07-2004 12:38 AM
Datagrid and bullets Bob H ASP .Net 1 02-05-2004 01:26 PM



Advertisments