IE Again

**Loxias** · Apr 19, 2004 19:02

Can someone check this out for me...for the most part it looks how I want in Firefox so I figure my code is somewhat sound. CSS validates as does xhtml Transitional. But in IE the main1 div drops down below the sidebar instead of staying up under the header.

Here's the link.

I want the sidebar containing navigation to continue to expand down while the main content stays up underneath the header.

Thanks for the help.
BTW...I know there is some useless (as of now) selectors but I don't see anything that should mess things up.

**albion7** · Apr 19, 2004 20:34

IE drops into quirks mode without a *strict* Doctype. Have you tried viewing your page with a html strict doctype - as opposed to xhtml? In quirks mode, IE gets the box model wrong, so your width hacks in your css may be confusing IE.

You may need to clear that float as well, but I'm getting kind of cross-eyed scrolling right and left trying to read your code.

A suggestion: Post a link to a page with a problem and leave the CSS in the head. It's a bit easier to look over your code, and download it to my desktop to play around with it. Kind of hard to make suggestions when I can't change things to zoom in on the problem.

HTH

**Loxias** · Apr 20, 2004 07:17

I was under the impression that IE goes into quirks mode with an improper doctype or an xhtml doctype with an xml declaration. The transitional doctype should be fine (and has worked well for other projects) but I'll check strict out. Let me get the page up and I'll edit it with a link.

**Paul O'B** · Apr 20, 2004 07:46

Originally Posted by albion7

IE drops into quirks mode without a *strict* Doctype.

Not True

IE only drops into quirks mode with no doctype, an incorrct doctype, or an html doctype without uri, or if content is above a doctype (such as the xml prologue).

Strict and transitional both use standards mode and not quirks mode.

It can be confusing and here's a good link:

http://www.ericmeyeroncss.com/bonus/render-mode.html

Paul

**Loxias** · Apr 20, 2004 08:06

Thanks a lot Paul...I got all excited when you posted expecting a fix!!

**Paul O'B** · Apr 20, 2004 08:26

Thanks a lot Paul...I got all excited when you posted expecting a fix!!

Sorry

I didn't want to butt in on Albions answer.

I'm just going offline but if there's no solution offered I'll have a look for you tonight (after 9pm).

(Just check your widths as ie adds about 3 px to floats and can cause elements to drop. (also ie will clear all floats in the document in some cases)

Paul

**Loxias** · Apr 20, 2004 08:41

Originally Posted by Paul O'B

Sorry

I didn't want to butt in on Albions answer.

I'm just going offline but if there's no solution offered I'll have a look for you tonight (after 9pm).

(Just check your widths as ie adds about 3 px to floats and can cause elements to drop. (also ie will clear all floats in the document in some cases)

Paul

NP...just got excited there for a sec.

**Paul O'B** · Apr 20, 2004 14:37

Hi,

I'm not quite sure if this is what you wanted to achieve but here it is anyway

Code:

<!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=iso-8859-1" />
<title>working</title>
<style type="text/css">
/* Main Attributes */
html body { 
 margin: 10px 0 10px; 
 font-size: 12px; 
}
body {
 background: #e9e9e9;
 font-family:  arial, "arial narrow", verdana, helvetica, arial, sans-serif;
}
a:link { 
 color: #330;
}
a:visited {
 color: #575423;
}
a:active {
 color: #8F4F2B;
}
a:hover {
 color: #036;
}
/* Main Attributes */
/* Div Information */
#container { 
 border-left: solid #000 1px;
 border-bottom: solid #000 1px;
 border-right: solid #000 1px;
 margin: 0 auto;
 background: #fff;  
 width: 762px; /*false value*/
 width/* */:/**/760px; 
 width: /**/760px;  
}
.space {
 clear: both;
 font-size: 1px;
 margin: 0;
 padding: 0;
 line-height: 1px;
 height: 1px;
}
/* Body Content and Sideboxes */
#main1 {
 margin: 5px 0px 10px 0px; 
 padding: 0;
 border-top: 1px solid #000;
}
#sidebox1 {
 margin: 0 5px; 
 padding: 0 2px 0 0;
 border-top: 1px dashed #000;
 border-left: 1px dashed #000;
 border-bottom: 1px dashed #000;
}
#sidebox2 {
 margin: 5px 5px; 
 padding: 0 2px 0 0;
 border-top: 1px dashed #000;
 border-left: 1px dashed #000;
}
/* Body Content and Sideboxes */
/* Top of Page */
#header {
 padding: 5px 0px;
 border-top: 1px solid #000;
 border-bottom: 1px solid #000;
 margin: 10px 5px;
 background-color: #FFFFFF;
}
#logo {
 background-color: #C3C3C3;
 border-right: 1px dashed #000;
 border-bottom: 1px dashed #000;
 width: 80px;
 height: 120px;
 float: left;
}
#sidebar {
 background:#ffffcc;
 float: right;
 width: 120px;
 margin: 0; 
 padding: 0 2px 0 0;
 border-left: 1px dashed #000;
 border-bottom: 1px dashed #000;
}
#links {
 background-color: #EBE800;
 color: #9F9E9E;
 padding: 0;
 border: 0;
 margin: 0;
}
/* Top of Page*/
/* Bottom of Page */
#footer { 
 margin: 5px 5px 10px 5px;
 border-top: 1px solid #000;
 padding: .85em 0;
 border-bottom: 1px solid #000;
 font-size: 80%;
 font-family: Verdana, Helvetica, sans-serif;
}
#bot1 {
 margin: 0;
 padding: 1px 0 0;
}
#bot2 {
 background: #888;
 margin: 0; 
 padding: 4px 0 0;
}
#copy {
 background: #888;
 text-align: center;
}
#compliant {
 float: left;
}
#design {
 float: right;
}
/* Bottom of Page */
/* Navigation */
#navbar{
 background-color: #EBE800;
 margin: 0;
 padding: 0;
 border: 0;
 width: 760px;
}  
#navbar li {
 background-color: #EBE800;
 margin: 0;
 padding: 0;
 list-style-type: none; 
}
#navbar li a {
 background-color: #EBE800;
 padding: 0 8px;
 font-weight: bold;
 text-decoration: none; 
}
#navbar li a:link {
 color: #9F9E9E;
 background-color: #EBE800;
 text-decoration: none;
}
#navbar li a:hover {
 color: #EBE800;
 background-color: #9F9E9E;
 text-decoration: none;
}
#tnav {
 position: absolute; 
 top: 0;
 right: 0;
 margin: 10px;
}  
#tnav li {
 margin: 0;
 padding: 0;
 list-style-type: none;
 border-right: 1px solid #330; 
}
#tnav li.non {
 border: none 0;
} 
#tnav li a {
 padding: 0 8px;
 font-weight: bold;
 text-decoration: none; 
} 
#tnav li a:hover {
 text-decoration: underline; 
}
#bnav {background: #888; 
 margin: 0;
 padding:.85em; 
 text-align: center;
} 
#bnav li {
 margin: 0;
 padding: 0 0 0 4px;
 list-style-type: none;  
 border-right: 1px solid #330; 
}
#bnav li.non {
 border: none 0;
}
#bnav a {color: #EBED4A; 
 text-decoration: none;
 font: bold 11px Arial, sans-serif;
 padding: 0 4px 0 0;
  } 
