Menu sits correctly in Firefox but not IE v 9 :-(

HTML & CSS
1

Buongiorno from 3 degrres C wetherby UK :slight_smile:

On this page http://tutorial.davidclick.com/2menu.html & illustrated here http://i216.photobucket.com/albums/cc53/zymurgy_bucket/aligned-middle_zps184ac1ea.jpg ive positioned a horizontal nav dead in the centre exactly how i wanted it in Firefox but in IE 9 the menu is aligned left & the underscore on hover effect has been striiped out :frowning:

I know ive been struggling with positioning a nav in the middle & Ive poured over previous posts. I was quite elated when i did it without having to post a question but in IE all the work gets undone :frowning:

Please could some one give me an insight into whats causing th balls up.

Grazie tnato,
David

2

Make sure IE 9 is not in quirks mode. Press F12 to open the console, then make sure the browser mode is IE9 Compat View and the Document mode is “Standards”

EDIT: In IE 10 I had to coerce it back to IE 7 standards mode to get the error you’re observing. So I’m guessing you have broken pages mode turned on.

3

I see the menu centered in IE8 and IE9. No problem.

FYI: In your code, the <link> tag belongs between the <head> tags, not above them.


<html>
<link rel="stylesheet" type="text/css" href="/2menu.css">
<head>
</head>
<body>

should be

<html>
<head>
<link rel="stylesheet" type="text/css" href="/2menu.css">
</head>
<body>

Also, the “comment” lines are not properly formed. The open-comment mark is broken.


<! -- header div ends -->

should be

<!-- header div ends -->

Cheers.

4

Zygoma,

In your CSS file I see this code for your menu.

#centre
{
text-align:center;
margin:20px;
}

Remember that when you create a div, you must tell the browser how wide it is, how tall it is, and any other attribute that you want it to have. In your code you have told the browser to align the text within the div in the center. Your margin property is not written correctly. If you are only going to have one value (the 20px) you must specify which margin (i.e. top, right, left, bottom).

You could right it like this

#centre
{
margin-top: 20px;
}

Or

#centre
{
margin: 20px 0 0 0;
}

Try this code to center that div that contains the menu

#centre
{
Width: 800px;
Height: 50px;
margin: 0 auto 0 auto;
text-align:center
}

Hope that helps,

Shawn

5

smanaher,

When only one margin value is specified, it applies to all 4 sides.

It is generally not recommended to set a fixed height on an object unless such a fixed height is required by the design of the page, such as an image, otherwise the object will be unable to increase in height in response to the users browser settings.

Zygoma’s code assigns margins correctly.

6

hey guys thanks for feedback, going to apply the fixes 2 moro :slight_smile:

7

Are you sure about that? This has not been my experience. If you specify margin-top,left,right or bottom, that is where the margin is applied. If you specify values (even 0) after the broader margin (i.e. margin: 1px 2px 0 20px;) then top, right, bottom, left are applied accordingly.

Edit: Just figured out why you said that. I think you misinterpreted what I wrote to the OP. Yes if you just write margin and then one value it will apply to all sides. Note that in my statement (If you are only going to have one value (the 20px) you must specify which margin (i.e. top, right, left, bottom) I mentioned that you must tell the browser which side you are talking about.