Need help with lists in CSS

Discussion in 'HTML' started by my-wings, May 30, 2004.

  1. my-wings

    my-wings Guest

    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
    my-wings, May 30, 2004
    #1
    1. Advertising

  2. my-wings

    Whitecrest Guest

    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, May 30, 2004
    #2
    1. Advertising

  3. my-wings

    my-wings Guest

    "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, May 30, 2004
    #3
  4. 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
    Toby A Inkster, May 30, 2004
    #4
  5. "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
    Michael Dixon, May 30, 2004
    #5
  6. my-wings

    my-wings Guest

    "Toby A Inkster" <> wrote in message
    news:p...
    > 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
    my-wings, May 30, 2004
    #6
  7. my-wings

    my-wings Guest

    "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
    my-wings, May 30, 2004
    #7
  8. 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:p...
    > > 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, Jun 17, 2004
    #8
  9. my-wings

    my-wings Guest

    "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
    my-wings, Jun 18, 2004
    #9
  10. 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
    >
    >
    Richard Speiss, Jun 28, 2004
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. JustSomeGuy

    Sorting lists of lists...

    JustSomeGuy, Jun 17, 2004, in forum: C++
    Replies:
    0
    Views:
    307
    JustSomeGuy
    Jun 17, 2004
  2. Jon Slaughter

    lists of lists

    Jon Slaughter, Dec 13, 2004, in forum: C++
    Replies:
    4
    Views:
    407
    Buster
    Dec 13, 2004
  3. Charlotte Henkle

    Counter for items in lists in lists?

    Charlotte Henkle, Sep 25, 2004, in forum: Python
    Replies:
    8
    Views:
    392
    Charlotte Henkle
    Sep 26, 2004
  4. =?UTF-8?B?w4FuZ2VsIEd1dGnDqXJyZXogUm9kcsOtZ3Vleg==

    List of lists of lists of lists...

    =?UTF-8?B?w4FuZ2VsIEd1dGnDqXJyZXogUm9kcsOtZ3Vleg==, May 8, 2006, in forum: Python
    Replies:
    5
    Views:
    389
    =?UTF-8?B?w4FuZ2VsIEd1dGnDqXJyZXogUm9kcsOtZ3Vleg==
    May 15, 2006
  5. Chris Weisiger

    Help with sorting lists of lists

    Chris Weisiger, Oct 14, 2004, in forum: Perl Misc
    Replies:
    7
    Views:
    121
    Tad McClellan
    Oct 14, 2004
Loading...

Share This Page