CSS misalignment

[justinm]

Hey Everyone-

I am having issues centering an image that I am going to use for a background to a navigation bar. Basically, if I fix the pixels and the margins and stuff in CSS for Safari, it's off in Firefox and vice versa.

The site is http://mgreen.justinmang.com and it is the pink bar under the picture of the buildings. If it helps, it the #navbar div.

Thanks!

 

[fiercetiger224]

Have you tried changing absolute to relative for position? See if that helps.

Well, looking at it again, you shouldn't really be using left + top unless really needed. If you're putting it in a specific spot in all pages, the page's CSS + HTML structure should be identical on all pages. If you're trying to put a navbar with html links, you should just relative the position and absolute the links as a div class nested inside of the navbar div.

BTW, do you actually build websites? Or do you just take templates and mess around with it until it works?

 

[justinm]

I just took a template and customized it to my liking. I started with this. It's basically a WordPress blog that is setup as a static website. I'll try what you suggested tomorrow. Thanks!

 

[fiercetiger224]

Ahh ok. Well Wordpress is good. Might wanna toughen up on the CSS though.

 

[justinm]

Figured I try it now and it worked! Thanks!

 

[Cerebrus' Maw]

Using position:absolute can be dangerous, simply because browsers have different interpretations.

Your navbar has position:absolute, but the parent div (#main) has no position element, which means it will go to static by default. If a div whose position is absolute, has a parent whose position is static, the absolute position of said div will be the top left cornor of the browser window ( 0,0). Thats why your left and top values are so high.

If you put the #main to position:relative, the #navbar will use that div as its parent (EG: top left cornor of #main will be 0,0) .


However:

There should be easier means to center this image.

try:

#navbar {
margin:0 auto;
text-align:center;

Edit: I must learn to type faster. Well done on solving.

 

[justinm]

Thanks. Now I get why my values were so high.

 

[fiercetiger224]

Thanks. Now I get why my values were so high.

You learn something new everyday.