Problem aligning list items in IE

Jim Moe wrote:

Did you try it with the correct syntax?
With <ul> nested in <li>.
This goes a *lot* faster if you provide an URL demonstrating the problem.
See previous message to Beauregard.

Cheers

Beauregard T. Shagnasty wrote:

Provide a sample URL.

Harlan Messinger wrote:

Yes, please, I'm likewise not seeing why this would happen. I use this
approach all the time.

Here it is: http://ivredimages.free.fr/produits.php

Cheers

On Thu, 5 May 2005, Chris wrote:

The width of this design is 800px.

On a speaking browser? On a text-mode browser?

I should make it a bit smaller then.

No, you should make it more flexible.

Chris wrote:

Beauregard T. Shagnasty wrote:

Chris wrote:

Here it is: http://ivredimages.free.fr/produits.php

See the page with IE6 or IE5.x

Win2K, IE6 and Firefox 1.0.3 look pretty much the same to me. Did
your original effort have the nested <ul> outside of an <li>?

For me, it is okay under Firefox. But under IE, the first line
item is shifted to the right a few pixels. The <ul> are nested
inside <li> in this page.

The "Semi-remorque" line. Very minor - I wouldn't get upset by it. <g>
However, what happens if you shorten the text "Effectuée par des
professionnels du transport :" so it is not near the image?

2. It won't fit in my 800px wide browser window without
horizontal scrollbar.

The width of this design is 800px. I should make it a bit smaller
then.

Actually, why not make it fluid, so it doesn't matter *what* the size
of the visitor's browser is?
http://www.benmeadowcroft.com/webdev...ft-column.html

Thank you for your remarks.

My pleasure. You should also look into setting your main font in
percentage ( 100% ), and dropping Verdana from the font list. Google
for why - discussed in these groups almost daily.

--
-bts
-This space intentionally left blank.

Beauregard T. Shagnasty wrote:

The "Semi-remorque" line. Very minor - I wouldn't get upset by it. <g
However, what happens if you shorten the text "Effectuée par des
professionnels du transport :" so it is not near the image?

I have just done that but the result is the same.

2. It won't fit in my 800px wide browser window without
horizontal scrollbar.


The width of this design is 800px. I should make it a bit smaller
then.


Actually, why not make it fluid, so it doesn't matter *what* the size of
the visitor's browser is?
http://www.benmeadowcroft.com/webdev...ft-column.html

Fluid would mean that the width would adapt to the browser window, which
could lead to something disproportionate with widths 1024 or 1280. I
wonder if this would be a good idea for this type of design...

percentage ( 100% ), and dropping Verdana from the font list. Google for
why - discussed in these groups almost daily.

I am not sure I understand your remark for Verdana. What is wrong with it?

Cheers

Chris wrote:

Beauregard T. Shagnasty wrote:

The "Semi-remorque" line. Very minor - I wouldn't get upset by
it. <g> However, what happens if you shorten the text "Effectuée
par des professionnels du transport :" so it is not near the
image?

I have just done that but the result is the same.

Ok, then what happens if you remove the image next to it, for a test?

Actually, why not make it fluid, so it doesn't matter *what* the
size of the visitor's browser is?
http://www.benmeadowcroft.com/webdev...ft-column.html

Fluid would mean that the width would adapt to the browser window,

Yay! That is a Good Thing™. All of my sites are fluid, and work
pretty well at just about any size. Ex:
http://www.countryrode.com/

which could lead to something disproportionate with widths 1024 or
1280. I wonder if this would be a good idea for this type of
design...

...so set a max-width on the content area. Also, many people with
high-res monitors do not browser with their browser windows
full-screen. Resolution is unimportant.

percentage ( 100% ), and dropping Verdana from the font list.
Google for why - discussed in these groups almost daily.

I am not sure I understand your remark for Verdana. What is wrong
with it?

Google provided:
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

Regarding font-size set in pixels, all those IE users who need to set
a larger font due to vision deficiencies, can't resize your text.

--
-bts
-This space intentionally left blank.

Chris wrote:

This goes a *lot* faster if you provide an URL demonstrating the
problem.
See previous message to Beauregard.

The problem goes away if you remove .normalList li {margin: 1em;}. IE

is apparently screwing up the margin calculation for the 3rd level.

Aside:
The navigation menu wraps in my browser. I have the minimum font size
set to 14 pixels, 88% of normal. This breaks an amazing number of site
layouts, but at least I can read the text.
If you use a margin-left and margin-right instead of width:12em, your
page would be more accommodating to browsers with non-default settings.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

In article <427a35fc$0$3549$626a14ce (AT) news (DOT) free.fr>,
Chris <tochiromifune_pasdepub (AT) free (DOT) fr> wrote:

But this would not solve my problem: there is still a shift to the
right of the first list item.

If you want a list to work with reasonable consistency across ALL
browsers, you have to set the margin AND the padding. Some browsers
indent their list items with margin, some with padding. You have to set
both. I typically set padding: 1em and margin: 0.

-A

axlq wrote:

If you want a list to work with reasonable consistency across ALL
browsers, you have to set the margin AND the padding. Some browsers
indent their list items with margin, some with padding. You have to set
both. I typically set padding: 1em and margin: 0.

I suggest about 1.4em for <ul> to allow for IE's need for lots of space

around the bullet; otherwise it gets clipped off. For <ol> I use 2.5em for
clearance up to 3 digits.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)