CSS Menu not working - Page 4

User 3004957 Photo


Registered User
851 posts

As far as designing for browsers goes, the best bet is still to make your pages compliant to the extent they will render near as dammit (pardon my language) in all major browsers. Using deprecated or proprietary code as a means to an end is a recipe for trouble. All the sites I create look almost identical in every major browser because I actively avoid anything that may cause problems. Partly this stems from using Opera as my default browser and all my early sites being designed with an editor that relied heavily on Internet Explorer for coding and previewing/rendering (CCHTML editor also uses the Trident engine for previewing) which meant those sites looked great in the editor's preview and a complete disaster in Opera. I then worked backwards until the sites viewed correctly in both. This required ditching that older editor for something a little more compliant. I use two editors now as no one application satisfies my requirements. No problems though as the transition is almost seamless. One of those editors has the choice of built-in IE or Mozilla preview with the click of an icon, a very handy tool that means I don't have to keep opening the pages in external browsers to check rendering, something I do only once I think I am nearly there with the design.

Anyway, long story short; I avoid anything that will mean only certain browsers will render the site properly. This isn't difficult and just requires a little caution if trying to do something really fancy.

Dave
http://www.davethompson.co.nz
User 795047 Photo


Registered User
15 posts

Why can't I get my CSS menu to center?
I've done what it says in the help pdf and even written a new page to test it without any other content but it still sticks to the left margin. Can someone help me please?
In the menu-menu.css file I have added the following:-
.center
{
margin-left:auto;
margin-right:auto;
}

In my html page I have the following:-

<link rel="stylesheet" type="text/css" href="css/menu-menu.css" media="screen">

</head>

<body>
<div class="center">
<ul class="menu-menu">
<li class="first"><a href="home.html">home</a></li>
<li><a href="contact">contact</a></li>
</ul>
</div>

</body>
</html>

This is exactly as it was generated by the CSS menu designer. I've tried it in Opera, Firefox and IE8.

Thanks.

John.
User 364143 Photo


Guest
5,410 posts

John, add a width to the element and it will center. As far as it is concerned, it is center filling the whole width of the screen.

.center
{
width: 200px;
margin-left:auto;
margin-right:auto;
}
CoffeeCup... Yeah, they are the best!
User 795047 Photo


Registered User
15 posts

Oh yes, that's better, thanks.

John.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.