CODEWITHSUNDEEP
htmlcss
ageoff
ageoff

Reputation: 2828

HTML: <ul> tag laysover edge of div area

The li tag in the ul is not indented for some reason. is there something i am missing?

Upvotes: 1

Views: 245

Answers (2)

Gautham
Gautham

Reputation: 1

Instead of 

* {
    margin: 0;
    padding: 0;
}

you can do the same for specific elements 

a, #header, #banner, #content, #bodyArea, #left, #nav, #img2, #img3,......
{
    margin: 0;
    padding: 0;
}

it's a lengthy collection of all your elements which has

margin: 0;
padding: 0;

Upvotes: 0

Justin Helgerson
Justin Helgerson

Reputation: 25551

Line 1 of your CSS file is the issue.

* {
    margin: 0;
    padding: 0;
}

With that declaration you are setting the margin and padding of your list item to 0; as a result it does not appear indented.

To solve the issue, you should include some default styles for your elements. As an example, with my stylesheets the first line will be the CSS reset, followed by some generic styles for various elements.

/*CSS Reset*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}/* HTML5 display-role reset for older browsers */article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/*Generic Styles*/
ul{list-style:disc;margin:1em 0 1em 3em}
li{margin:.3em 0}

Upvotes: 2

Related Questions