#bnav a:hover {
 text-decoration: underline; 
}
/* Navigation */
/* Headers */
h2 {
 color: #EBE800;
 font: bold 22px "Arial Narrow", Arial, sans-serif;
 margin: 4px 0;
 padding: 0;
}
#content h3, #sidebar h3 {
 font: bold 15px "Arial Narrow", Arial, sans-serif;
 margin: 0;
 padding: 0;
}
#sidebar h3 {
 color: #663;
 margin: 0 1em;
}
/* Headers */
/* Miscellaneous */
#header.img {
 border: 0;
}
#content p { 
 margin: 0.5em 0;
}
#right p { 
 color: #885;
 border-top : 1px solid #885;
 padding: 0.5em 0;
 margin: 1em;
}
.bold {
 font-weight: bold;
}
textarea {
 border: 1px solid #EBED4A;
}
input {
 border: 1px solid #EBED5A;
}
.button {
 background-color: #9F9E9E;
 color: #fff;
}
/* Miscellaneous */
#centre {
 margin-right:130px;
 margin-left:85px;
}
* html #centre {height:1%}/*defeat ie 3pixel jog */
</style>
</head>
<body>
<div id="container"> 
  <div id="top"> 
	<div id="logo"> </div>
	<div id="sidebar"> 
   Sidebar<br />
	  Navigation<br />
	  Navigation<br />
	  Navigation<br />
	  Navigation<br />
	  Navigation<br />
	  Navigation<br />
	  Navigation<br />
	  Navigation<br />
	  Navigation<br />
	  Navigation<br />
	  <div id="sidebox1"> Sidebox1<br />
	  </div>
	  <div id="sidebox2"> Sidebox2<br />
	  </div>
	</div>
	<div id="centre" > 
	  <div id="header"> header </div>
	  <div id="main1"> Main Content </div>
	  <p>Text will go here. </p>
	  <div id="main1"> Main Content </div>
	  <p>Text will go here. </p>
	  <div id="footer">Footer </div>
	</div>
  </div>
<br class="space" />
</div>
</body>
</html>

I'm sure you can play around with it to make it fit etc.

Paul

**Loxias** · Apr 21, 2004 05:31

Thanks Paul...I took a look at your 3 column fixed layout and started wondering if separating the layout into columns instead of rows would work out better. Looks like it will

Appreciate it.

User Tag List

Thread: IE Again

Thread Tools

Display

IE Again

Bookmarks

Bookmarks

Posting Permissions