Hey everyone, so I'm working on this page right now: http://katiemancine.com/LDA/agents.html Everything is all fine and dandy in Firefox but in IE, the links shift over to the middle of the paragraph. I know why it's doing this, but I don't know how to fix. CSS: /* CSS Document */ /* background elements */ body { background: #fff url(lda_background.jpg) repeat-y; margin: 0px; } #banner { margin-left: 0px; margin-top: 0px; } #paragraph { margin-top: 15px; margin-left: 380px; width: 535px; height: auto; } #bottom { margin-bottom: 0px; margin-left: 0px; } #links { position: absolute; margin-left: 160px; margin-top: 3px; padding-right: 50px; } h1 { font-family: Garamond; font-size: 16px; color: #000000; line-height: 120%; font-weight: 100; text-align: justify; } h2 { font-family: Garamond; font-size: 16px; color: #000000; line-height: 120%; font-weight: 100; text-align: justify; } ul { list-style-image: url('lda_bullet.jpg') } .floatleft { float:left; display:inline; padding: 0px 7px 1px 0px; } .floatright { float:right; display:inline; padding: 0px 0px 1px 7px; } .floatleftbio { float:left; display:inline; padding: 0px 7px 1px 0px; width: 100px; } .floatrightbio { float:right; display:inline; padding: 0px 0px 1px 7px; width: 100px; } HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="LDACSS.css" /> </head> <body> <div id="banner"> <img src="lda_banner.jpg"> </div> <div id="links"> <a href="/index.html"><img src="link1.jpg" border=0></a> <br> <a href="/agents.html"><img src="link2a.jpg" border=0></a> <br> <a href="/submission.html"><img src="link3.jpg" border=0></a> <br> <a href="/faqs.html"><img src="link4.jpg" border=0></a> <br> <a href="/clientlist.html"><img src="link5.jpg" border=0></a> <br> <a href="/comingsoon.html"><img src="link6.jpg" border=0></a> <br> <a href="/contact.html"><img src="link7.jpg" border=0></a> <br> </div> <div id="paragraph"> <h1> Our agents represent a range of projects, but we all have two things in common: <ul> <li><i>Each of us understands the way book publishing functions because we致e each been executive editors, or we致e founded publishing houses, or we致e written books ourselves.</i> Understanding the way editors, publicists, sales directors, and marketing directors think is encoded in our DNA.</li> <li><i>We understand that a book is a kernel that can grow into an international bestseller, into a movie, into a calendar, into a television series.</i> That痴 the power of a thrillingly told story, and that痴 what people expect from our submissions</li> </ul> <img src="lda_seperate.jpg"><br> <a href="lda_staff1.html"><img class="floatleftbio" src="lda_staffphoto1.jpg" border=0></a> <img src="lda_staffname1.jpg"><br> Looking for: literary fiction, historicals, thrillers, parenting books, history, psychology, politics, narrative nonfiction and memoirs.<br> Click photo for more details.<br> <img src="lda_seperate.jpg"> <br> <a href="lda_staff2.html"><img class="floatrightbio" src="lda_staffphoto2.jpg" border=0></a> <img class="floatright" src="lda_staffname2.jpg"><br> Looking for: science fiction, fantasy (both adult and young adult), parenting, business, thrillers and women痴 fiction.<br> Click photo for more details.<br> <img src="lda_seperate.jpg"> <br> <a href="lda_staff3.html"><img class="floatleftbio" src="lda_staffphoto3.jpg" border=0></a> <img src="lda_staffname3.jpg"><br> Looking for: gift books for adults, young-adult fiction and nonfiction, children痴 illustrated books and Judaica.<br> Click photo for more details.<br> <img src="lda_seperate.jpg"> <br> <a href="lda_staff4.html"><img class="floatrightbio" src="lda_staffphoto4.jpg" border=0></a> <img class="floatright" src="lda_staffname4.jpg"><br> Looking for: African-American fiction and nonfiction.<br> Click photo for more details.<br> <img src="lda_seperate.jpg"> <br> <a href="lda_staff5.html"><img class="floatleftbio" src="lda_staffphoto5.jpg" border=0></a> <img src="lda_staffname5.jpg"><br> Looking for: business books, how-to and practical books, spirituality, fantasy, Southern-culture fiction and military memoirs.<br> Click photo for more details.<br> <img src="lda_seperate.jpg"> <br> <a href="lda_staff7.html"><img class="floatrightbio" src="lda_staffphoto7.jpg" border=0></a> <img class="floatright" src="lda_staffname7.jpg"><br> David Austern is our assistant and an associate agent. He handles literary fiction and narrative nonfiction, specializing in pop-culture, sports, and male-interest works. <br> Click photo for more details.<br> <img src="lda_seperate.jpg"> <br> <a href="lda_staff6.html"><img class="floatleftbio" src="lda_staffphoto1.jpg" border=0></a> <img src="lda_staffname6.jpg"><br> Chandler Crawford of the Crawford Agency handles foreign rights. She has been in the business for over fifteen years and sells rights for several established agencies. <br> Click photo for more details.<br> </h1> </div> <div id="bottom"> <img src="lda_bottom.jpg"> </div> </body> </html> Okay so, I know if I take out #bottom and position everything as absolute it will fix my problem, but I need #bottom there, so first question: does anyone know how to fix an image to the bottom (I already have another image as the background so I can't do it like that). Second, if I leave #bottom in, and just position:absolute #paragraph, the #links will move into their right place, but then #bottom moves all the way up. I'm just looking for a simple solution. I write simple HTML no one ever complains except for IE. Also I just learned CSS, so if perhaps the solution is a simple one I wouldn't have known how to do it anyway since I am new to CSS. Any help would be FANTASTIC!
First, the menu: Why didn't you mark it up as a list? That would be the semantic solution. You have several syntax errors. The W3 validator will point them out. Position absolute is contra-indicated here. A float would be much better, and less fragile. Check out my sig line. There are a couple of pages that demonstrate the type of layout you're going for. #links { float: left; margin-left: 60px; display: inline; /*IE doubled margin hack*/ } Code (markup): Will take a look at your other issues in a moment. cheers, gary
OK, there are some html errors. They'll be simple to fix; nothing too bad. You will need to add a meta element, http-equiv to set the character set your editor is using. Right now you have windows-1252 which contains entity values that are not valid in the standard char-sets. You can declare it, but it would be better to use iso-8859-1 or utf-8 and declare the char-set. (Yeah, you're supposed to do that unless the server's response header supplies it—not always the case.) Do away with the background image; use the border property instead. Study my two column—apparent equal height demo. It should fit your needs exactly, except that you won't need the background image. cheers, gary
Alright I'm working on correcting the HTML errors, but there is one I do not know how to fix. Just wondering what this means I need to do:
I don't see the error you refernce, but I do see this: You have the list inside an h1 tag pair. That's not allowed. Your h1 starts on line 45 and is closed on line 91. That's the whole section, and is a misuse of a header tag. cheers, gary