«

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

In article <IPmuc.10918$_>,
says...
> 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.

--
Whitecrest Entertainment
www.whitecrestent.com

"Whitecrest" <> wrote in message
news:.. .
> In article <IPmuc.10918$_>,
> says...

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

> > 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.
>
<snip...I'll check out TopStyle, though!>
>

> > Thanks for any help and advice you can give.
>
> 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

my-wings wrote:

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

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

"my-wings" <> wrote in message
news:IPmuc.10918$_...
> 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

"Toby A Inkster" <> wrote in message
news. ..
> my-wings wrote:
>
> > 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.
>

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

"Michael Dixon" <> wrote in message
news:...
>
> "my-wings" <> wrote in message
> news:IPmuc.10918$_...

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

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" <> wrote in message
news:n9suc.12037$_...
>
> "Toby A Inkster" <> wrote in message
> news. ..
> > my-wings wrote:
> >
> > > 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.
> >
>
> 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
>
>

"Richard Speiss" <> wrote in message
news:40d1af1f$1_1@news....
> 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

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

"my-wings" <> wrote in message
news:ESsAc.87619$...
>
> "Richard Speiss" <> wrote in message
> news:40d1af1f$1_1@news....
> > 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
>
>