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 to the CF scene
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Getting float and menu looking the same in all browsers?

    I have made this page and got it looking how I want it in firefox/IE7. I then tested it on browsershots.org and found problems in IE6, chrome and opera. Basically there seem to be 2 issues, the float of the 4 rounded boxes (particularly messy in IE6) and the sidebar menu seems to be wider in opera and vary slightly in all browsers.

    Ive taken css ideas from various online tutorials but I must of stuffed up the code somehow and I still dont have my head around floats at all! If someone can spare the time to help me out I would really be grateful.

    The page can be previewed at www.resolvit.co.nz/homepagesample.html

    The code is as follows (warning - long and messy!):
    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" lang="en" xml:lang="en">
    
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    body {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	background-color: #ffffff;
    	padding: 0px;
    	margin: 5px;
    }
    a:link {
        color:blue;
     }
    
    
    
    .rbroundbox { background: url(nt.gif) repeat; }
    .rbtop div { background: url(tl.gif) no-repeat top left; }
    .rbtop { background: url(tr.gif) no-repeat top right; }
    .rbbot div { background: url(bl.gif) no-repeat bottom left; }
    .rbbot { background: url(br.gif) no-repeat bottom right; }
    
    .rbtop div, .rbtop, .rbbot div, .rbbot {
    width: 100%;
    height: 7px;
    font-size: 1px;
    }
    .rbcontent { margin: 0 7px; }
    .rbroundbox { width: 100%; margin: .6em auto; }
    
    
    .rbroundbox2 { background: url(nt2.gif) repeat; }
    .rbtop2 div { background: url(tl2.gif) no-repeat top left; }
    .rbtop2 { background: url(tr2.gif) no-repeat top right; }
    .rbbot2 div { background: url(bl2.gif) no-repeat bottom left; }
    .rbbot2 { background: url(br2.gif) no-repeat bottom right; }
    
    
    .rbtop2 div, .rbtop2, .rbbot2 div, .rbbot2 {
    width: 100%;
    height: 7px;
    font-size: 1px;
    }
    .rbcontent2 { margin: 0 7px; }
    .rbroundbox2 { width: 100%; margin: 1em auto; }
    
    
    h2,h4 {
    	margin-top: 0px;
    	padding-top: 0px;
    	color:#4f81bd;
    }
    div#head {
    	left:0px;
    	width:760px;
    	height:220px;
    	top: 0px;
    	position: absolute;
    }
    
    
    
    #navbar ul { 
    	position: absolute;
    	left:0px;
    	top: 220px;
    	width:750px;
        margin: 0; 
        padding:5px;
        list-style-type: none; 
        text-align: left; 
        background-color: #000000; 
        } 
    
    #navbar ul li {  
        display: inline; 
        } 
    
    #navbar ul li a { 
        text-decoration: none; 
        padding: .2em 2em; 
        color: #FFFFFF; 
        background-color: #000000; 
        } 
    
    #navbar ul li a:hover { 
        color: #ffffff; 
        background-color: #666666; 
        } 
    
    
    div#wrapper {
    	position:relative; 
    	margin-left:auto; 
    	margin-right:auto; 
    	top: 0px; 
    	width:760px;  
    	background: url("background_colsre.gif") repeat; 
    }
    div#columns {
    	width: 760px;
    	position: relative;
    	top: 250px;
    }
    div#side1 {
    	position:absolute;
    	left:0px;
    	width:145px;
    	color: #ffffff;
    	top: 2px;
    	padding-left:2px; 
    }
    #menu {
      padding:0px;
      margin-left:0px;
    width:0px;
    
      }
    #menu li {
      list-style-type:none;
      margin:0px 0 0px 0;
    
    }
    
    
    #menu a, #menu a:visited {
      display:block;
      width:11.3em;
      border:1px solid #666;
      font-family:arial, verdana, sans-serif; 
      font-size:.9em; 
      text-align:left; 
      text-decoration:none; 
      background:#ddd; 
      color:#000; 
      padding:0.3em;
    padding-bottom:1em;
    }
    
    #menu a:hover {
      background:#666;
      color:#fff;
      }
    
    div#content {
    	background-color: #fff;
    	width: 460px;
    	margin-top: 1px;
    	margin-left: 150px;
    
    }
    div#allservices{
    	text-align:right;
    }
    
    div#table1 {
    	background-color: #ffffff;
    	width: 225px;
    	color: #000000;
    	float:left;
    	clear:both;
    	top:0px
    	left:0px;
    	margin-top: 1px;
    	margin-left: 150px;
    }
    
    div#table2 {
    	background-color: #ffffff;
    	width:225px;
    	color: #000000;
    	float:left;
    	position:absolute;
    	clear:both;
    	top:0px;
    	left:0px;
    	margin-top: 1px;
    	margin-left: 385px;
    }
    
    div#table3 {
    	background-color: #ffffff;
    	width: 225px;
    	float:left;
    	clear:both;
    	top:285px;
    	left:0px;
    	color: #000;
    	margin-top: 1px;
    	margin-left: 150px;
    }
    div#table4 {
    	background-color: #ffffff;
    	width: 225px;
    	position:relative;
     	top:245px;
    
    	
    	
    	left:0px;
    	color: #000;
    	margin-top: 1px;
    	margin-left: 385px;
    }
    
    div#side2 {
    	position:absolute;
    	width:145px;
    	color: #ffffff;
    	left: 615px;
    	top: 2px;
    	padding-left:0px;
    	padding-right:0px;
     	text-align: center;
    }
    
    div#tableside {
    	background-color: #454545;
    	width: 145px;
    	position: static;
    	color: #FFFFFF;
    	margin-top: 1px;
    	margin-left: 0px;
    }
    
    div#foot {
    	background-color: #000000;
    	color: #FFFFFF;
    	position:relative;
    	width: 760px;
    	clear: both;
    	margin-top: 250px;
    	text-align: center;
    	padding-bottom:2px;
    }
    #foot a:link {
      color:#fff;
      }
    
    
    .clear {
    	clear:both;
    }
    -->
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="head">
    	<img src=".jpg"alt="">
    </div>
    
    <div id="navbar"> 
      <ul>  
        <li><a href="#">Home</a></li> 
        <li><a href="#">Services</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Contact Us</a></li> 
      </ul> 
    </div> 
    
    <div id="columns">
    	<div id="side1">
    		<br>
    		<h5>Services</h5>
    		<ul id="menu">
    			<li><a href="#nogo">Overview</a></li>
    			<li><a href="#nogo">Service</a></li>
    			<li><a href="#nogo">Service</a></li>
    			<li><a href="#nogo">Service</a></li>
    			<li><a href="#nogo">Service</a></li>
    			<li><a href="#nogo">Service</a></li>
    			<li><a href="#nogo">Service</a></li>
    			<li><a href="#nogo">Service</a></li>
    		</ul>
    		
    		</div>
    
    	<div id="table1">
    		<div class="rbroundbox">
    	<div class="rbtop"><div></div></div>
    		<div class="rbcontent">
    			<h4>Service 1</h4>
    		<p>Erat augue ad exerci vel velit iriure ex nisl adipiscing iriure ut eros vel accumsan. Ut vel dolore nostrud lobortisiriure ex nisl adipiscing iriure ut eros vel accumsan. Ut vel dolore nostrud  dolor nibh hendrerit te. Quis, hendrerit in, minim iusto enimvel dolore nostrud lobortis dolor nibh hendrerit te.</p>
    		</div><!-- /rbcontent -->
    	<div class="rbbot"><div></div></div>
    </div><!-- /rbroundbox -->
    		
    		</div>
    
    	<div id="table2">
    		<div class="rbroundbox">
    	<div class="rbtop"><div></div></div>
    		<div class="rbcontent">
    		<h4>Service 2</h4>
    		<p>Erat augue ad exerci vel velit iriure ex nisl adipiscing iriure ut eros vel accumsan. Ut vel dolore nostrud lobortisiriure ex nisl adipiscing iriure ut eros vel accumsan. Ut vel dolore nostrud  dolor nibh hendrerit te. Quis, hendrerit in, minim iusto enimvel dolore nostrud lobortis dolor nibh hendrerit te.</p>
    	</div><!-- /rbcontent -->
    	<div class="rbbot"><div></div></div>
    </div><!-- /rbroundbox -->
    		</div>
    
    <div id="table3">
    		<div class="rbroundbox">
    	<div class="rbtop"><div></div></div>
    		<div class="rbcontent">
    		<h4>Service 3</h4>
    		<p>Erat augue ad exerci vel velit iriure ex nisl adipiscing iriure ut eros vel accumsan. Ut vel dolore nostrud lobortisiriure ex nisl adipiscing iriure ut eros vel accumsan. Ut vel dolore nostrud  dolor nibh hendrerit te. Quis, hendrerit in, minim iusto enimvel dolore nostrud lobortis dolor nibh hendrerit te.</p>
    	</div><!-- /rbcontent -->
    	<div class="rbbot"><div></div></div>
    </div><!-- /rbroundbox -->
    		</div>
    
    <div id="table4">
    		<div class="rbroundbox">
    	<div class="rbtop"><div></div></div>
    		<div class="rbcontent">
    		<h4>Service 4</h4>
    		<p>Erat augue ad exerci vel velit iriure ex nisl adipiscing iriure ut eros vel accumsan. Ut vel dolore nostrud lobortisiriure ex nisl adipiscing iriure ut eros vel accumsan. Ut vel dolore nostrud  dolor nibh hendrerit te. Quis, hendrerit in, minim iusto enimvel dolore nostrud lobortis dolor nibh hendrerit te.</p>
    	</div><!-- /rbcontent -->
    	<div class="rbbot"><div></div></div>
    </div><!-- /rbroundbox -->
    		</div>
    
    
    	<div id="content">
    
    	<BR CLEAR=LEFT><BR CLEAR=LEFT>
    
    	<div id="allservices"><a href="#nogo">View all Services>></a></div>	
    		<br>
    		<h3>blah balah blah balah blah</h3>
    		<p>Erat augue ad exerci vel velit iriure ex nisl adipiscing iriure ut eros vel accumsan. Ut vel dolore nostrud lobortisiriure ex nisl adipiscing iriure ut eros vel accumsan. Ut vel dolore nostrud  dolor nibh hendrerit te. Quis, hendrerit in, minim iusto enimvel dolore nostrud lobortis dolor nibh hendrerit te</p>
    <ul>
    			<li>blah balah blah balah blah</li>
    			<li>blah balah blah balah blah</li>
    			<li>blah balah blah balah blah</li>
    			<li>blah balah blah balah blah</li>
    
    		</ul>
    <br>
    
    
    				
    		
    		</div>
    
    	<div id="side2">
    		<br><br><br>
    		
    
    <div id="tableside">
    <div class="rbroundbox2">
    	<div class="rbtop2"><div></div></div>
    		<div class="rbcontent2">
    			<h5>blah blah blah</h5>
    		<p>We are blah blaha blah bla hakala</p><p>Read more>></p>
    		</div><!-- /rbcontent2 -->
    	<div class="rbbot2"><div></div></div>
    </div><!-- /rbroundbox2 -->
    		</div>
    	
    
    	
    	</div>
    
    
    </div>
    <div id="foot">
    	
    	<p><a href="#nogo">sitemap</a>	<a href="#nogo">privacy policy</a></p>
    	
    </div>
    </div>
    </body>
    </html>
    Last edited by razor41; 03-05-2009 at 03:46 AM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,739
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello razor41,
    Since #navbar isn't doing anything, get rid of it like this -
    Code:
    <div id="wrapper">
    <div id="head">
    	<img src=".jpg" alt="">
    </div>
      <ul id="navbar">  
        <li><a href="#">Home</a></li> 
        <li><a href="#">Services</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Contact Us</a></li> 
      </ul> 
    <div id="columns">
    	<div id="side1">
    And style your horzontal menu like this -
    Code:
    div#head {
    	width:760px;
    	height:220px;
    }
    ul#navbar { 
    	width:750px;
        margin:  0; 
        padding:5px;
        list-style-type: none; 
        text-align: left; 
        background: #000; 
        } 
    #navbar li {  
        display: inline; 
        } 
    #navbar li a { 
        text-decoration: none; 
        padding: .2em 2em; 
        color: #fff; 
        background: #000; 
        } 
    #navbar li a:hover { 
        color: #fff; 
        background: #666666; 
        }
    There is a few errors the validator finds that you can fix. See the links about validating in my sig below.


    ...
    Last edited by Excavator; 03-05-2009 at 03:32 AM.
    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
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,739
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    We can get your code from the link.
    Posting code is fine too, but please use [code] tags! It puts the code in a scroll box that makes your post MUCH more readable.
    You can go back and edit your original post.
    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

  • #4
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, tidyed up the code!
    Thanks for the advice, when I get a chance Ill try and fix it


  •  

    Posting Permissions

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