...
PDA

Getting float and menu looking the same in all browsers?

razor41
03-05-2009, 01:22 AM
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!):

<!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>
Excavator
03-05-2009, 02:30 AM
Hello razor41,
Since #navbar isn't doing anything, get rid of it like this -<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 -

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.


...
Excavator
03-05-2009, 02:34 AM
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.
razor41
03-05-2009, 02:47 AM
Ok, tidyed up the code!
Thanks for the advice, when I get a chance Ill try and fix it

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum