Firefox 4 float issue

shaunob1 Peon

Messages:: 3

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#1

Hello,

I am having an issue with my website I am working on. I am newish to web design and have come across a issue with my positioning in firefox 4 only. Spent hours trying to find it but no luck so far. I was wondering if anyone can help me locate the issue.

http://www.necomputerfixed.co.uk

If you look in internet explorer or any other browser it displays correctly.

Here is my html.

<!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>April Hosting Template Copyright &copy; Fusioninet.com - 2011</title>
<link rel="stylesheet" type="text/css" href="./css/960.css"/>
<link rel="stylesheet" type="text/css" href="./css/reset.css"/>
<link rel="stylesheet" type="text/css" href="./css/text.css"/>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
</head>

<body>
    <div id="container" class="container_12">
    
          <div id="header" class="grid_5">
            
                <div id="logo" class="grid_5">
                </div><!--LogoEnd-->
                
          </div><!--headerEnd-->
            
          <div id="navigation" class="grid_12">
          
          		<ul class="mainNav">
                	<li class="current"><a href="#">Home</a></li>
       		    	<li><a href="about_us.html">About Us</a></li>
                    <li><a href="packages.html">Packages</a></li>
                    <li><a href="support.html">Support</a></li>
                    <li><a href="#">Clients</a></li>                
            </ul>            
          </div><!--navigationEnd-->
            
    <div id="advertArea" class="grid_12">
              <div id="adLeft" class="grid_4">
               	<h1>HOSTING SERVICES</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eros sapien, rhoncus id malesuada vitae, tempor at metus. Pellentesque sit amet dolor lorem, ac lobortis justo. Nam convallis molestie orci, a auctor dui semper vitae.</p>
              </div>
              <div id="adRight" class="grid_4">
              	<h1>RESELLER SERVICES</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eros sapien, rhoncus id malesuada vitae, tempor at metus. Pellentesque sit amet dolor lorem, ac lobortis justo. Nam convallis molestie orci, a auctor dui semper vitae.</p>
                              
              </div>
              
              <div id="domain" class="grid_6">
                <form method="post" action="whmcs/knowledgebase.php?action=search">
  <p>
    <input name="search" type="text" value="Search........" id="panel-search" size="30" />
    <select name="searchin">
      <option value="com">.com</option>
      <option value="co.uk">co.uk</option>
    </select>
    <input type="submit" value="Go" class="button"/>

  </p>
</form>
                </div><!--domainEnd-->
                
    </div><!--advertAreaEnd-->
            
          <div id="mainContentH" class="grid_12">
          
              <div id="mainContentLeft" class="grid_4">
              	<a href="#"><img src="./images/order_button.png" width="300px" height="89px" alt="Order Now" title"Order Now" /></a>
              		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eros sapien, rhoncus id malesuada vitae, tempor at metus. Pellentesque sit amet dolor lorem, ac lobortis justo. Nam convallis molestie orci, a auctor dui.</p>
              </div><!--mainContentLeftEnd-->
              
              <div id="mainContentMid" class="grid_4">
              	<a href="#"><img src="./images/order_button.png" width="300px" height="89px" alt="Order Now" title"Order Now" /></a>
              		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eros sapien, rhoncus id malesuada vitae, tempor at metus. Pellentesque sit amet dolor lorem, ac lobortis justo. Nam convallis molestie orci, a auctor dui.</p>
              
              </div><!--mainContentMidEnd-->
              
              <div id="mainContentRight" class="grid_4">
              	<a href="#"><img src="./images/order_button.png" width="300px" height="89px" alt="Order Now" title"Order Now" /></a>
              
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eros sapien, rhoncus id malesuada vitae, tempor at metus. Pellentesque sit amet dolor lorem, ac lobortis justo. Nam convallis molestie orci, a auctor dui.</p>
              
              </div><!--mainContentReftEnd-->
            
          </div><!--mainContentHEnd-->
            
          <div id="social" class ="grid_12" align="center">
          <ul>
              <li>
              	<a href="#"><img src="./images/digg.png" alt="Diggs" title="Diggs" /></a>
              </li>
              <li>
              	<a href="#"><img src="./images/google.png" alt="Google" title="Google" /></a>
              </li>
              <li>
              	<a href="#"><img src="./images/facebook.png" alt="Facebook" title="Facebook" /></a>
              </li>
              <li>
              	<a href="#"><img src="./images/twitter.png" alt="Twitter" title="Twitter" /></a>
              </li>
          </ul>

          </div><!--socialEnd-->  
          
    </div><!--containerEnd-->
