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 Coder
    Join Date
    Dec 2008
    Location
    Ohio, USA
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts

    horiz nav menu not displaying correctly

    Hi all,

    I recently put together an html/css unordered list horizontal navigation menu with suckerfish single level dropdown menu (for 'pricing') for my home page utilizing info from an article on A List Apart. The menu is not displaying properly (horizontally) in IE8 or IE9. I'm not sure what IE fix/hack I am missing.
    Also in IE8 and IE9 the facebook and twitter logos are floating over to the right along with the vertical menu. I've proofed this page in the latest versions of Firefox, Safari, Opera and Chrome and it works fine in those browsers. The page should look like this (and single level dropdown menu with three items should display when hovering over 'pricing').:



    Any help will be greatly appreciated.

    Thanks.

    Dennis

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I think you need to give your <ul> a width other than auto. Also, you dont have a valid doctype defined, which will play havoc in some browsers, IE in particular.

    You do know tables for layout is not a good practice right? And one more thing to consider, which is the center tags are outdated and deprecated.
    Teed

  • #3
    New Coder
    Join Date
    Dec 2008
    Location
    Ohio, USA
    Posts
    26
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    I think you need to give your <ul> a width other than auto. Also, you dont have a valid doctype defined, which will play havoc in some browsers, IE in particular.

    You do know tables for layout is not a good practice right? And one more thing to consider, which is the center tags are outdated and deprecated.
    Thanks for the input. What would the valid doctype be? I plugged in the following, from my PageSpinner 5.2.1 software and the formatting of the page went completely out of whack.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

  • #4
    New Coder
    Join Date
    Jun 2011
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    u have made your code very complicated, u might have try to do it lot simple.

    Here it is, i have made lot of simplifications.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Dennis Roliff Photography: advertising and beauty imagery</title>
    <style>
    body { padding:0px; margin:0px auto; width:970px; }
    
    table { margin:0px auto; margin-top:120px; padding:0px; width:750px; } 
    
    p { margin:0px; padding:0px; font:normal 14px italic "Garamond Premr Pro"; color:#666666; }
    
    .menu { margin:0px; padding:0px; width:750px; float:left; }
    
    .menu ul { margin:0px; padding:0px; }
    
    .menu ul li { margin:0px; padding:0px 0px 0px 8px; list-style-type:none; display:inline; text-decoration:none; font:12px normal "Garamond Premr Pro"; }
    
    .menu a { margin:0px; padding:0px; text-decoration:none; font:bold 16px "Garamond Premr Pro"; color:#666666; }
    
    .menu a:hover { text-decoration:underline; }
    </style>
    
    </head>
    
    <body>
    <table border="0" cellpadding="0" cellspacing="0">
    <tbody>
    <tr height="200">
    <td align="center"><img src="home_logo.jpg" width="400" height="92" alt="logo" /></td>
    </tr>
    <tr>
    <td align="center">
    <div class="menu">
     <ul>
      <li><a href="#" target=_self>beauty</a> </li>
      <li><a href="#" target=_self>portraiture</a> </li>
      <li><a href="#" target=_self>fashion</a> </li>
      <li><a href="#" target=_self>commercial</a> </li>
      <li><a href="#" target=_self>personal</a> </li>
      <li><a href="#" target=_self>video</a> </li>
      <li><a href="#" target=_self>pricing</a> 
         <!--<ul>
           <li><a class=internal href="#" target=_self>headshots</a> </li>
           <li><a class=internal href="#" target=_self>model shoot</a> </li>
           <li><a class=internal href="#" target=_self>commercial</a> </li>
          </ul>-->
       </li>
       <li><a href="#" target=_self>about</a> </li>
       <li><a href="#">contact</a> </li>
       <li><a href="#" target=_self>home</a> </li>
      </ul>
    </div>
    </td>
    </tr>
    <tr height="300">
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td><p align="center">follow us on facebook and twitter </p></td>
    </tr>
    <tr>
    <td align="center">
    <div>
    <img src="twitter_logo.jpg" /><img src="facebook_logo.jpg" />
    </div>
    </td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>


  •  

    Posting Permissions

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