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!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS won't align in IE

Status
Not open for further replies.
TheDust

TheDust

Programmer
Aug 12, 2002
217
US
I'm having a problem getting my menu items to fit into a fixed width area in IE. It's pretty simple really...

I have a DIV container called "mainFrame" that is 800px wide. Inside of "mainFrame" I have two 400px-wide menu items (more to be added later) that should cozy up to each other. Overall, the list should work similar to the navigation at alistapart.org.

The layout I have looks fine in Mozilla, but in IE the second menu item breaks to the second line, even though there are 400 pixels of space for it to fit. You can see this in action here:
It seems when I change the width of "mainFrame" to 802px instead of 800px it looks great in IE, but then those 2 extra pixels are visible in the layout. Any ideas for how to fix this?

Here is the relevant code:

CSS:
Code: 
body {
	margin:0;
	padding:0;
    background-image: url(../images/bg.gif);
	text-align:center;
}
#mainframe {
	border-left:1px solid white;
    border-right:1px solid white;
    width:800px;
    height:100%;
    background:white;
	margin-left:auto;
	margin-right:auto;
}
#menu {
	padding:0;
    margin:0;
}
#menu UL {
	padding:0;
    margin:0;
    CLEAR:left;
    LIST-STYLE-TYPE: none;
    TEXT-ALIGN:center;
}
#menu UL LI {
	padding:0;
    margin:0;
    DISPLAY:block;
    FLOAT:left;
}
#menu UL LI A {
	padding:3px 0px 3px 0px;
    margin:0;
    BACKGROUND: #00006B;
    COLOR: #ffffff;
    DISPLAY: block;
    FONT-WEIGHT: bold;
	text-decoration:none;
    TEXT-ALIGN: center;
	width:400px;
}

HTML:
Code: 
<body>
<div id="mainFrame">
  <div id="loggedIn"><asp:literal id="loggedIn" runat="server" /></div>
  <img src="../images/banner.jpg"><br />
  <div id="menu">
    <ul>
      <li id="one"><a title="Clients" href="clients.aspx">Clients</A></li>
      <li id="two"><a title="Database Admin" href="databaseAdmin.aspx">Database Admin</A></li>
    </ul>
  </div>
</div>
</body>
 
Sort by date Sort by votes
Should work, though you don't need UL/LI stuff at all.

Try with DTD line at the top (<!DOCTYPE blah blah... >).
 
Upvote 0 Downvote
I think this is happening because of ths different ways that IE and other browsers trat the box model.

When you specify a width in IE it means the width of the whole div including margins, borders and padding.
Whereas width in Mozila is simply the width of the content of the div and does not include the width of the borders etc.

You can use Tantek's Box model hack (outlined on A List Apart) to get around the problem.

I'll have a fiddle later.

When I've done that, I'll take a look at the CSS ;-)

 
Upvote 0 Downvote
The box model hack is a hack for IE5.
IE5 misinterprets the box model as I outlined above.
IE6 *should* interpret the box model correctly (in the same way as Mozilla and Opera etc do).

If we include the XML prologue at the top of our page
Code: 
<?xml version="1.0" encoding="iso-8859-1"?>
it forces IE6 to go into "quirks mode". This is presumably to make code written for IE5 work in IE6. This means that when we assign a width to a DIV we get all sorts of problems as the different browsers work differently.
In quirks mode your page works OK in IE6 because it doesn't count the borders in the width of #mainFrame. However if we leave the XML prologue out your page doesn't work in IE6 as the browser is now interpreting the width of a box as it should (in the same way as Mozilla etc).

So....

Let's get rid of the XML prologue.
It's now a simple matter of doing the math and making the width of #mainFrame enough to accomodate the menu INCLUDING the border. Since there is a 1px border on the left and right of #mainFrame, the space available for #menu is 798px and not 800px.

Right, your CSS.
It didn't work in Mozilla, Opera or Firefox and it only worked in IE6 when in quirks mode (emulating IE5).

