Mozilla CSS vs Explorer 6 CSS Display Block Issues

wbochar · Jan 15, 2004

If I use the code quoted below, I get a clean interface in IE 6. The header is the right size and the tabnav buttons are attached to the header/title bar. In an Mozilla type browser the layout goes to the birds.

In IE6 if I have a container DIV with a width set, any other content inside of that div (text, other divs) seem to affect the size. What I mean is that a border around a container object will expand around the items between the containers div tags. In mozilla types it seems that the container minimally affects the layout and doesnt take what is between the tags as content that will affect its size.

How do I make something that works reliably between both browser types?

-wbochar

------------------------------------------------------
HTML
------------------------------------------------------
<html>
<head><title>::Futurstate::</title>
<LINK REL=STYLESHEET TYPE="text/css" HREF="futurstate.css">
</head>
<body>
<CENTER>
<div id="Pagebox">
<div id="titlebar">Header Bar</div>
<div id="tabnav">
<ul>
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 2</a></li>
<li><a href="#">Button 3</a></li>
<li><a href="#">Button 4</a></li>
</ul>
</div>
</div>
</body>
</html>

--------------------------------------------
CSS
--------------------------------------------

body
{
color: #000000;
font-family: Arial;
font-size: 10px;
scrollbar-face-color: #ffffff;
scrollbar-shadow-color: #666666;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #666666;
scrollbar-darkshadow-color: #ffffff;
scrollbar-track-color: #ffffff;
scrollbar-arrow-color: #666666;
background: #ffffff;

}

#PageBox
{
width: 600;
}

#titlebar
{
font-family: trebuchet ms;
background: #ffffff;
font-variant: small-caps;
width: 100%;
color: #666666;
font-size: 32px;
background-image: url(pcb-title1.jpg);
background-repeat: no-repeat;
border: 1px solid;
border-color: #666666;
padding-right: 20px;
text-align: right;
letter-spacing: 10px;
valign-font: middle;

}

#tabnav
{

width: 100%;
}

#tabnav ul
{
float: right;
height: 30;
}

#tabnav li
{
padding: 0px;
display: inline;
list-style-type: none;
}

#tabnav a:link, #tabnav a:visited
{
background: #666666;
font-size: 10px;
line-height: 14px;
font-weight: bold;
padding: 2px 10px 2px 10px;
margin: 0px;
border: 1px solid #666666;
text-decoration: none;
color: #ffffff;
}

#tabnav a:link.active, #tabnav a:visited.active
{
background: #fff;
color: #666666;
}

#tabnav a:hover
{
background: #fff;
color: #666666;
}

ChrisHunt · Jan 15, 2004

You may find the "box model hack" helps:

http://tantek.com/CSS/Examples/boxmodelhack.html

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

Vragabond · Jan 16, 2004

Ok, here's the code that will basically make it:

Code:

<html>
 <head>
  <title>::Futurstate::</title>
  <style>
body {
    color: #000000;
    font-family: Arial, sans-serif;
    font-size: 10px;
    scrollbar-face-color: #ffffff; 
    scrollbar-shadow-color: #666666; 
    scrollbar-highlight-color: #ffffff; 
    scrollbar-3dlight-color: #666666; 
    scrollbar-darkshadow-color: #ffffff; 
    scrollbar-track-color: #ffffff; 
    scrollbar-arrow-color: #666666;
    background: #ffffff;
}

#PageBox {
	width: 600px; /* added units */
}

#titlebar {
	font-family: &quot;trebuchet ms&quot;; /* added quotation marks - fonts with spaces in names should be enclosed in quotation marks */
	background: #ffffff;
	font-variant: small-caps;
	/* took out the width, not neccessary, was causing a box model problems */
	color: #666666;
	font-size: 32px;
	background-image: url(pcb-title1.jpg);
	background-repeat: no-repeat;
	border: 1px solid;
	border-color: #666666;
	padding-right: 20px;
	text-align: right;
	letter-spacing: 10px;
	vertical-align: middle; /* no property with name valign-font:, changed to vertical-align: */
}

#tabnav {
	width: 100%; /* not neccessary to declare, divs are 100% at default */
}

#tabnav ul {
	float: right;
	height: auto; /* added units */
	margin: 0px;
	padding-left: 0px;
	/* ul have by default some margins (that's why Mozilla and Opera pushed the menu further down. ul has by default a padding-left at 40px to generate identing. We nullified those values. */ 
}

#tabnav li {
	padding: 0px;
	display: inline;
	list-style-type: none;
}
    
#tabnav a:link, #tabnav a:visited {
	background: #666666;
	font-size: 10px;
	line-height: 14px;
	font-weight: bold;
	padding: 2px 10px 2px 10px;
	margin: 0px;
	border: 1px solid #666666;
	text-decoration: none;
	color: #ffffff;
}

#tabnav a.active:link, #tabnav a.active:visited { /* altered from incorrect a:link.active to correct syntax a.active:link */
	background: #fff;
	color: #666666;
}

#tabnav a:hover {
	background: #fff;
        color: #666666;
}

  </style>
 </head>
 <body>
  <center>
   <div id=&quot;PageBox&quot;>
    <div id=&quot;titlebar&quot;>Header Bar</div>
    <div id=&quot;tabnav&quot;>
     <ul>
      <li><a href=&quot;#&quot;>Button 1</a></li>
      <li><a href=&quot;#&quot;>Button 2</a></li>
      <li><a href=&quot;#&quot;>Button 3</a></li>
      <li><a href=&quot;#&quot;>Button 4</a></li>
     </ul>
    </div>
   </div>
  </center>
 </body>
</html>

I've tackled individual problems as comments in the CSS code. The html did not have many mistakes: there was no closing tag for <center> and <div id="Pagebox"> was used instead of correct <div id="PageBox">. Without the doctype declaration this does not matter, but specifying a doctype (which is strongly advisable) will make classes and ids case sensitive.

You mentioned Mozilla not responding to changes in container sizes. It does respond but sometimes people believe something is inside a container but actually isn't. If you add borders to all your elements (or just inspect your code with Mozilla's built-in DOM Inspector) you will notice that your #tabnav is actually 0px high and holds nothing. In IE however, it (as opposed to what standards say) holds the menu. The W3C standards say that floating and absolutely positioned elements are taken out of the normal flow and as such do not contribute to container's size. Meaning that when you put floating elements inside a container, they will not expand it's height.

One last thing worth mentioning is the Box Model problem. Read about this one (and how to overcome it) in this article:

http://tantek.com/CSS/Examples/boxmodelhack.html

wbochar · Jan 16, 2004

Thanks guys; Much appreciated

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Mozilla CSS vs Explorer 6 CSS Display Block Issues

wbochar

IS-IT--Management

ChrisHunt

Programmer

Vragabond

Programmer

wbochar

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor