ul classes

[Luigi Donatello Asero]

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;
}

 

[Steve Pugh]

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

 

[Luigi Donatello Asero]

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 <[email protected]> <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