Here is a revised version that works in IE6, Mozilla, Firebird and Opera. It also seems to work in IE6 with quirks mode on.
It uses your original style rules, with some tweaks. Note however that you have a mix of upper and lower case tags. If you are going to the trouble of using a list to do your menu, I guess you are wanting the document to be XHTML compliant. If this is the case, your tags should be lowercase. I'll leave that to you though.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>Demo page</title>

<style type="text/css">
html body {
margin:0;
padding:0;
background-color: #333;
text-align: center;
}

#mainFrame{
width: 800px;
margin: 0 auto;
background-color:#fff;
border-left:1px solid white;
border-right:1px solid white;
}

#menu {
    padding:0;
    margin:0;

}
#menu UL {
    padding:0;
    margin:0;
    clear:left;
    LIST-STYLE-TYPE: none;
    TEXT-ALIGN:center;
}
#menu UL LI {
    padding:0;
    margin:0;
	float:left;
}
#menu UL LI A {
    padding:3px 0px 3px 0px;
    margin:0;
    BACKGROUND: #00006B;
    COLOR: #ffffff;
    DISPLAY: block;
    FONT-WEIGHT: bold;
    text-decoration:none;
    TEXT-ALIGN: center;
    width:400px;
}
</style>
</head>


<body>
<div id="mainFrame">
  <img src="../images/banner.jpg"><br />
		<div id="menu">
			<ul>
				<li id="one"><a title="Clients" href="clients.aspx">Clients</a></li>
				<li id="two"><a title="Database Admin" href="databaseAdmin.aspx">Database Admin</a></li>
			</ul>
		</div>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum ac turpis ut tellus viverra posuere. Mauris sem nibh, auctor id, tristique in, commodo sed, justo. Aenean hendrerit libero sed elit. Vivamus ligula. Suspendisse arcu. Sed dapibus nulla vel dolor. Curabitur metus lorem, ultrices egestas, adipiscing at, hendrerit ac, ante. Vivamus sollicitudin. Nam ut ante eu ipsum ultricies condimentum. Aliquam at felis. Cras tempor quam pretium pede. Morbi nisl.</p>
</div>
</body>
</html>



You should include a hack to avoid probs in IE5 too. But I can't do that now since my daughter is trying to eat my laptop!

I am writing this under stress (see above about daughter) if I have made any errors, please point them out!

 
Upvote 0 Downvote
Thanks a lot! The code you've posted works great, but now for some reason I can't get "mainFrame" (the wrapper DIV) to have a height of 100% anymore. I can't get "mainFrame" to stretch down to the bottom of the browser. Do you know what part of the CSS is preventing this? You omitted the height attribute from your code, but when I add it back in, it doesn't work anymore... it did before.

Any ideas?
 
Upvote 0 Downvote
Making the div stretch verticaly is a bit tricky.

The height command only works in Internet Explorer and doesn't work outside of Quirks mode (which we are avoiding). Anyway, height=100% means "make the div height 100% of it's content.

I've done this before with JavaScript to detect the height of the window and resize the main div accordingly.
But it's a horrible thing!

I normally don't like forcing the div to be the full height of the window anyway. I prefer layouts that expand/contract with their content.
There must be a nice, neat way to do this though. Try googling a bit, and take another look on A List Apart.
If I can think of anything I will post it later.


 
Upvote 0 Downvote
Hmmm, this is weird. That hack works for IE, but now I've lost the center alignment in Mozilla. The height in Mozilla didn't change... but it's now aligned left.
 
Upvote 0 Downvote
The hack works for IE becuase it has "height:100%" in it.
IE interprets this to mean that the DIV it is applied to is 100% of it's parent.
This is incorrect.
Height should mean the height of the element within.

I tried that hack quickly. It didn't work.
Not looked into why though, as it seems like a real fudge!

 
Upvote 0 Downvote
Lots of my CSS doesn't seem to link up right using the DOCTYPE you gave me. If I take out the DOCTYPE the styles show up fine. Some classes are being applied and others aren't... this is really strange. Ever heard of that?
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
822
pmonett
pmonett
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
825
spamjim
spamjim
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
646
PeDa
PeDa
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller

Part and Inventory Search

Sponsor

Back
Top