Css Dropdown Menu Slight Difference In Firefox / Chrome

Discussion in 'HTML & Website Design' started by imaginexhacked, Feb 4, 2013.

0
  1. #1
    Hi

    I am slowly putting together a new site while I work at learning CSS and HTML better http://byedui.com/inner.html

    I have put together a drop down menu that looks great in Firefox, but in Chrome the last two header items "Life After DUI" and "Ask a DUI Lawyer" are slightly shorter than the other header boxes in the menu.

    Could someone please have a look and suggest what I have done wrong, and how I can get the menu item boxes to match the same height?

    Thanks

    Have a nice day
     
    imaginexhacked, Feb 4, 2013 IP
  2. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #2
    Have you tried it in IE?

    First step - get rid of the transitional doctype and write 2013 code.
     
    Rukbat, Feb 5, 2013 IP
  3. imaginexhacked

    imaginexhacked Member

    Messages:
    30
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    43
    #3
    A response to my thread would have been appreciated. Cheers, thanks for nothing :D
     
    imaginexhacked, Feb 5, 2013 IP
  4. njfail

    njfail Active Member

    Messages:
    114
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    70
    #4
    If you post your html and css for the drop down menu I can have a look at it for you.

    However, from just looking at your site, it seems that the reason those last 2 headers are smaller is because the text inside them fits into 1 line (in google chrome).
    Every other header has 2 lines of text in its header.
    In firefox, they all have 2 lines of text.
    You should set the height of the div that renders the background gradient.

    Different browsers render things differently, especially when you're using -web-kit functions.
     
    njfail, Feb 5, 2013 IP