Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Junior Member
    Join Date
    Sep 2009
    Posts
    5
    Member #
    19885
    Hi guys, I'm pretty new to web design. I'm working on a navigation bar for this website but I'm having a problem. In IE, it displays fine. However, in Firefox, the one element (About Us) that has a Javascript drop-down menu, is moved up just a couple pixels. This throws the whole thing off and creates a while line between the rest of the elements and the header image, as well as a white line under the element with the drop down menu. Here's my code, I apologize if it's sloppy, I'm still learning and getting used to CSS.

    CSS

    Code:
    .vision {
        font-family:Georgia;
        font-size:x-large;
    }
    
    .mission {
        font-family:'Lucida Calligraphy';
        font-size:large;
    }
    
    .appearances {
        font-family:'Bookman Old Style';
        font-size:medium;
    }
    
    .placeholder {
        border-color:black;
        border-width:thin;
    }
    
    .linklabels {
        font-family:Verdana;
        font-size:small;
    }
    
    .tableborder    {
                    border-color: black;
                    border: thin;
                    border-style: solid;
                    margin-top: 20px;
    }
    
    a {
        font-family:Verdana;
        font-size:small;
    }
    
    img {
        border-style:none;
    }
    
    body {
        background-color:#FFFFF0; 
        margin:25px; 
        font:12px Verdana, Arial, Helvetica
        }
        
    * {padding:0; margin:0; }
    
    .dropdown {/*float:left;*/ /*padding-right:5px*/}
    .dropdown dt {width:120px; /*border:2px solid #9ac1c9;*/ /*padding:8px;*/ font-weight:bold; cursor:pointer; background:url(images/header.gif)}
    .dropdown dt:hover {background:url(images/header_over.gif)}
    .dropdown dd {position:absolute; overflow:hidden; width:120px; display:none; background:#fff; z-index:200; opacity:0}
    .dropdown ul {width:120px; border:2px solid #9ac1c9; list-style:none; border-top:none}
    .dropdown li {display:inline}
    .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:120px}
    .dropdown a:active {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:120px}
    .dropdown a {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:120px}
    .dropdown a:hover {background:#D2B9D3; color:#000}
    /*.dropdown .underline {border-bottom:1px solid #b9d6dc}*/
    
    .navbar td {
        height:35px;
        padding:0;
        border-spacing:0;
    }
    
    .home { width=85px; }
    
    .contact {
        text-align: center;
        font-size:large;
    }
    
    .staff {
        text-align:center;
        
        
    }
    
    .staff-title {
        text-align:center;
        font-size:x-large;
    }
    HTML

    Code:
    <table cellspacing="0" cellpadding="0">
            <tr>
                <td colspan="2">
                    <img src="images/Website_Bar.png" width="850px" />
                </td>
            </tr>
            
            <tr>
                <td colspan="2">            
                    <table class="navbar" cellspacing="0" cellpadding="0">
                        <tr>
                            <td class="dropdown">
                                <img src="images/navbar_home.png" width="85px" height="35px" />                    
                            </td>
                            
                            <td style="width: 120px; height: 35px">
                                <dl class="dropdown">
                                    <dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)"><img src="images/navbar_aboutus.png" width="120" height="35px"/></dt>
                                      <dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
                                        <ul>
                                              <li><a href="vision.htm" class="underline">Vision</a></li>
                                              <li><a href="staff.htm" class="underline">Staff</a></li>
                                              <li><a href="contact.htm">Contact Us</a></li>
                                        </ul>
                                      </dd>
                                </dl>
                            </td>
                            
                            <td style="width: 130px">
                                <img src="images/navbar_salvation.png" width="130px" height="35px"/>
                            </td>
                            
                            <td>
                                <img src="images/navbar_extra.png" width="515px" height="35px" />
                            </td>
                        </tr>
                    </table>
                    
                </td>
            </tr>
    </table>

  2.  

  3. #2
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    javascript will cost you in google index because you cant nav javascript in an html only browser. css dropdowns will be more realistic in the near future as ie7 fades away. you are having trouble because you used a program to create this code. the fix should be overflow: hidden; and before you say "well im using javscript dropdown so ie7 users can have a dropdown" you are using the :hover on something besides the a tag, ie7 doesnt support hover on anything other then a tags. if you can get it to work it is not recomended because ie7 was not intended to support it. at best you will end up with a hack. but then javascript based nav is a hack in itself so......good luck i guess.

    while($get_it !== true){ continue; }

  4. #3
    Junior Member
    Join Date
    Sep 2009
    Posts
    5
    Member #
    19885
    Thanks for the response! I will definitely heed your advice and switch to a CSS dropdown in the near future, I didn't know all of that. However, for the time being, I just need to get this one little thing fixed.

    You said "the fix should be overflow: hidden;", did you mean to take that part out? I tried taking it out and it didn't change anything. Or do I need to add that to another element in the CSS table?

  5. #4
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    .dropdown li {display:inline}
    i just noticed you have a typo of sorts. you are missing a ; after inline. if that doesnt fix it move the overflow into the same line in question. i use li for nav and alway put overflow controls under the li.

    while($get_it !== true){ continue; }

  6. #5
    Junior Member
    Join Date
    Sep 2009
    Posts
    5
    Member #
    19885
    Neither worked

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Scott ...

    Can you give us the actual URL so we can view it with various browsers?
    I'm saying that because even with IE, there might be a version that fails.


  8. #7
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    do you have an url i can get to have a look, im quite stuck on this now, i like beating my self up with css.

    while($get_it !== true){ continue; }

  9. #8
    Junior Member
    Join Date
    Sep 2009
    Posts
    5
    Member #
    19885
    Unfortunately I can't, these are all new changes that aren't live yet.

  10. #9
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    .dropdown li {display:inline; float: left; }

    while($get_it !== true){ continue; }

  11. #10
    Junior Member
    Join Date
    Sep 2009
    Posts
    5
    Member #
    19885
    No luck with that either.

    If I attached the images in a zipped file so you can open it in a local page, would that be good enough?


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

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

Search tags for this page

color on navbar in css not showing correctly

Click on a term to search for related topics.
All times are GMT -6. The time now is 03:53 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com