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
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post

    menu is not showing horizontal, it show vertical after changing doctype

    I have been using an incomplete doctype and was advised to change this to a valid doctype, but unable to find one that shows the page correct.

    Using the doctype below causes the menu to be vertical instead of the correct horizontal menu layout.

    What would be the correct doctype to use and if so what would i change to the menu part so it shows across the top of the page.

    I would also like the page to validate via w3.org.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <META NAME="RATING" CONTENT="General">
    <META NAME="ROBOTS" CONTENT="index,follow">
    <META NAME="REVISIT-AFTER" CONTENT="2 days">
    <link rel="shortcut icon" href="favicon.ico">
    <title> site </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    
    <body>
      <div class="headerBar">
        <div class="menuwidthLimiter" style="border: 0px solid #DDD;">
          <ul id="navBar">
    		<li> <a class="adminmenu" href="admin.php" onMouseover="this.style.background='url(\'images/adminBarBgHover.png\') repeat-x center';" onMouseout="this.style.background='url(\'images/adminBarBgOutHover.png\') repeat-x center';"> Admin Actions </a> </li>
    		<li> <a class="adminmenu" href="accountSettings.php" onMouseover="this.style.background='url(\'images/adminBarBgHover.png\') repeat-x center';" onMouseout="this.style.background='url(\'images/adminBarBgOutHover.png\') repeat-x center';">Account Settings</a> </li>
    		<li> <a class="adminmenu" href="manager.php" onMouseover="this.style.background='url(\'images/adminBarBgHover.png\') repeat-x center';" onMouseout="this.style.background='url(\'images/adminBarBgOutHover.png\') repeat-x center';">Passenger Manager</a> </li>
    		<li> <a href="members.php">Home</a> </li>
    		<li> <a href="aboutus.php">About us</a> </li>
    		<li> <a href="services.php">Services</a> </li>
    		<li> <a href="accounts.php">Accounts</a> </li>
    		<li> <a href="">Logout</a> </li>
          </ul>
        </div>
      </div>
      <div class="headerSpace"></div>
    
      <div class="content">
        <div class="widthLimiter contentStyle">
          <div class="formWrapper" style="width: 940px;">
    	  main content
    	  </div>
        </div>
      </div>
    <div style="clear:both"></div>
    
    </body>
    </html>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello jasonpc1,
    Your markup is invalid. See the links about validation in my signature line below.

    We can't really tell why your menu is vertical without seeing your style.css.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    opps sorry forgot to attach it

    my style.css file
    Code:
    body{ background: #999999; padding: 0px; margin: 0 auto; font-family: 'Verdana'; font-size: 12px; padding-bottom: 10px; }
    ul{ list-style: none; padding: 0px; margin: 0px; }
    #navbar li,#navbar1 li{ display:inline; margin: 0px; }
    a:link,a:visited,a:active{ color: #757575; font-weight: bold; text-decoration: none; }
    a:hover{ color: #222; text-decoration: underline; }
    #navbar a:link,#navbar a:active,#navbar a:visited{ display:inline-block; color: #757575; text-decoration: none; border-left: 1px solid #DDD; border-right: 1px solid #DDD;  padding: 6px 6px 6px 6px; /* padding: 10px 20px 10px 20px; */ margin: 0px 4px 0px 4px; /* margin: 0px 5px 0px 5px; */ }
    #navbar a:hover{ background: url('images/headerBarBgHover.png') repeat-x center #999999; display:inline-block; color: #222; text-decoration: underline; padding: 6px 6px 6px 6px; /* padding: 10px 20px 10px 20px; */ }
    .adminmenu{ background: url('images/adminBarBgOutHover.png') repeat-x center; display:inline-block; color: #757575; text-decoration: none; border-left: 1px solid #DDD; border-right: 1px solid #DDD;  padding: 6px 6px 6px 6px; /* padding: 10px 20px 10px 20px; */ margin: 0px 3px 0px 3px; /* margin: 0px 5px 0px 5px; */ }
    form{ padding: 0px; margin: 0 auto; }
    .headerBar{ background: url('images/headerBarBg.png') repeat-x center; text-align: center; }
    .headerSpace{ height: 150px; background: #999999; }
    .widthLimiter{ width: 950px; margin: auto; }
    .menuwidthLimiter{ width: 1010px; margin: auto; } /* width: 1200px; */
    .content{ background: #EEEEEE; text-align: center; margin: auto; }
    .contentStyle{ border-left: 1px solid #DDD; border-right: 1px solid #DDD;  padding: 10px;  height: auto  !important; height: 400px; min-height: 400px; margin: auto; }
    .errorDiv{ border: 1px solid #A5260F; background: #E28B65; padding: 5px; margin-bottom: 5px; text-align: center; }
    .successDiv{ border: 1px solid #41A808; background: #B9E57B; padding: 5px; margin-bottom: 5px; text-align: center; }
    .adminBar{ background: #09f; }
    .customerListSpacer{ float: left; width: 20px; }
    .customerViewEditLink{ float: left; width: 40px; text-align: left; padding-right: 5px; }
    .customerRequestIDSpacer{ float: left; width: 80px; text-align: left; }
    .customerNameSpacer{ float: left; width: 200px; text-align: left; border: 0px dashed #999;}
    .customerMobileSpacer{ float: left; width: 150px; text-align: left; border: 0px dashed #999;}
    .customerEmailSpacer{ float: left; width: 230px; text-align: left; border: 0px dashed #999;}
    .customerPaymentMethodSpacer{ float: left; width: 200px; text-align: left; border: 0px dashed #999;}
    /*####################*/
    .formWrapper{ margin: auto; border: 1px dashed #999; padding: 5px; text-align: left; }
    .innerformboxes{ float: left; width: 275px; padding: 5px; border: 0px dashed #999; }
    .leftbookingleftfloat { float: left; width: 295px; padding-right: 10px; text-align: left; border: 0px dashed #999; }
    .rightbookingleftfloat { float: left; width: 295px; text-align: left; border: 0px dashed #999; }
    .subHeader{ font-weight: bold; text-decoration: underline; }
    .field{ padding: 5px 0px 3px 10px; text-align: left; }
    .reviewfield{ padding: 10px 0px 1px 10px; font-weight: bold; }
    .emptyfield{ padding: 5px 0px 3px 10px; color: #FF0000; font-weight: bold; }
    .value{ 	 padding: 5px 0px 3px 10px; text-align: left; }
    .other{ 	 padding: 5px 0px 3px 0px; text-align: center; }
    /*### Passenger Manager ###*/
    .addAddr{ color: #090; cursor: pointer; }
    .remAddr{ color: #900; cursor: pointer; }
    .passengerList{ padding: 5px; }
    .passengerLinks{ padding-top: 3px; }
    .passengerEdit{ color: #090; }
    .passengerDel{ color: #900; cursor: pointer; }
    .passengerAddress{ border-top: 1px solid #FFF; border-bottom: 1px solid #FFF; }
    /*### Booking Form ###*/
    .results{ display: none; min-width: 300px; width: auto !important; max-height: 100px; height: auto !important; height: 100px; overflow: auto; position: absolute; background: #EEEEEE; border: 1px solid #000; }
    .helpAcronym{ margin-left: 10px; background: #FFF; color: #900; }
    /*### Date Picker Styling ###*/
    .ds_box { background-color: #FFF; border: 1px solid #000; position: absolute; z-index: 32767; }
    .ds_tbl { background-color: #FFF; }
    .ds_head { background-color: #333; color: #FFF; font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; text-align: center; letter-spacing: 2px; }
    .ds_subhead { background-color: #CCC; color: #000; font-size: 12px; font-weight: bold; text-align: center; font-family: Arial, Helvetica, sans-serif; width: 32px; }
    .ds_cell { background-color: #EEE; color: #000; font-size: 13px; text-align: center; font-family: Arial, Helvetica, sans-serif; padding: 5px; cursor: pointer; }
    .ds_cell:hover { background-color: #F3F3F3; }
    /* Vehicles page */
    .vehiclesleftfloat fieldset { float: left; width: 360px; padding: 10px; margin: 10px 0px 10px 20px; text-align: left; }
    /* Services page */
    .servicesleftfloat fieldset { float: left; width: 370px; padding: 10px; margin: 10px 0px 10px 20px; text-align: left; }
    fieldset { padding: 10px 5px 5px 5px; border: 0.1em solid #C2C2C2; }
    legend { font-weight: bold; }
    .addressFieldset { width: 150px; text-align: left; padding: 15px; margin: 20px 0px 0px 0px; }
    .addressHeader { line-height: 30px; font-size: 12px; font-weight: bold; border: 0px dashed #000; }
    .emailAddressIndent { text-align: center; border: 0px dashed #000; }
    .addressxline { margin: 20px 0px 20px 0px; padding: 0; width: 140px; background: url(images/bg1.gif) repeat-x center left; height: 2px; font-size: 2px; border: 0px dashed #000; }
    .footerhosttext { color: #000; }
    .copyright { float: left; width: 33%; text-align: center; font-size:9pt; line-height: 16px; border: 0px dashed #000;}
    /*	.copyright { float: left; width: 49%; text-align: center; font-size:8pt; line-height: 30px; } */

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    In your CSS you have
    Code:
    #navbar li, #navbar1 li {
    	display:inline;
    	margin: 0px;
    }
    In your markup you have <ul id="navBar">
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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