Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Location
    Sydney
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Css problems with navigation

    Hi
    I have a half built test site up but my navigation band below header is misbehaving in all but firefox.

    The nav is Coded as lists (not positioning correctly) and with anchors (that are taking on some of the general anchor characteristics).
    The drop down may be another issue?)

    Here is the home page (not all pages are linked)
    http://www.drawtheline.com.au/test/new.html
    Also the relevent css.
    Hope you can help.
    Rob

    #menuBar { display: block; margin-bottom: 0; position: relative; top: 0; left: 0; right: 0; border-left: 1px solid black; height: 22px; width: 100%; overflow: hidden; background-color: white; background-image: url(../new-images/nav.jpg); background-repeat: repeat-y; background-position: left top; padding-bottom: 2px; }


    .menuHeader { color: #3c3c3c; font-size: 1em; font-family: Arial, Helvetica, sans-serif; font-weight: normal; text-decoration: none; white-space: nowrap; text-align: center; margin: 0; width: 120px; height: 22px; overflow: hidden; display: block; float: left; list-style-type: none; }
    #menuBar ul { list-style-type: none; display: block; }
    #menuBar ul li{ text-align: center; margin: 0; width: 120px; height: 23px; overflow: hidden; display: inline; float: left; padding-top: 0.25em; }
    #menuBar ul li a { color: #ebebb7; text-decoration: none; width: 120px; height: 22px; display: block; }
    #menuBar ul li a:visited { color: #3c3c3c; font-weight: normal; text-decoration: none; width: 120px; height: auto; display: block; }
    #menuBar ul li a:hover, #menuBar ul li a:active { color: #996; background-color: #fff; width: 119px; height: 100%; border-top: 1px solid #3c3c3c; border-right: 2px solid #3c3c3c; display: block; }
    .currentpage { background-image: url(../new-images/current.gif); background-repeat: no-repeat; background-position: right top; overflow: hidden; }

    .menuDrop { position: absolute; visibility: hidden; z-index: 1000; width: 160px; height: auto; margin: 0 0 0 6px; font-size: 90%; font-family: Arial, Helvetica, sans-serif; background-color: #ebebb7; text-align: left; border-bottom: 1px solid #3c3c3c; border-left: 1px solid #3c3c3c; }

    .menuDrop a {color: #3c3c3c; display: block; padding: 3px 3px 3px 20px; text-decoration: none
    ; width: auto; border-bottom: 1px solid #fff; }
    .menuDrop a:visited { color: #616161; width: auto; padding: 3px 3px 3px 20px; border-bottom: 1px solid #fff; display: inherit; }

    .menuDrop a:hover, .menuDrop a:active { color: #fff; background-color: #996; width: auto; padding: 3px 3px 3px 20px; display: inherit; }
    .illodrop { background-color: #dadaa2; display: block; }

    .listdrop { background-color: #dadaa2; width: 139px; margin-left: 20px; border-left: 1px solid #fff; }
    #content { background-color: white; position: relative; top: -2px; left: 0; width: 660px; height: 100%; float: left; min-height: 650px; margin-bottom: 0; padding-top: 5px; padding-bottom: 20px; border-left: 1pt solid black; }
    #content h1 { color: #996; font-size: 110%; font-weight: 600; margin: 0.67em 0; padding-right: 15px; padding-left: 10px; }
    #content h3 { color: #996; font-size: 105%; font-weight: 500; font-style: italic; margin-top: 0.3em; margin-bottom: 0.3em; padding-right: 15px; padding-left: 10px; }

    #content p { color: #979797; line-height: 160%; margin-bottom: 0.3em; padding-right: 15px; padding-left: 10px; }
    #content h2 { color: #666; font-size: 100%; font-weight: 700; margin: 0.37em 0; }
    .flt { color: #979797; width: 310px; float: left; margin-left: 15px; padding-bottom: 20px; list-style-type: square; list-style-position: outside; display: block; }
    #content ul li { margin-left: 12px; padding-bottom: 3px; }
    .widelist { color: #979797; width: auto; float: left; margin-left: 15px; padding-bottom: 20px; display: block; }

    .main-pic { float: right; clear: none; margin-top: 12px; margin-right: 20px; padding: 25px; border: dotted 1pt black; }

    .recent-pic { width: 70px; height: 70px; float: left; clear: left; margin-top: 1px; border-style: none; }
    #text { color: #808080; font-size: 90%; position: relative; width: 550px; height: 30px; float: right; clear: right; min-height: 30px; padding-top: 10px; padding-right: 25px; border-bottom: 1px dotted black; display: block; }

    #footer { font-size: 90%; background-color: white; background-image: url(../new-images/nav.jpg); background-repeat: no-repeat; background-position: left bottom; text-align: center; position: relative; top: -2px; width: 715px; clear: both; padding: 4px 5px 20px; border-top: 1px dotted #979797; border-left: 1px solid black; }
    td { }
    p a:link { color: #996; text-decoration: underline; }
    p a:visited { color: #505050; text-decoration: none; }
    p a:hover, p a:active { color: #669; text-decoration: none; }

  • #2
    New to the CF scene
    Join Date
    Aug 2007
    Location
    America
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The first thing I'm noticing is that the font gets way bigger when I switch to IE. I think you might want to try setting a standard font-size for all of your elements. This probably won't solve all of your problems, but it should help.

  • #3
    Regular Coder
    Join Date
    Feb 2007
    Location
    Seattle
    Posts
    153
    Thanks
    5
    Thanked 9 Times in 9 Posts
    Well, while not the prettiest horizontal nav I've seen, it seems to function the same in FF and IE7. Text is larger in IE; other than that what is it you want to change?

  • #4
    New to the CF scene
    Join Date
    Jul 2007
    Location
    Sydney
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by garydarling View Post
    Well, while not the prettiest horizontal nav I've seen, it seems to function the same in FF and IE7. Text is larger in IE; other than that what is it you want to change?
    Thanks solidarity and garydarling

    I'll look at adjustng the font size. Any suggestions for that?

    And garydarling is it really visually ugly or just clunky from bad coding?
    One looses site of the big picture when caught up in all this code, I'm self taught here?

    It was misbehaving in safari and netscape but given its nearly ok in IE I should be able to fix.
    I really appreciate your efforts,
    Rob


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •