Wandering nav bar

Discussion in 'CSS' started by keress, Feb 13, 2007.

  1. #1
    I had this site about finished up, had been checking on it in four browsers, everything was looking good. There was one more pesky but nonessential problem I was checking out and suddenly everything's gone fluey. My left navbar has shifted over about 120 pixels from the left edge. I've driven myself nuts looking for the problem, but can imagine what could be off.

    If anybody has any bright ideas on what could be wrong I'd be soooo grateful.

    It looks okay in IE7, but is breaking up in everything else.

    http://www.sisterbecky.com/Med-X/index.html
    the css is at http://www.sisterbecky.com/Med-X/grid-caddy.css
     
    keress, Feb 13, 2007 IP
  2. unitedrokz

    unitedrokz Peon

    Messages:
    86
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #2
    in your css alter this line in your .contact class

    from
    left: 0px;

    to
    left: -40px;

    *-40px might not be the exact number needed - i didnt have time work through it properly to find the exact amount...but it should be pretty close to that.

    hopefully that works for you
     
    unitedrokz, Feb 14, 2007 IP
  3. keress

    keress Member

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #3
    That shifts it over okay for Firefox, Netscape and Opera, but IE shows the navbar as wandering to the left -40 like you'd expect. Also the first three show a blank spot at the bottom I can't account for.

    The aggravating thing is that it was working. There must be some small thing I inadvertently changed that made it all fall apart.

    I'm getting really frustrated with CSS. I could have put this page together in half an hour with tables, and I'm wasting hours with CSS. I can't be the only one. This is supposed to be the way things are going, but if it takes this much learning curve, and can have such inobvious pitfalls, it's not likely people are going to put up with it for that long. We'll all have been spending tons of our time learning something bound for a quick extinction.
     
    keress, Feb 14, 2007 IP
  4. Dan_A

    Dan_A Peon

    Messages:
    65
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #4
    First, use a complete doctype not to use quirks mode.
     
    Dan_A, Feb 14, 2007 IP
  5. unitedrokz

    unitedrokz Peon

    Messages:
    86
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #5
    good pick up!

    that should hopefully at least put ff and ie looking closer to the same.
     
    unitedrokz, Feb 14, 2007 IP
  6. keress

    keress Member

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #6
    I added the coding DW always generates. I assume that's what you mean. I don't see that it made any difference.

    I went through and compared the .css from this site with a similar one I based it on, which does work correctly. I tested everything I could find that was at all different.

    Why in the world is that navbar deciding to sit 40 pixels to the right? It's being told to sit at zero.
     
    keress, Feb 14, 2007 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #7
    Throw DW out, and learn to hand code. It's faster and less error prone.

    Do this
    
    ul {
        margin: 0;
        padding: 0;
        }
    Code (markup):
    cheers,

    gary
     
    kk5st, Feb 14, 2007 IP
  8. keress

    keress Member

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #8
    It was the padding 0px: that was missing. Thanks a million. I already had the margin 0px; in there (apparently it makes no difference if it's 'margin 0;' or 'margin 0px;' which DW generates). I still don't see the logic on why the 'padding 0' has to be there.

    Sorry, but I can't imagine hand coding being faster. I'm primarily a visual thinker, so WYSIWYG editing is liberating, and with my tendency towards minor typos, hand coding takes a huge amount of time. My impression of hand coded work is that it tends to be less visually appealing. Maybe that's changed.
     
    keress, Feb 15, 2007 IP
  9. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #9
    As I answered more fully in another forum (it's not nice to cross post), The specs leave it to the UA vendor whether and how to indent lists. Opera and IE choose to use a left margin, while the Moz/Gecko family and Konqueror/Safari use left padding. You need to deal with both.

    The hand coder relies on his own skills rather than a stupid, and I mean that literally, application. When you know what you're doing, a document is coded just as fast as you can enter the content. DW is totally incapable of creating a sane stylesheet. That takes actual thought. The wysiwyg editor makes it possible for the unskilled to manage something, but you will be mired in rigid, fragile and obsolete code.

    Design and coding are two different things. Hand the coder a pleasing design and you'll have a pleasing page, else, :shrug:

    cheers,

    gary
     
    kk5st, Feb 15, 2007 IP