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 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    68
    Thanks
    12
    Thanked 0 Times in 0 Posts

    CSS Rendering Horizontal Nav Vertically in All Browsers

    Okay, this is one of those “probably a little thing I am completely missing” type of issues (at least I hope it is). I am working on a website, and trying the navigation a little differently this time but am running into problems and I have no idea why.
    When working in DW (CS4), the nav bar is displaying properly as the following screen shot shows:




    However, when I look at it in a browser (any browser) and in LIVE mode in DW, the menu suddenly shifts vertical left as so:





    I am so baffled on this one. I am getting an error in Dreamweaver that says “Float drop problem” - If a container (including the browser window itself) is not wide enough to accommodate both a float with a specified width and any content with a specified width that follows it, the content after the float will drop below the float rather than wrapping around it.
    Affects: Internet Explorer 6.0, 7.0
    Likelihood: Likely
    To start with, I am not sure this is the problem as it says it only effects IE 6 and 7, but this problem presents itself in all browsers.
    So that being said, here is my html:

    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>Paradigm Forward Technology Group</title>
    <link href="styles/main.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="wrapper">
      <div id="header"><img class="displayed" src="img/court_header.jpg" width="960" height="150" alt="Welcome to Paradigm Forward Technology Group" /></div><!--End header div-->
      <div id="innerWrapper">
        <div id="nav">
       	  <div id="left_menu" />
    <div id="buttons">
            	<div class="menu_item about"><a href="#">ABOUT PFTG</a></div>
                <div class="menu_item menu_divider" />
                <div class="menu_item home_services"><a href="#">HOME SERVICES</a></div>
            <div class="menu_item menu_divider" />
    		<div class="menu_item managed_it"><a href="#">MANAGED IT</a></div>
            	<div class="menu_item menu_divider" />
                <div class="menu_item website_design"><a href="#">WEBSITE DESIGN</a></div>
           	<div class="menu_item menu_divider" />
            <div class="menu_item sales_consulting"><a href="#">SALES CONSULTING</a></div>
           	<div class="menu_item menu_divider" />
            <div class="menu_item contact"><a href="#">CONTACT</a></div>
            <div id="right_menu" />
    </div><!--buttons-->
          </div><!--nav-->
      </div><!--End innerWrapper div-->
      <div id="footer"></div><!--End footer div-->
    </div><!--End wrapper div-->
    </body>
    </html>
    And here is my CSS file. Hopefully this is not too complicated. Thanks in advance for any help.

    Code:
    @charset "utf-8";
    body, h1, h2, h3, h4, h5, p, ul, ol, li {
    	margin: 0px;
    	padding: 0px;
    }
    #wrapper {
    	width: 100%;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #FFF;
    }
    #header {
    	background-color: #071A38;
    	background-image: url(../img/header_bg.jpg);
    	background-repeat: repeat-x;
    	background-position: center top;
    	height: 158px;
    	width: 100%;
    }
    img.displayed {
    	display: block;
    	margin-right: auto;
    	margin-left: auto;
    	padding-top: 8px;
    }
    #footer {
    	background-color: #071A38;
    	background-image: url(../img/footer_bg.jpg);
    	background-repeat: repeat-x;
    	background-position: center top;
    	height: 75px;
    	width: 100%;
    }
    #innerWrapper {
    	height: 350px;
    	width: 980px;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    	position: relative;
    	z-index: 4;
    	top: -28px;
    }
    #buttons {
    	text-align: center;
    	height: 50px;
    	margin-top: 0;
    	margin-right: auto;
    	margin-bottom: 0;
    	margin-left: auto;
    }
    .menu_item {
    	font-family: "Book Antiqua", Arial, Helvetica, sans-serif;
    	font-size: 16px;
    	float: left;
    	height: 50px;
    	clear: none;
    }
    .menu_divider {
    	background-color: #071A38;
    	height: 50px;
    	width: 1px;
    }
    
    
    #nav {
    	height: 50px;
    	width: 980px;
    	margin-right: auto;
    	margin-left: auto;
    }
    #nav div.home_services a, #nav div.managed_it a, #nav div.website_design a, #nav div.contact a {
    	width: 156px;
    }
    #nav div.about a {
    	width: 155px;
    }
    #nav div.sales_consulting a {
    	width: 156px;
    	padding-top: 3px;
    }
    
    #left_menu {
    	background-attachment: scroll;
    	background-image: url(../img/menu_left.jpg);
    	background-repeat: no-repeat;
    	background-position: left top;
    	height: 50px;
    	width: 20px;
    	float: left;
    }
    #right_menu {
    	background-attachment: scroll;
    	background-image:url(../img/menu_right.jpg);
    	background-repeat: no-repeat;
    	height: 50px;
    	width: 20px;
    	float: right;
    	background-position: left top;
    }
    #nav a:link, #nav a:visited, #nav a:hover, #nav a:active {
    	font-family: "Book Antiqua", Arial, Helvetica, sans-serif;
    	font-size: 16px;
    	color: #FFF;
    }#buttons a {
    	padding-top: 13px;
    	text-decoration: none;
    }
    .menu_item a {
    	background-image: url(../img/menu_bg.jpg);
    	background-repeat: repeat-x;
    	background-position: center top;
    	height: 50px;
    	clear: none;
    	float: left;
    }

  • #2
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    When you say "trying the navigation a little differently this time", I'm not sure what you mean but you're better off using an unordered list for that navigation like this:
    Code:
    <ul id="nav">
          <li id="left_menu"></li>
          <li><a class="menu_divider" href="#">ABOUT PFTG</a></li>
          <li><a class="menu_divider" href="#">HOME SERVICES</a></li>
          <li><a class="menu_divider" href="#">MANAGED IT</a></li>
          <li><a class="menu_divider" href="#">WEBSITE DESIGN</a></li>
          <li><a class="menu_divider" href="#">SALES CONSULTING</a></li>
          <li><a href="#">CONTACT</a></li>
          <li id="right_menu"></li>
        </ul>
    CSS:
    Code:
    #nav ul, #nav li {
    	display:inline;
    	list-style-type:none;
    }
    #nav a {
    	font:14px "Book Antiqua", Arial, Helvetica, sans-serif;
    	color:#fff;
    	background:url(../img/menu_bg.jpg) repeat-x;
    	float:left;
    	width:155px;
    	line-height:50px;
    	text-decoration:none;
    	text-align:center;
    }
    #nav a:hover {
    	background:#6C6;
    	color:#000;
    }
    .menu_divider {
    	border-right:1px solid #071A38;
    }
    #left_menu, #right_menu {
    	background:url(../img/menu_left.jpg);
    	height:50px;
    	width:20px;
    	float:left;
    }
    #right_menu {
    	background:url(../img/menu_right.jpg);
    }
    Don't rely on the design view of DW to view your webpage, as it is rarely correct. Use Firefox instead.

  • #3
    New Coder
    Join Date
    Jun 2009
    Location
    West Yorkshire
    Posts
    23
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Hi,

    I had a similar problem here > http://www.codingforums.com/showthread.php?t=168031

    I think what solved it was to set the menu buttons to background images and then place them in an unordered list <ul> inside the div for the menu. Then in the css I have a float:left for the <li> items.

    Hope that helps, though I don't fully understand it myself. The solution is explaned out in the thread above, I think it's in the first few posts. Check the last post to see what code i ended up with.

    Nice buttons by the way.
    Last edited by Einarrson; 06-18-2009 at 12:21 AM.


  •  

    Posting Permissions

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