Forum Moderators: not2easy
My problem: The body of my document(s) starts with a text para "class=highlight" (background color and border; nothing special). The next and further paras are 'normal.' I have a navlist floating left (and it works perfectly in Firefox; pushing the text but not the background color and border of the highlighted para to the right, and the text of the normal paras to the right). In MSIE, the floated box pushes the highlighted para and the normal paras below the floated box, leaving a great white space to the right of the floated box. If anyone is describing this problem in the many pages I've searched, they're doing it in terms I can't (or don't yet) understand.
What do I need to do to make MSIE (6 and above; we're leaving 5 out of consideration) handle the float properly?
My doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
The CSS:
p {
max-width:800px;
text-align: left;
}
/* for the introductory text */
.highlight {
width: 94%;
margin: 0 auto; /* align for good browsers */
margin-bottom: 10px;
background-color: #FFFAFA;
color: black;
border-color: #8B795E;
border-width: 3px;
border-style: solid;
padding: 10px 5px;
line-height: 1.2em;
font-size: 0.8em;
text-align: left; /* counter the body center */
z-index: 10;
}
/* close the introductory text */
/* float left navbar */
#menu dl {width: 150px; float: left; padding: 0 0 10px 0; margin-right: 10px; background: #69c url(art/bottom.gif) no-repeat bottom left;}
#menu dt {margin:0; padding: 10px; font-size: 1.5em; font-weight:bold; color: #fff; border-bottom:1px solid #fff; background: #69c url(art/top.gif) no-repeat top left; }
#menu dd {margin:0; padding:0; color: #fff; font-size: 0.8em; border-bottom:1px solid #fff; background: #47a;
text-align: left; }
#gallery a, #gallery a:visited {color:#fff; text-decoration:none; display:block; padding:5px 5px 5px 20px;
background: #47a url(art/arrow.gif) no-repeat 10px 10px; width:125px; }
#gallery a:hover {background: #258 url(art/arrow2.gif) no-repeat 11px 10px; color:#9cf;}
/* end navbar */
The HTML:
<div id="menu">
<dl id="gallery">
<dt>Site Index</dt>
<dd><a href="#" title="name link">Home</a></dd>
<dd><a href="#" title="name link">About Peter</a></dd>
<dd><a href="#" title="name link">Columns and Articles</a></dd>
<dd><a href="#" title="name link">Handout Indexes</a></dd>
<dd><a href="#" title="name link">Topical Indexes</a></dd>
<dd><a href="#" title="name link">Comments and Answers</a></dd>
</dl>
</div>
<p class="highlight">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
[edited by: encyclo at 11:44 am (utc) on Sep. 22, 2007]
[edit reason] fixed side-scroll [/edit]
First, I would question why the <p> is set at a max-width of 800px. max-width is not fully supported. That being said, are you basically trying to attempt a two column layout, the left being navigation and the right content and also having a header? If so, you need to use more <div>, specifically one to contain your text and header. If this is correct, let me know and I will post a sample layout.
Marshall
It's actually a one-column page, with the navbar (which in all-of maybe 3 inches tall? At 800x600 on a 19" monitor) floated just under the header. (And not following the text or staying in the same place in the view port or anything. Its l'ike a graphic; just floated so it sits at the top-left of the main content.)
I have screen shots I can email you (or anyone) (or the URL for the testbed, which we call "the cave."
I've set max-width (knowing it wasn't supported in IE) because I'm still trying to learn how to set the text width. I've had complaints both ways: the text goes too long, it doesn't expand far enough, it doesn't fit the monitor {eye roll} -- and I'm trying to set it with a hard width for readability, but also a fluidity to get small when preferred.
The FireFox shows the menu sitting *on top* of the highlight box (background and border) and plain text, with the plain text wrapping left again below the menu. That is very attractive (to me and to my client), and that is the effect I want to have in IE. ({sigh} You know -- an actual standards-compliant float?! Argh.)
Thanks again,
Elenor
StickyMail me the url.
Marshall
I took a few minutes and narrowed it down to the cause: it is the class="highlight". There is something in its definition that is causing the text to drop to the bottom. I tried eliminating both the margin:0 auto; and text-align: left; , but to no avail. It came down to the width: 94%. Remove that and it works. Try it.
Some other stuff: since you're new to CSS, I'd thought I'd let you know that you can use the shorthand attribute of the border attribute, You probably know this since you're using shorthand in other places, but I'll mention it anyways. Instead of typing border-color: #8B795E;border-width: 3px;border-style: solid; you can type border: 3px solid #8b795e; the only trouble is remembering the right order.
Secondly, you're using z-index, but z-index doesn't do anything unless the element is positioned relatively, absolutely, or fixed.
Lastly, you're using a definition list for your navigation. Definition lists are used for definition-like purposes, and navigation isn't a purpose like that. It would make sense if you used an unordered list (<ul><li>) instead.
Yeah, right now, my DTD is a complete mess -- I'm just adding and tweaking as I work through the files... (I'm adding the "semi-exceptional" cases (elements) as I find them in the 230 documents I'm converting.)
Once I've gotten the DTD solidified/finished, I'll go back and organize it into a logical order and make it shorthand. Right now, I'm trying to just comment the things as I add them, and not worrying about the order. (Yeah, I've read -- the order makes a difference in the cascade -- so, I'll get to learn about that when I go to organize it! Tee hee hee!)
I thought z-index applied to floated items too. Good to know.
[quot]Lastly, you're using a definition list for your navigation. Definition lists are used for definition-like purposes, and navigation isn't a purpose like that. It would make sense if you used an unordered list (<ul><li>) instead. [/quot]
Yes, it's one of those "use my CSS-menu free" things. I haven't yet taken the time to deconstruct it and learn to make my own, and the colors worked so that's what I'm using at the moment.
Elenor
