ul classes

Discussion in 'HTML' started by Luigi Donatello Asero, Feb 20, 2004.

  1. I tried to use different ul classes having one class with square and another
    without but there is something going wrong.
    The page is http://www.scaiecat-spa-gigi.com/sv/test.html
    and the 40.css which I used is as follows

    p{
    margin-bottom: 2%;
    margin-top: 2%;
    text-indent:5%;
    text-align: left;
    margin-left:10%;
    margin-right:10%;
    }


    TABLE { border-collapse: separate;
    border: 1px solid red;
    }

    ..one {color:#000000; border: 1px solid white;
    background: #ffffff;}
    ..two {color:#000000; border: 1px solid white;
    background: #33ffcc;}
    ..three {color:#000000; border: 1px solid white;
    background: #99ff66;}
    ..four {
    color:#ffffff; border: 1px solid white;
    background: #cc6600;}
    ..five {color:#ffffff;
    border: 1px solid white;
    background: #ff0099;}






    th, li, h1, h2, h3, a {
    color: black;
    background: transparent;
    text-align:center;
    }
    body {
    background: #ffffcc;
    color: black;
    font-size: 100%;
    margin: 0;}
    #head{border:0px solid white;}

    #content{
    margin-left:auto;
    border:1px solid green;}
    DIV.normal{margin-top: 5%;


    }
    div#menu{color:#000000;
    background:#ffffcc;
    width:25ex;



    border:1px solid white;
    text-align:center;



    float:left;}
    #menu a {
    margin-left:auto;
    margin-right: auto;
    color: #0000ff;
    background:#ffcc66;

    border-left: 1px solid #F66460;
    border-top: 1px solid #F66460;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    width: 80%;


    margin-top: 5px;

    display: block;}

    #menu a:active {color: #0000ff; background-color:#ffffff; }
    #menu a:visited {color: #000000; background-color:#ffffff;}
    #menu a:hover {
    color: #666666;
    background-color:#ffffff;
    border-left: 1px solid #000000;
    border-top: 1px solid #000000;
    border-right: 1px solid #F66460;
    border-bottom: 1px solid #F66460;}
    div.top {margin-top: 2%;
    margin-left: auto;
    margin-right:auto;
    text-align:center;
    }
    div.bottom {margin-bottom: 2%;
    margin-left: auto;
    margin-right:auto;
    width:100%
    }
    div.provinser{
    margin:auto;
    padding:0;
    text-align:center;
    width:50%;
    }
    div.semesterboende{
    margin:auto;
    padding:0;

    width:78%;
    }

    ul {
    margin:auto;
    list-style-type:none;
    }
    ul.provincie{
    margin:auto;
    list-style-type:square;}
    li {
    display:inline;
    }

    --
    Luigi ( un italiano che vive in Svezia)
    http://www.italymap.dk
    http://www.scaiecat-spa-gigi.com/it/benvenuti.html
     
    Luigi Donatello Asero, Feb 20, 2004
    #1
    1. Advertising

  2. Luigi Donatello Asero

    Steve Pugh Guest

    "Luigi Donatello Asero" <> wrote:

    >I tried to use different ul classes having one class with square and another
    >without but there is something going wrong.
    >The page is http://www.scaiecat-spa-gigi.com/sv/test.html
    >and the 40.css which I used is as follows
    >
    >ul { margin:auto; list-style-type:none;}
    >ul.provincie{ margin:auto; list-style-type:square;}
    >li { display:inline; }


    Inline <li>s don't have bullets.
    In CSS only elements that are display: list-item (the default for li)
    have automatic bullets. As soon as you change that to display: inline;
    the bullets vanish. The same applies if you make the <li>s block
    elements either by display: block; or by float.

    The following will not work in Internet Explorer, but will work in
    Opera and Mozilla:
    ul.provincie li:before {content: "\25A0\20";}

    For IE you'll need to include the bullet in the actual content of the
    LI, which leads to double bullets when CSS is disabled, or use a
    background image:

    ul.provincie li {padding-left: 15px; background: url(bullet.gif)
    no-repeat;}


    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Feb 20, 2004
    #2
    1. Advertising

  3. "Steve Pugh" <> skrev i meddelandet
    news:...
    > "Luigi Donatello Asero" <> wrote:
    >
    > >I tried to use different ul classes having one class with square and

    another
    > >without but there is something going wrong.
    > >The page is http://www.scaiecat-spa-gigi.com/sv/test.html
    > >and the 40.css which I used is as follows
    > >
    > >ul { margin:auto; list-style-type:none;}
    > >ul.provincie{ margin:auto; list-style-type:square;}
    > >li { display:inline; }

    >
    > Inline <li>s don't have bullets.
    > In CSS only elements that are display: list-item (the default for li)
    > have automatic bullets. As soon as you change that to display: inline;
    > the bullets vanish. The same applies if you make the <li>s block
    > elements either by display: block; or by float.
    >
    > The following will not work in Internet Explorer, but will work in
    > Opera and Mozilla:
    > ul.provincie li:before {content: "\25A0\20";}
    >
    > For IE you'll need to include the bullet in the actual content of the
    > LI, which leads to double bullets when CSS is disabled, or use a
    > background image:
    >
    > ul.provincie li {padding-left: 15px; background: url(bullet.gif)
    > no-repeat;}
    >
    >
    > Steve
    >
    > --
    > "My theories appal you, my heresies outrage you,
    > I never answer letters and you don't like my tie." - The Doctor
    >
    > Steve Pugh <> <http://steve.pugh.net/>



    Well, I think it should look better now at least a IE 6.0 and Mozilla 1.6
    What about Opera and Netscape?
    http://www.scaiecat-spa-gigi.com/sv/valkommen.html
    http://www.scaiecat-spa-gigi.com/it/benvenuti.html
    http://www.scaiecat-spa-gigi.com/de/willkommen.html
    http://www.scaiecat-spa-gigi.com/en/welcome.html



    --
    Luigi ( un italiano che vive in Svezia)
    http://www.italymap.dk
     
    Luigi Donatello Asero, Feb 21, 2004
    #3
    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. David

    Classes within classes

    David, Jul 21, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    5,004
    David
    Jul 22, 2005
  2. lonelyplanet999
    Replies:
    1
    Views:
    2,286
    VisionSet
    Nov 13, 2003
  3. Carfield Yim
    Replies:
    1
    Views:
    1,548
    Andrew Thompson
    May 31, 2004
  4. Razvan
    Replies:
    11
    Views:
    947
    Andrew Thompson
    Jul 17, 2004
  5. Razvan
    Replies:
    5
    Views:
    11,365
    Dale King
    Jul 27, 2004
Loading...

Share This Page