DIGIT-ARC read-only archive · snapshot: July 23, 2026

  • tag problem in CSS
  • 4 posts · originally from https://geek.digit.in/community/threads/li-tag-problem-in-css.149805/

    dharmil007
    dharmil007 Original post #1
    Dec 10, 2011 at 3:10 PM
    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
    clmlbx #2
    Dec 10, 2011 at 4:23 PM
    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.
    dharmil007
    Dec 10, 2011 at 4:53 PM
    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
    clmlbx #4
    Dec 10, 2011 at 4:57 PM
    For second Problem take that as, on default it is page with no margin(margin=0).. hence no margin then it starts from edge..