Hi. I have a web page which has a left panel and right panel. In the
left panel is just several lines of text. In the right panel I want a
line of text, and then bulleted indented text.
Normally for a line of text and then bulleted indented text you do:
<p>Paragraph</p>
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
But when there is a left panel, then the above puts "Paragraph",
"Item1", "Item2" right below one another. In Firefox and Dreamweaver,
the bullet point is to the left of "Item1" and "Item2", inside the
left panel! In Internet Explorer (IE), the bullet point does not even
show. The full 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">
<!--
#leftpanel {
float: left;
background-color: #FFCCCC;
width: 6em;
}
-->
</style>
</head>
<body>
<div id="page">
<div id="leftpanel">
<p>Left 1</p>
<p>Left 2</p>
<p>Left 3</p>
<p>Left 4</p>
<p>Left 5</p>
<p>Left 6</p>
<p>Left 7</p>
<p>Left 8</p>
<p>Left 9</p>
<p>Left 10</p>
</div>
<p>Paragraph</p>
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
</div>
</body>
</html>
So then what I tried to do was to add a CSS rule for "ul" or "#page
ul" with text-indent as 3em.
The HTML code is
#page ul {
text-indent: 3em;
}
Now in Dreamweaver and IE the text shows up as I want, with
"Paragraph" and indented "Item1" and "Item2" below it, and the bullet
point is indented too. The page looks like this -- the correct way,
or what I want:
LLLL Paragraph
LLLL - Item1
LLLL - Item 2
But Firefox shows the page differently. The bullet point is in the
left panel (that is, inside the "LLLL" above), just as it was before I
created the ul rule. The effect of text-indent is to increase the
space between the bullet and "Item1" or "Item2". In other words the
page looks like this -- the incorrect way, or not what I want:
LLLL Paragraph
LL-L Item1
LL-L Item 2
The same holds even if I put the text-indent into a rule for "#page
li".
If instead of text-ident I use margin-left, like so
#page ul {
margin-left: 6em;
}
Then the page looks just like the correct way, and is what I want, in
Dreamweaver and Firefox.
But in IE, the bullet point does not even show up, and "Paragraph" and
"Item1" and "Item2" are one below the other.
So the question is how to make this work in all of Firefox,
Dreamweaver, IE. I got a feeling that text-indent is not working in
Firefox, and also that margin-left is not working in IE.