Previous Message
Next Message

Centering my menu - IE fine - Firefox not

Sent by Sam Leathers on 12 September 2005 06:06


the problem is firefox doesn't recognize text-align: center for div
elements (this is because they aren't text, and css has better methods
for centering that text-align, so really it's IE that's rendering it wrong)

Anyways try this:

#menu {
position: relative;
text-align: left;
width: 820px;
     border-top: medium solid black;
     border-bottom: medium solid black;
      margin: auto;
      padding: 10px;
}

What the above does, is define how wide the element is, and then center
the element itself with margin:auto; the text-align: left is there
because ie6 will see center it with the static width and margin:auto and
then try to center it again if it sees text-align: center (which throws
your menu way over to the right)

The one thing I noticed, is that the bars above and below the menu are
shrunk when the width is given. To prevent this, I would have a nested
div, with the outside one being the whole width, and having the lines
above and below, and the inside one would be the exact width of the
menu, with the centering code in it.

There are other methods for centering divs, that just happens to be the
one I use all the time.

Good Luck,
Sam

Sue Forrester wrote:
> This is my first post here, so I hope it's clear and
> following the rules. And I just know some very basic
> CSS, but know it's what I want to use 'cause it's
> best.
> 
> I'm working on http://www.oldpinefootwear.com. I don't
> know enough so far to figure out what I've gotten
> wrong or need to add, but my menu div centers just
> fine in IE, but is left in Firefox (I'm not ready to
> tackle the other browsers yet).
> 
> Here's what I have in the stylesheet:
> #menu {
>      border-top: medium solid black; 
>      border-bottom: medium solid black; 
>       margin: 0;
>       padding: 10px;
>       text-align: center;
> }
> 
> and this is what's in my HTML:
> <div id="menu">
> 	<!--webbot CLIENTSIDE 
> bot="Ws4FpEx" MODULEID="'oldpinenav
> (Project)\oldpinetopnav_off.xws'" 
>  PREVIEW="&lt;img
> src='menu/oldpinetopnav.gif?041A0975'
> editor='Webstyle4' border='0'&gt;" 
>  startspan  --><script
> src="xaramenu.js"></script><script Webstyle4
> src="menu/oldpinetopnav.js"></script><noscript><img
> src="menu/oldpinetopnav.gif?041A0975"
> editor="Webstyle4"></noscript><!--webbot 
> bot="Ws4FpEx" endspan i-checksum="48027"  -->
> </div>
> 
> The validator hates my Xara drop down menu, but I
> fixed the other errors it pointed out.
> 
> I'm hoping this is something simple and that someone
> will point it out and tell me what to do.
> 
> Oregon Sue
> 
> __________________________________________________
> Do You Yahoo!?
> Tired of spam?  Yahoo! Mail has the best spam protection around 
> http://mail.yahoo.com 
> ______________________________________________________________________
> css-discuss [EMAIL-REMOVED]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> 

-- 
in life, direction is everything, distance is secondary--so keep your
bearings!

[KJV] Luke 5:16 And he withdrew himself into the wilderness, and prayed.

Get Firefox!!!
http://www.spreadfirefox.com/?q=affiliates&amp;id=13731&amp;t=1
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread:

Possibly related: