I have a list that has sub lists that should be indented.
It looks great in IE but not in FF. the 2 images I have attached are the different versions.
Here is my HTML code of the lists. How can I make the lists in FF and NN look like the one in IE?
<ul style="margin-left: 17; margin-bottom: 0">
<li>
<p style="margin-right: 30; line-height:150%; margin-top:5">Rapid drawing of hot rolled steel sections:
</li>
<li>
<p style="margin-right: 30; line-height:150%; margin-left:40">I sections</li>
<li>
<p style="margin-right: 30; line-height:150%; margin-left:40">H sections</li>
<li>
<p style="margin-right: 30; line-height:150%; margin-left:40">Channels</li>
<li>
<p style="margin-right: 30; line-height:150%; margin-left:40">Angles</li>
<li>
<p style="margin-right: 30; line-height:150%; margin-left:40">Plate girders</li>
<li>
<p style="margin-right: 30; line-height:150%">Rapid drawing of cold rolled steel sections: </li>
<li>
<p style="margin-right: 30; line-height:150%; margin-left:40">Angles</li>
<li>
<p style="margin-right: 30; line-height:150%; margin-left:40">Channels</li>
<li>
<p style="margin-right: 30; line-height:150%; margin-left:40">Lipped zeds</li>
<li>
<p style="margin-right: 30; line-height:150%; margin-left:40">Top hats</li>
</ul>You've just made this far to complicated. You've tried using paragraphs to emulate nested lists rather than just nesting the lists normally.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Rapid drawing of rolled steel at varied temperatures.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
ul{
color: #333;
margin-left: 20px;
list-style-type: disc;
}
</style>
</head>
<body>
<ul>
<li>Rapid drawing of hot rolled steel sections:
<ul>
<li>I sections</li>
<li>H sections</li>
<li>Channels</li>
<li>Angles</li>
<li>Plate girders</li>
</ul>
</li>
<li>Rapid drawing of cold rolled steel sections:
<ul>
<li>Angles</li>
<li>Channels</li>
<li>Lipped zeds</li>
<li>Top hats</li>
</ul>
</li>
</ul>
</body>
</html>ok thanks, that helps. BUT how would i make the indented bullets more indented? I could change your "margin-left" to "40px" but then the first bullets are ALSO moved?You can address elements acording to what element they are contained in.ul{
color: #333;
margin-left: 20px;
list-style-type: disc;
}
ul ul{
margin-left: 40px;
}oh great. Thanks so much
It looks great in IE but not in FF. the 2 images I have attached are the different versions.
Here is my HTML code of the lists. How can I make the lists in FF and NN look like the one in IE?
<ul style="margin-left: 17; margin-bottom: 0">
<li>
<p style="margin-right: 30; line-height:150%; margin-top:5">Rapid drawing of hot rolled steel sections:
</li>
<li>
<p style="margin-right: 30; line-height:150%; margin-left:40">I sections</li>
<li>
<p style="margin-right: 30; line-height:150%; margin-left:40">H sections</li>
<li>
<p style="margin-right: 30; line-height:150%; margin-left:40">Channels</li>
<li>
<p style="margin-right: 30; line-height:150%; margin-left:40">Angles</li>
<li>
<p style="margin-right: 30; line-height:150%; margin-left:40">Plate girders</li>
<li>
<p style="margin-right: 30; line-height:150%">Rapid drawing of cold rolled steel sections: </li>
<li>
<p style="margin-right: 30; line-height:150%; margin-left:40">Angles</li>
<li>
<p style="margin-right: 30; line-height:150%; margin-left:40">Channels</li>
<li>
<p style="margin-right: 30; line-height:150%; margin-left:40">Lipped zeds</li>
<li>
<p style="margin-right: 30; line-height:150%; margin-left:40">Top hats</li>
</ul>You've just made this far to complicated. You've tried using paragraphs to emulate nested lists rather than just nesting the lists normally.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Rapid drawing of rolled steel at varied temperatures.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
ul{
color: #333;
margin-left: 20px;
list-style-type: disc;
}
</style>
</head>
<body>
<ul>
<li>Rapid drawing of hot rolled steel sections:
<ul>
<li>I sections</li>
<li>H sections</li>
<li>Channels</li>
<li>Angles</li>
<li>Plate girders</li>
</ul>
</li>
<li>Rapid drawing of cold rolled steel sections:
<ul>
<li>Angles</li>
<li>Channels</li>
<li>Lipped zeds</li>
<li>Top hats</li>
</ul>
</li>
</ul>
</body>
</html>ok thanks, that helps. BUT how would i make the indented bullets more indented? I could change your "margin-left" to "40px" but then the first bullets are ALSO moved?You can address elements acording to what element they are contained in.ul{
color: #333;
margin-left: 20px;
list-style-type: disc;
}
ul ul{
margin-left: 40px;
}oh great. Thanks so much