List item bullets

[Paul Lautman]

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

 

[Martin Clark]

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.

 

[Paul Lautman]

Paul Lautman wrote...
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!

 

[Ben C]

Paul Lautman wrote...
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.

 

[Paul Lautman]

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.

 

[Ben C]

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?

 

[Paul Lautman]

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.

 

[Ben C]

Ben C 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.

 

[rwap]

Ben C 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

 

[Paul Lautman]

Ben C 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.

 

[rwap]

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

 

[Ben C]

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.

 

[Jonathan N. Little]

<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

 

[Paul Lautman]

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.


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

I'll try that and let you know

 

[Paul Lautman]

<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.

 

[Jonathan N. Little]

Jonathan N. Little wrote:

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....