<div id="footer" class="grid_12">
	<div id="bottomMenu" align="center">
    	<ul>
        	<li class"grid_4"><a href="termsandconditions.html">TERMS & CONDITIONS</a></li>
            <li class"grid_4"><a href="privacy.html">PRIVACY POLICY</a></li>
            <li class"grid_4"><a href="about_us.html">ABOUT OUR COMPANY</a></li>
        </ul>
    </div><!--bottomMenuEnd-->
    
    <div id="copyright" align="center">
    	<p>COPYRIGHT FUSIONINET.COM - 2011 ALL RIGHTS RESERVED</p>
    </div><!--copyrightEnd-->
          
 </div><!--footerEnd-->
    
    	
    
</body>
</html>

Code (markup):

I am using the 960 grid system. But im sure this is not causing any issues.

Here is my CSS:

@charset "utf-8";
/* CSS Document */

body {
	background:url(../images/bg.png) repeat-x;
	height: 100%;
	padding: 0px;
	margin: 0 auto;
	font-family: "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
}

#logo {
	background:url(../images/logo.png) no-repeat;
	width: 380px;
	height: 110px;
}

#navigation {
	background:url(../images/navigation.png) no-repeat;
	width: 940px;
	height: 46px;
	clear:both;
}

#navigation ul {
	list-style:none;
	width: 940px;
	height: 46px;
	
}

#navigation ul li {
	display:inline;
	color:fff;
	text-align:center;
	width:131px;
	height:46px;
}

#navigation ul li a {
	text-decoration:none;
	width:131px;
	height:46px;
	font-weight:500;
}

#container #navigation .mainNav {
	width: 940px;
	height: 46px;
}

#container #navigation .mainNav li a {
	float:left;
	width:131px;
	height:46px;
	color:#FFF;
	font-size:18px;
	font:Verdana, Geneva, sans-serif;
	margin: 0px 0px 0px 20px;
	padding: 10px 0px 0px 0px;
	text-align:center;
}

#container #navigation .mainNav li a:hover {
	float:left;
	width:131px;
	height:46px;
	color:#CCC;
	font-size:18px;
	font:arial;
	margin: 0px 0px 0px 20px;
	padding: 10px 0px 0px 0px;
	text-align:center;
}

#container #navigation .mainNav .current a {
	float:left;
	width:131px;
	height:46px;
	background:url(../images/current.png) no-repeat;
	color:#333;
	font-size:18px;
	font:arial;
	text-align:center;
}

#container #navigation .mainNav .current a:hover {
	float:left;
	width:131px;
	height:46px;
	background:url(../images/current.png) no-repeat;
	color:#333;
	font-size:18px;
	font:arial;
	text-align:center;
}

#advertArea {
	background:url(../images/advert_area.png) no-repeat;
	width: 940px;
	height: 239px;
}

#adLeft {
	float:left;
}

#adLeft h1 {
	margin:0px;
	padding:10px 0 0 0;
	text-align:center;
}

#adLeft p {
	margin:0px;
	padding:10px 0 0 0;
	text-align:center;
}

#adRight {
	float:right;
	text-align:center;
}

#adRight h1 {
	margin:0px;
	padding:10px 0 0 0;
	text-align:center;
}

#adRight p {
	margin:0px;
	padding:10px 0 0 0;
	text-align:center;
}

#domain {
	clear:both;
	float:right;
	margin: 50px 90px 0px 0px;
}

#mainContent {
	padding: 0px;
	margin:0px;
	width: 940px;
	height: auto;
	margin: 29px 0 0 10px;
	background:#FFF;
	clear:both;
}

#mainContentRoundFix {
	clear:both;
	background:url(../images/roundpage_fw.png) no-repeat;
	width:940px;
	height:16px;
	padding:0px;
	margin:0 0 0 10px;
}

