<li> tag problem in CSS

dharmil007

Journeyman
Hello,
i have written a small HTML file for college purpose.
i m just learning HTML in college.
But its not displaying as it should be.

There is a lot of space before & after the li {audi, bmw, etc} TAGs.i want to remove it but its not getting removed. & the image in the 2nd li tag which is used as bullet has gone out of the screen.

So pls. can anybody help me fix this 2 problems

IMAGE :-

*i42.tinypic.com/b5k27s.jpg


CSS CODE :-

PHP:
@font-face
{
font-family: nsecthin;
src : url('nsecthin.ttf')
}
body
{
margin:10px;
background-color:green;
}
.header
{
text-align:center;
text-transform:uppercase;
color:black;
text-decoration:underline;
font-family:nsecthin,Constantia;
font-size:2.0em;
letter-spacing:3px;
font-weight:bold;
text-indent: 0;
line-height:50px;
background-color:yellow;
border:2px solid white;
}
.list
{

font-family:constantia;
font-size:2em;
padding:0;
margin:0;
border:2px solid white;
list-style-position:inside;
}

.ul2 li
{
height:2px;
list-style-type:none;
float:none;

display:inline;
border:2px solid white;
list-style-position:inside;
}

.ul2 a
{
float:none;
width:1em;
text-decoration:none;
color:white;
display:inline;
background-color:blue;
padding-left:0;
border:2px solid white;
}


HTML CODE :-
PHP:
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "myStyle2.css" />
<style type="text/css">
#ul1
{
list-style-image:url('1.bmp');
padding:0px;
float:left;
}
</style>

<title>CARS</title>
</head>
<body>

<div class = "container" style=width="100%">

<div class = "header" height = "20%" width = "100%">
CARS
</div>

<div class = "list" height = "10%" width = "100%">
	<ul class ="ul2">
<li><a href = "#">HOME</a></li>
<li><a href = "bmw.htm">BMW</a></li>
<li><a href = "audi.htm">AUDI</a></li>
<li><a href = "pors.htm">PORSCHE</a></li>
<li><a href = "lamb.htm">LAMBORGHINI</a></li>
	</ul>
</div>


<ul id = "ul1">
<li>AUDI</li>
<li>PORSCHE</li>
<li>BMW</li>
<li>LAMBORGHI   NI</li>
</ul>
</div>
</body>

</html>
 

clmlbx

Technomancer
Well I have not used this for while but this looks like a fault of Padding and margin.

1. Space problem.. try changing Padding values(increase it) see it is working or not. Edit :- tried myself not working

2. image not shown problem , try giving margin over there

checked image problem is because of margin.. just add it and it will be done.
 
Last edited:
OP
dharmil007

dharmil007

Journeyman
Well I have not used this for while but this looks like a fault of Padding and margin.

1. Space problem.. try changing Padding values(increase it) see it is working or not. Edit :- tried myself not working

2. image not shown problem , try giving margin over there

checked image problem is because of margin.. just add it and it will be done.



1. Then whats the solution of the 1st issue ??
2. by giving margin or padding, it solves the issue but i just want to ask, why is it like that by default ???
 

clmlbx

Technomancer
For second Problem take that as, on default it is page with no margin(margin=0).. hence no margin then it starts from edge..
 
Top Bottom