Need help with lists in CSS

[my-wings]

I'm getting my feet wet playing with CSS for the first time and trying to
create a page template. I've told it "strict" (which I thought was supported
by both browser types) but I'm getting very different results in IE (6.0)
and Netscape (7.1).

Here is the url: http://www.mywingsbooks.com/home-2.htm The styles are
included in the header.

My trouble starts here (I think):

div.bodytext {
width: 95%;
margin: auto;
}

ul.navmenu {
background-color: #CCCCFF;
width: 120px;
float: left;
font-size: 70%;
list-style-type: square;
}

ul.navmenu li {padding-bottom: 10px;}

The effect I'm trying to achieve within the "div.bodytext" tag is to have a
shaded column run down the left side of the page. The column should contain
an unordered list with bulleted links. I thought I could do this without
tables, just with CSS, but that may not be practical.

At any rate, this looks almost OK in Netscape, except that I would like to
get the bullets closer to the left hand margin and I'd like the column to
continue down the page, or at least keep the body text from wrapping
underneath it.

It looks awful in IE, and no bullets are appearing at all.

Is there something I can do with this to make it look OK in both browsers,
without having to write a separate page for each?

If it makes any difference, my website visitors are breaking down like this:
53% Windows 6.0
36% Windows 5.5
6% Mac IE (5.0-5.23)
2% Gecko
2% Safari

Thanks for any help and advice you can give.

Alice

 

[Whitecrest]

I'm getting my feet wet playing with CSS for the first time and trying to
create a page template. I've told it "strict" (which I thought was supported
by both browser types) but I'm getting very different results in IE (6.0)
and Netscape (7.1).

With the exception of the padding, they look almost identical in IE6 and
Mozilla to me. For the most part, the biggest issues you will have with
CSS and the different browsers (basically IE or everything else) is
going to revolve around the padding, margins and borders.

TopStyle (and awesome CSS/HTML editor $69?) has tools built in that will
help you through these issues. It (and Dreamweaver MX) is our primary
HTML editors for that exact reason. (well there are more reasons, but
that is one of the main ones)

It looks awful in IE, and no bullets are appearing at all.

You may have fixed things when I saw it, I saw the bullets and
everything else.

If it makes any difference...

It doesn't

Thanks for any help and advice you can give.

You came to the right place.

 

[my-wings]

(e-mail address removed) says...

Troublesome page: http://www.mywingsbooks.com/home-2.htm

With the exception of the padding, they look almost identical in IE6 and
Mozilla to me. For the most part, the biggest issues you will have with
CSS and the different browsers (basically IE or everything else) is
going to revolve around the padding, margins and borders.



You came to the right place.

Thanks for the response, but I'm really confused now. I've made pictures of
what I see in the two browsers, and they are not at all the same....
http://www.mywingsbooks.com/BrowserProblems.htm

I've even cleared my cache, and turned my computer off (and on again, of
course) and that's still what I see.

Help!? Any ideas as to what's happening here?

Alice

 

[Toby A Inkster]

ul.navmenu {
background-color: #CCCCFF;
width: 120px;
float: left;
font-size: 70%;
list-style-type: square;
}

ul.navmenu li {padding-bottom: 10px;}

Try adding:

ul.navmenu, ul.navmenu li { margin: 0; padding: 0; }

near the top of your stylesheet and then play around.

 

[Michael Dixon]

I'm getting my feet wet playing with CSS for the first time and trying to
create a page template. I've told it "strict" (which I thought was supported
by both browser types) but I'm getting very different results in IE (6.0)
and Netscape (7.1).

Here is the url: http://www.mywingsbooks.com/home-2.htm The styles are
included in the header.

My trouble starts here (I think):

div.bodytext {
width: 95%;
margin: auto;
}

ul.navmenu {
background-color: #CCCCFF;
width: 120px;
float: left;
font-size: 70%;
list-style-type: square;
}

ul.navmenu li {padding-bottom: 10px;}

The effect I'm trying to achieve within the "div.bodytext" tag is to have a
shaded column run down the left side of the page. The column should contain
an unordered list with bulleted links. I thought I could do this without
tables, just with CSS, but that may not be practical.

At any rate, this looks almost OK in Netscape, except that I would like to
get the bullets closer to the left hand margin and I'd like the column to
continue down the page, or at least keep the body text from wrapping
underneath it.

It looks awful in IE, and no bullets are appearing at all.

Is there something I can do with this to make it look OK in both browsers,
without having to write a separate page for each?

If it makes any difference, my website visitors are breaking down like this:
53% Windows 6.0
36% Windows 5.5
6% Mac IE (5.0-5.23)
2% Gecko
2% Safari

Thanks for any help and advice you can give.

Alice

Try using

padding-left: 2em;

in your ul.navmenu statement. It worked for me.

Mike

 

[my-wings]

Try adding:

ul.navmenu, ul.navmenu li { margin: 0; padding: 0; }

near the top of your stylesheet and then play around.

Thanks. I did finally find stumble my way to the answer this way....

I added some lines around the DIV, UL, and LI elements. If anyone is
interested:
http://www.mywingsbooks.com/home-test.htm

Apparently in the absence of a list-style-position property, IE's default is
"outside" and Navigator's default is "inside." When IE defaults to "outside"
and I attempt to set the "width" property by any means at all, the bullets
disappear. (I guess because they're "outside" the width of the list.) There
also appear to be different defaults for margin and padding, as you suggest
above.

Anyway, the final result can be viewed here:
http://www.mywingsbooks.com/home-test2.htm for a few days, until I replace
it with my final version.

I guess the moral of the story is: specify everything, even if it looks like
it's already working.

Thanks for your help! (I'm sure I'll be back!)

Alice

 

[my-wings]

Try using

padding-left: 2em;

in your ul.navmenu statement. It worked for me.

This did improve the look somewhat, but as you can see in my more lengthy
reply to another poster, the real problem turned to be that I needed to
specify the "list-style-position" property, since the two browsers chose to
default in exactly opposite ways!

Thanks for you comments, though!

Alice

 

[Richard Speiss]

Hi, is it possible to find out what you did? Your test pages are not online
anymore and I am hacving the same problems. I added the list-style-position
which worked nicely for the left margin but Netscape still indents the
bullets too much

Thanks

Richard Speiss

 

[my-wings]

Hi, is it possible to find out what you did? Your test pages are not online
anymore and I am hacving the same problems. I added the list-style-position
which worked nicely for the left margin but Netscape still indents the
bullets too much

Sorry about that. I probably should have left the sample up longer. I
learned a lot about this by just adding borders and playing with various
settings. Take a look here:
http://www.mywingsbooks.com/sample-css.html

It seems the secret is in the padding. if you change from unordered lists to
ordered lists, the padding has to be adjusted again, at least in IE.

Hope this helps.

Alice

 

[Richard Speiss]

Many thanks, I have mine working now that I explicity set the
inside/outside, etc. for the lists. Now they appear the same regardless of
the browser

Richard