dcsimg
www.webdeveloper.com
Results 1 to 8 of 8

Thread: Browser Compatibility Issues with Dropdown Menu

  1. #1
    Join Date
    Jul 2008
    Posts
    5

    Browser Compatibility Issues with Dropdown Menu

    OK so I have this menu issue that is baffling me.

    Here is one page where the menu does not work in Opera / Safari:
    http://74.208.93.31/viewthevibe/inde...ch_m4&Itemid=1

    Here is another where it magically does for some reason:
    http://74.208.93.31/viewthevibe/inde...property_uid=3

    For some reason in Firefox it looks great regardless of page however on the Search results page in both Chrome and Safari the drop down portion of the menu is displaying above the top level menu items. For the life of me I can't figure out what is wrong.

    Here is the CSS:

    .droplinebar{

    overflow: hidden;
    background: url(http://74.208.93.31/viewthevibe/bgheader.jpg) repeat-x top left #ffffff;
    width:935px;

    }

    img {

    border:0px;

    }

    .droplinebar ul{

    margin: 0;
    padding: 0;
    float: left;
    width: 100%;
    font: bold 14px Georgia;
    background: url(http://74.208.93.31/viewthevibe/bgheader.jpg) repeat-x top left #ffffff;

    }


    .droplinebar ul li {
    display: inline;
    color: #efd9aa;

    }

    .droplinebar ul li a {

    float: left;
    text-decoration: none;
    color: #efd9aa;

    }

    .droplinebar ul li a:hover {
    float: left;
    color: #d1a101;
    text-decoration: underline;
    text-decoration: bold;


    }

    .droplinebar ul li a:visited {

    border:0px;

    }

    .droplinebar ul li a:hover, .droplinebar ul li .current { /*background of main menu bar links onMouseover*/

    color: #d1a101;

    }

    /* Sub level menus*/
    .droplinebar ul li ul {

    position: absolute;
    z-index: 100;
    left: 0;
    top: 0;
    background: #000000; /*sub menu background color */
    visibility: hidden;

    }

    /* Sub level menu links style */
    .droplinebar ul li ul li a {

    font: normal 14px Georgia;
    padding: 6px;
    padding-right: 20px;
    margin: 0;

    }

    .droplinebar ul li ul li a:hover { /*sub menu links' background color onMouseover */

    background: #000000;
    color: #d1a101;

    }


    And here is the menu code:

    <div id="mydroplinemenu" class="droplinebar" align="center">
    <ul>
    <li><a href="#"><img src="logo.jpg" /></a>
    <ul id="row1">
    <li><a href="#">Toronto North</a></li>
    <li><a href="#">Toronto East</a></li>
    <li><a href="#">Toronto South</a></li>
    <li><a href="#">Toronto West</a></li>
    <li><a href="#">Toronto Central</a></li>
    <li><a href="#">The Burbs</a></li>
    </ul>
    </li>
    <li><a href="#"><img src="vibe.jpg" /></a>
    <ul id="row2">
    <li><a href="#">Supper Club</a></li>
    <li><a href="#">Patio</a></li>
    <li><a href="#">Romantic</a></li>
    <li><a href="#">Hidden Gem</a></li>
    <li><a href="#">Be Seen</a></li>
    <li><a href="#">Wine Bar</a></li>
    <li><a href="#">Cheap & Cheerful</a></li>
    <li><a href="#">Bistro</a></li>
    <li><a href="#">Pub</a></li>
    </ul>
    </li>
    <li><a href="#"><img src="company.jpg" /></a>
    <ul id="row3">
    <li><a href="#">Friends</a></li>
    <li><a href="#">Stuck with The Kids</a></li>
    <li><a href="#">Two of You</a></li>
    <li><a href="#">Mom</a></li>
    <li><a href="#">Business</a></li>
    <li><a href="#">First Date</a></li>
    <li><a href="#">VIP</a></li>
    <li><a href="#">Ladies Night</a></li>
    <li><a href="#">On Your Own</a></li>
    </ul>
    </li>
    <li><a href="#"><img src="taste.jpg" /></a>
    <ul id="row4">
    <li><a href="#">International</a></li>
    <li><a href="#">Asian</a></li>
    <li><a href="#">Brunch</a></li>
    <li><a href="#">Seafood</a></li>
    <li><a href="#">Innovative</a></li>
    <li><a href="#">Steakhouse</a></li>
    <li><a href="#">After the Club</a></li>
    <li><a href="#">Delivery</a></li>
    <li><a href="#">Comfort Food</a></li>
    </ul>
    </li>

    </ul>
    </div>

    </div>


    Anyone have any ideas? Why does it display fine on the video page but not on the search listings page?! So odd.

  2. #2
    Join Date
    Feb 2007
    Location
    Wolverhampton
    Posts
    96
    Hello
    sorry your links do not work so i can not look at the issues, you have set the position to absolute have to reset the css settings first normally this

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100&#37;;
    font-family: inherit;
    vertical-align: baseline;
    }
    As if safari has a default padding on bottom for example (not sayit has) then in it you will always throw off an element...Just an idea

  3. #3
    Join Date
    Jul 2008
    Posts
    5

    here are the links

    http://74.208.93.31/viewthevibe/inde...ch_m4&Itemid=1

    http://74.208.93.31/viewthevibe/inde...property_uid=3

    Its very odd. I've found if I go to the second link first (the one with the video on it) and then go to the first it displays properly at first. But if i reload the page it gets messed up. On firefox it displays fine. Even IE! But Safari and Chrome it gets all messed up.

    I'm not sure I understand your instructions on resetting the CSS. Do I add that into my CSS and remove the absolute positioning? When I take it out now the whole thing goes wonky.

  4. #4
    Join Date
    Feb 2007
    Location
    Wolverhampton
    Posts
    96
    Hello
    i see the issue strange works on one page not the other the header is the same apart from one link to a js file for lightbox hmm..

    I validated your code and you had a lot of errors but on the none video page you had a </table> when the start wasnt there, according the the validator maybe this is throwing it off.

    The reset code basically zero's all the default browser settings makes the cross browser styling easier, but then again most do it at the start as if you do it things will move... What you need to do is paste the code on the top of the css sheet before any other styles that reset the browsers to zero. Leave the absolute positioning i just meant if safari had padding set to 10px but firefox doesn't that be why...

    Try it can always delete it ..

  5. #5
    Join Date
    Jul 2008
    Posts
    5

    isolated menu

    i've isolated the menu and it reacts in the same way... there is no table in there but it reacts the same way... very odd.

    http://74.208.93.31/viewthevibe/menu.html

  6. #6
    Join Date
    Jul 2008
    Posts
    5
    its so strange to because its not consistent. sometimes i refresh and its ok, then i refresh again and its slipped. mostly its off though.

  7. #7
    Join Date
    Jul 2008
    Posts
    5

    solved!

    As usual it was something simple. Chrome and Safari wouldn't pickup the height of the image files. Once I declared all sizes in the img call the menu spaced itself accordingly!

  8. #8
    Join Date
    Feb 2007
    Location
    Wolverhampton
    Posts
    96
    Always something simple that you never think as its so normal glad its got sorted though..

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles