HTML Tutorial


 /help/HTML Help Forum   FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
RegisterRegister - Not registered yet? Got something to say? Join HTML Code Tutorial!
question about unordered list
Post new topic   Reply to topic    HTML Help Forum -> CSS
View previous topic :: View next topic  
Author Message
sudhakararaog



Joined: 01 Oct 2009
Posts: 103

PostPosted: Mon Oct 12, 2009 2:07 pm     question about unordered list Reply with quote

i am not getting the same output in ie 6 and 7 when using ordered list all other browsers are displaying the way i wanted.

my code is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">

*{
margin: 0;
padding: 0;
}

body{
font: normal 12px Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}

#wrapper{
width: 900px;
margin: 0 auto;
}


#list{
width: 500px;
margin: 50px 0 0 0;
}

#list ol {
list-style-type: decimal;
list-style-position: outside;
padding: 0 0 0 10px;
margin: 0 0 0 0;
}

#list ol li {
padding: 10px 0 0 0;
margin: 0 0 0 0;
}

</style>
</head>

<body>

<div id="wrapper">

<div id="list">
<ol>
<li>List item 1 Lorem ipsum dolor sit amet, consetetur sadi pscing sed diam Erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam </li>
<li>List item 1 Lorem ipsum dolor sit amet, consetetur sadi pscing sed diam Erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam </li>
<li>List item 1 Lorem ipsum dolor sit amet, consetetur sadi pscing sed diam Erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam </li>
</ol>
</div>

</div>
</body>
</html>

list-style-position: inside; works fine in all browsers however what i need is list-style-position: outside; which is not working in ie 6 and 7 what i have noticed is when i added
*{
margin: 0;
padding: 0;
}
list-style-position: outside; is not working in ie 6 and 7 and works fine in all other browsers


i need the global declaration to be in the css code and i want to achieve the effect of using list-style-position: outside; in ie 6 and 7. also due to the cms i use i cannot use an additional css file for ie and also i cannot write conditional comments so i have to write the code in 1 css file only to achieve the list-style-position: outside; for all browsers.

please advice.

thanks
sticks464



Joined: 31 Dec 2006
Posts: 2629

PostPosted: Mon Oct 12, 2009 3:09 pm     Reply with quote

Try replacing
Code:
*{
margin: 0;
padding: 0;
}

with
Code:
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-family: inherit;
   vertical-align: top;
}
sudhakararaog



Joined: 01 Oct 2009
Posts: 103

PostPosted: Mon Oct 12, 2009 3:13 pm     Reply with quote

thanks for replying

i have tried that however there is no change in ie 6 and 7
sticks464



Joined: 31 Dec 2006
Posts: 2629

PostPosted: Mon Oct 12, 2009 3:47 pm     Reply with quote

You can leave in the
Code:
* {
padding:0;
margin:0;
}


By default an ol uses the decimal as the list style and is placed outside. All list have a default of approx. 30px left margin which has to be put back when using the * style.
Code:
#list ol {
margin-left: 30px;
}


Your going to have to live with some differences in IE6 and 7 because of issues with padding and margins (IE8 is fine) and not being able to use conditional statements.
Display posts from previous:   
Post new topic   Reply to topic    HTML Help Forum -> CSS All times are GMT - 8 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group
HTML Help topic RSS feed 

 
DARFUR
HOSTING / DESIGN
MAKE MONEY

Home
  |   Tutorials   |   Forum   |   Quick List   |   Link Directory   |   About
Copyright ©1997-2002 Idocs and ©2002-2007 HTML Code Tutorial