#packageTable {
	margin:0px;
	padding:20px;
}

#supportPage {
	margin:0px;
	padding:20px;
}


#mainContentH {
	background:url(../images/main_content_h.png) no-repeat;
	width: 940px;
	height: 448px;
	margin: 29px 0 0 10px;

}

#mainContentLeft {
	width: 300px;
	height: 89px;
	margin: 250px 0 0 0;
}

#mainContentLeft p{
	margin: 0px;
	padding: 0 10px;
	text-align:center;
}

#mainContentMid {
	width: 300px;
	height: 89px;
	margin: 250px 0 0 10px;
}

#mainContentMid p{
	margin: 0px;
	padding: 0 10px;
	text-align:center;
}

#mainContentRight {
	width: 300px;
	height: 89px;
	margin: 250px 0 0 30px;
}

#mainContentRight p{
	margin: 0px;
	padding: 0 10px;
	text-align:center;
}

#social {
	clear:both;
	height: 47px;
}

#social ul {
	list-style:none;
	display:block;
	padding: 0px 10px 0px 0px;
}

#social li {
	display:inline;
}

#social ul li a img {
	width: 60px;
}

#footer {
	background:url(../images/bg_foot.png) repeat-x;
	height: 100px;
	width: 100% ;
	margin: 0px;
	padding: 0px;
}

h1 {
	color:#5d8686;
	font:Verdana, Geneva, sans-serif;
}

p {
	color:#5d8686;
	font:Verdana, Geneva, sans-serif;
}

#bottomMenu {
}

#bottomMenu ul {
	list-style:none;
	padding-top:14px;
}

#bottomMenu ul li {
	display:inline;
}

#bottomMenu ul li a {
	text-decoration:none;
	text-align:center;
	font:Arial;
	font-size:12px;
	color:#5d8686;
	padding: 0;
}

#bottomMenu ul li a:hover {
	text-decoration:none;
	text-align:center;
	font:Arial;
	font-size:12px;
	color:#666;
	padding: 0;
}

#copyright {
	text-decoration:none;
	text-align:center;
	font:Arial;
	font-size:11px;
	color:#5d8686;
	padding: 12px 0 0 0;
}

td {
	height: 30px;
	text-align:center;
}

th {
	text-align:center;
}

.odd {
	background:#CCC;
}

td.order a {
	display:block;
	background:url(../images/order_now.png) no-repeat;
	width:140px;
	height:40px;
	font-size:24px;
	text-decoration:none;
	text-align:-100em;
}

td.order a:hover {
	display:block;
	background:url(../images/order_now_hover.png) no-repeat;
	width:140px;
	height:40px;
	font-size:24px;
}

.order a span
{
  position: absolute;
  top: -999em;
}

#supportPage a {
	text-decoration:none;
	font:ariel;
	font-weight:bold;
	font-size:14px;
}
#col1 {
	float:left;
	padding:0 0 0 15px;
	margin:0px;
}

#col2 {
	float:left;
	padding:0 0 0 15px;
	margin:0px;

}

#col3 {
	float:left;
	padding:0 0 0 15px;
	margin:0px;
}

#col4 {
	float:left;
	padding:0 0 0 15px;
	margin:0px;
}

Code (markup):

Thank you for any help in advance.

Shaun

shaunob1, Apr 18, 2011 IP

artus.systems Well-Known Member

Messages:: 87

Likes Received:: 1

Best Answers:: 1

Trophy Points:: 103

#2

It looks same in FF 3.6.16

artus.systems, Apr 18, 2011 IP

shaunob1 Peon

Messages:: 3

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#3

Works fine for me in 3.6?

shaunob1, Apr 18, 2011 IP

shaunob1 Peon

Messages:: 3

Likes Received:: 0

Best Answers:: 0

Trophy Points:: 0

#4

Problem solved was due to having adblock add on installed. It read the advert div and blocked it. Learn something new everyday. Hope it helps if anyone gets the same issue. Rule don't add divs with "adv" in them. School boy error but hey im learning.

shaunob1, Apr 20, 2011 IP

Log in or Sign up

Firefox 4 float issue

shaunob1 Peon

artus.systems Well-Known Member

shaunob1 Peon

shaunob1 Peon

Useful Searches