#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    1
    Rep Power
    0

    My CSS Menu is not lining up with the menu image on the left


    Hi,

    Can someone help me please. I am trying to do a new menu for my site, however the CSS menu just will not align up correctly next to the home buttom image on the left. It all looks ok in Chrome but messes up in IE and FF leaving a space on the bottom.

    I'm not very good with CSS so maybe I need some help there.

    Please can you help.

    Here is the HTML

    Code:
     <td height="40" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="43"><a href="~"><img src="/Home1.jpg" border="0" align="middle"></a></td>
              <td bgcolor="#333333"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="40%" height="40"><a href="~" class="headerNavigation2">Hello</a></td>
                  <td width="60%"><a href="~" class="headerNavigation2">Hello</a></td>
                  </tr>
              </table></td>
            </tr>
        </table></td>
    and here is the CSS file
    Code:
    A.headerNavigation2 { 
      color: #FFFFFF; 
      font-family:Tahoma, Verdana, Arial, sans-serif;
      font-size: 12px;
      background: transparent url() repeat-x top left;;;
      font-weight : bold;
      height: 40px;
      margin: 0 auto;
    padding:13px 5px 15px 5px;
    }
    
    A.headerNavigation2:link { 
      color: #FFFFFF; 
      font-family:Tahoma, Verdana, Arial, sans-serif;
      font-size: 12px;
      background: transparent url() repeat-x top left;;;
      font-weight : bold;
      height: 40px;
      margin: 0 auto;
    padding:13px 5px 15px 5px;
    }
    A.headerNavigation2:visited { 
      color: #FFFFFF; 
      font-family:Tahoma, Verdana, Arial, sans-serif;
      font-size: 12px;
      background: transparent url() repeat-x top left;;;
      font-weight : bold;
      height: 40px;
      margin: 0 auto;
    padding:13px 5px 15px 5px;
    }
    
    A.headerNavigation2:hover {
      color: #FFFFFF;
      font-family:Tahoma, Verdana, Arial, sans-serif;
      font-size: 12px;
      background: transparent url() repeat-x top left;;;
      font-weight : bold;
      height: 40px;
      margin: 0 auto;
    padding:13px 5px 15px 5px;
    }
    Thank you in advance
    Last edited by Kravvitz; January 9th, 2013 at 02:39 PM. Reason: fixed the code tags
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    129
    Rep Power
    11
    usually if something works in one browser and not another it has to do with the basic padding and margins for the browsers.

    try adding

    * {padding:0; margin:0}

    at the top of the css file and see if that helps it.
  4. #3
  5. /*
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2007
    Location
    Sydney, Australia
    Posts
    729
    Rep Power
    620
    Originally Posted by mantis64
    Hi,

    Can someone help me please. I am trying to do a new menu for my site, however the CSS menu just will not align up correctly next to the home buttom image on the left. It all looks ok in Chrome but messes up in IE and FF leaving a space on the bottom.

    I'm not very good with CSS so maybe I need some help there.

    Please can you help.

    Here is the HTML...
    Is it possible to post the full html and css for the page?
    */

IMN logo majestic logo threadwatch logo seochat tools logo