CSS misalignment

Discussion in 'Web Design and Development' started by justinm, Aug 10, 2009.

  1. justinm macrumors member

    Joined:
    Aug 15, 2007
    Location:
    Orlando FL
    #1
    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!
     
  2. fiercetiger224 macrumors 6502a

    Joined:
    Jan 27, 2004
    #2
    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?
     
  3. justinm thread starter macrumors member

    Joined:
    Aug 15, 2007
    Location:
    Orlando FL
    #3
    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!
     
  4. fiercetiger224 macrumors 6502a

    Joined:
    Jan 27, 2004
    #4
    Ahh ok. Well Wordpress is good. Might wanna toughen up on the CSS though. ;)
     
  5. justinm thread starter macrumors member

    Joined:
    Aug 15, 2007
    Location:
    Orlando FL
  6. Cerebrus' Maw macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #6
    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:
    Code:
    #navbar {
    margin:0 auto;
    text-align:center;
    

    Edit: I must learn to type faster. Well done on solving.
     
  7. justinm thread starter macrumors member

    Joined:
    Aug 15, 2007
    Location:
    Orlando FL
    #7
    Thanks. Now I get why my values were so high.
     
  8. fiercetiger224 macrumors 6502a

    Joined:
    Jan 27, 2004
    #8
    You learn something new everyday. :D
     

Share This Page