Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Works in IE not in Mozilla

Posted on 2008-10-14
2
Medium Priority
?
334 Views
Last Modified: 2012-05-05
Hello, can someone please firebug this link and tell me how to fix my float issue???
the site works fine in IE but not in Mozilla. I've tried all sorts of things and can't figure it out. Please let me know if you need additional information.

Here is the page in question. http://790tint.com/Automotive.aspx

I have also attached the css and html.
the CSS:
 
 
body {
	margin: 0;
	padding: 0;
	background: #000000 url(images/BlueBG.jpg) repeat-x;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #FFFFFF;
}
 
h1, h2, h3 {
	margin: 0;
	font-weight: normal;
	color: #FFFFFF;
}
 
h1 {
	font-size: 197%;
}
 
h2 {
	font-size: 167%;
}
 
h3 {
	font-size: 100%;
	font-weight: bold;
}
 
p, ol, ul {
	line-height: 170%;
}
 
p {
}
 
ol {
	margin-left: 0;
	padding-left: 0;
	list-style-position: inside;
}
 
ul {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}
 
ul li {
	padding-left: 15px;
	background: url(images/img07.gif) no-repeat 0px 7px;
}
 
blockquote {
	margin: 0;
	padding-left: 20px;
	font-style: italic;
}
 
blockquote * {
	line-height: normal;
}
 
a {
	color: #666666;
}
 
a:hover {
	text-decoration: none;
	color: #A60000;
}
 
img {
	border: 5px solid #07159b;
}
 
img.left {
	float: left;
	margin: 3px 15px 0 0;
}
 
img.right {
	float: right;
	margin: 3px 0 0 15px;
}
 
hr {
	display: none;
}
 
/* Menu */
 
#menu {
	width: 760px;
	height: 80px;
	margin: 0 auto;
	padding: 0 5px 5px 5px;
	background: #545454;
}
 
#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: normal;
}
 
#menu li {
	display: inline;
	margin: 0;
	padding: 0;
}
 
#menu a {
	display: block;
	float: left;
	width: 125px;
	height: 53px;
	padding: 27px 0 0 0;
	background: #07159b url(images/Up.jpg) no-repeat;
	border-left: 2px solid #07159b;
	text-decoration: none;
	text-align: center;
	font-size: 136%;
	color: #FFFFFF;
}
 
/*A60000 the old borderleft from menu a*/
#menu a:hover {
	background: #07159b url(images/Hover.jpg) no-repeat;
	color: #000000;
}
 
#menu .active a 
{
	
	background: #07159b url(images/Active.jpg) no-repeat;
	border: none;
	color: #ffffff;
}
 
/* Header */
 
#header 
{
	clear:both;
	width: 760px;
	height: 220px;
	margin: 0 auto;
	padding: 0 5px 5px 5px;
	background: #545454;
}
 
/* Logo */
 
#logo 
{
 
	float: right;
	width: 345px;
	height: 220px;
	background: #545454 url(images/Logo.jpg) no-repeat;
}
#PictureRotator
{
	float:left;}
 
 
#logo h1, #logo h2 {
	text-align: center;
}
 
#logo h1 {
	padding-top: 77px;
	font-size: 240%;
}
 
#logo h2 {
	font-size: 150%;
}
 
#logo a {
	text-decoration: none;
	color: #FFFFFF;
}
 
/* Page */
 
#page {
	width: 730px;
	margin: 0 auto;
	padding: 30px 0;
}
 
/* Content */
 
#content {
	float: left;
	width: 375px;
	padding-top: 8px;
}
 
.twocols {
}
 
.twocols .title {
	padding-bottom: 10px;
	border-bottom: 1px solid #07159b;
}
 
.twocols .col1, .twocols .col2 {
	width: 175px;
}
 
.twocols .col1 {
	float: left;
}
 
.twocols .col2 {
	float: right;
}
 
.twocols ul {
}
 
.twocols ul li {
	padding-left: 0;
}
 
 
/* Max Content */
 
#maxcontent 
{
	clear:left;
	float: left;
	width: 730px;
	padding-top: 8px;
	
}
 
.mallcols 
{
 
width:700px;
margin-bottom:20px;
 
}
 
.mtwocols 
{
	color:#000000;
 
}
 
.mtwocols .mtitle {
	padding-bottom: 10px;
	border-bottom: 1px solid #07159b;
}
 
.mtwocols .mcol1, .mtwocols .mcol2 {
	width: 300px;
		margin-bottom:20px;
}
 
.mtwocols .mcol1 
{
background-color:#eaeaea;
	float: left;
	padding-left: 5px;
}
 
.mtwocols .mcol2 
{
		margin-left: 5px;
	background-color:#cccccc;
	float: left;
	padding-left: 5px;
}
 
.mtwocols ul {
}
 
.mtwocols ul li {
	padding-left: 0;
}
 
 
.mthreecols 
{
	color:#000000;
 
 
}
.mthreecols .mcol1, .mthreecols .mcol2, .mthreecols .mcol3 {
	width: 220px;
		margin-bottom:20px;
}
 
.mthreecols .mcol1 {
	float: left;
	background-color:#e8e8e8;
	padding-left: 5px;
}
.mthreecols .mcol2 
{
	
	float: left;
	margin-left: 5px;
	padding-left: 5px;
 
	background-color:#cccccc;
}
 
.mthreecols .mcol3 {
	float: left;
	background-color:#999999;
	margin-left: 5px;
	padding-left: 5px;
}
 
 
/* Sidebar */
 
#sidebar {
	float: right;
	width: 310px;
}
 
.boxed {
}
 
.boxed .title {
	height: 33px;
	margin: 0;
	padding: 12px 0 0 20px;
	background: #07159b url(images/TitleBG.jpg) no-repeat;
	text-transform: uppercase;
	font-size: 136%;
	color: #FFFFFF;
}
 
.boxed .content {
	padding: 20px;
}
 
.boxed h3 {
	margin: 0;
}
 
.boxed p, .boxed ul, .boxed ol {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: normal;
}
 
.boxed ul {
}
 
.boxed ul li {
	padding: 10px 15px;
	border-top: 1px solid #666666;
}
 
.boxed ul li.first {
	border: none;
}
 
/* Search */
 
#search {
}
 
#search form {
	margin: 0;
	padding: 0;
}
 
#search fieldset {
	margin: 0;
	padding: 0;
	border: none;
}
 
#search p {
	margin: 0;
	font-size: 85%;
}
 
#searchinput {
	width: 180px;
}
 
#searchsubmit {
}
 
/* Footer */
 
#footer {
	width: 740px;
	margin: 0 auto;
	height: 30px;
	padding: 10px;
	background: #07159b url(images/TitleBG.jpg);
}
 
#footer p {
	margin: 0;
	line-height: normal;
	font-size: 85%;
}
 
#footer a {
}
 
#legal {
	float: left;
}
 
#links {
	float: right;
}
 
/** sub navigation*/
    #subNav{
        float:left;
        width: 375px; 
        height:30px;
        margin-top: 15px;
        margin-left: -10px; 
       }
 
    #subNav ul {
        margin:0; 
        font-size: 101%;
        font-weight: bold;
     
        padding-left: 2px;}
 
    #subNav li{
        float:left;
       
        text-decoration:none;}
 
    #subNav a {
        display:block;
        text-decoration:none;
        color:#ffffff;}
 
    #subNav a:hover, #subNav .active a {
        display:block;
        text-decoration:none;
        color:#ff0000;}
        ****************************************************************
       The HTML:
<%@ Page Title="" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="Automotive.aspx.vb" Inherits="Automotive" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div id="menu">
	<ul>
		<li><a href="Default.aspx">Home</a></li>
		<li><a href="Products.aspx">Products</a></li>
		<li><a href="Contact.aspx">Contact</a></li>
		<li><a href="Location.aspx">Location</a></li>
		<li><a href="OurWork.aspx">Our Work</a></li>
		<li><a href="GetQuote.aspx">Get A Quote</a></li>
	</ul>
</div>
<div id="header">
<div id="PictureRotator">
        <!-- flash picture rotator -->
    <object style="HEIGHT: 220px; text-align: center;" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" 
        height="220" width="410" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"> 
        <param name="_cx" value="24553"/> 
        <param name="_cy" value="1376"/> 
        <param name="FlashVars" value=""/> 
        <param name="Movie" value="PictureRotator.swf"/> 
        <param name="Src" value="PictureRotator.swf"/> 
        <param name="WMode" value="Window"/> 
        <param name="Play" value="-1"/> 
        <param name="Loop" value="-1"/> 
        <param name="Quality" value="High"/> 
        <param name="SAlign" value=""/> 
        <param name="Menu" value="-1"/> 
        <param name="Base" value=""/> 
        <param name="AllowScriptAccess" value="always"/> 
        <param name="Scale" value="ShowAll"/> 
        <param name="DeviceFont" value="0"/> 
        <param name="EmbedMovie" value="0"/> 
        <param name="BGColor" value="#000000"/> 
        <param name="SWRemote" value=""/> 
        <param name="MovieData" value=""/> 
        <embed src="PictureRotator.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="410px" height="220px"> </embed> 
    </object>
    
        <!-- flash object activate control script -->
    <script type="text/javascript" src="ieupdate.js"></script>
</div>
	<div id="logo">
		
	</div>
</div>
<div id="page">
	<div id="content">
		<div style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #999999;">
			<h2 class="title">Automotive</h2>
			  <div id="subNav">
                  <ul>
                        <li class="active"><a href="Automotive.aspx" accesskey="1" title="Automotive">Automotive</a></li>
                        <li><a href="Commercial.aspx" accesskey="2" title="Commercial">Commercial</a></li>
                        <li><a href="Residential.aspx" accesskey="3" title="Residential">Residential</a></li>
                        <li><a href="Why3m.aspx" accesskey="4" title="Why 3M?">Why 3M?</a></li>
                         <li><a href="Facts.aspx" accesskey="5" title="Facts">Facts</a></li>
                     
                   </ul>
                   
                    <!-- end subNav -->
                    </div>
		</div>
		<div>&nbsp;</div>
		</div>
	<!-- end content -->
	<div id="maxcontent">
<div class="mallcols">
<asp:Image id="imgautomotive_window_tinting" runat="server" ImageUrl="~/Images/automotive_window_tinting.jpg" 
 BorderWidth="10px" BorderColor="Transparent" BorderStyle="Solid" ImageAlign="Left" /> 
 
<p><b style="font-size: 130%; color: #FF0000; font-weight: 900"> 3M</b>
<b style="font-size: 130%; color: #ffffff; font-weight: 900"> Automotive Window film</b>
 is a protective layer that adds privacy and safeguards 
your passengers and the cars interior. 3M Window films block 99.9% of the suns 
ultraviolet rays and reflect up to 97% of the Infrared heat that may otherwise come 
through your car windows. This helps prevent cracks in your dashboard and fabrics 
from fading. Having window film is also easier on the eyes, offering day and night 
glare reduction to minimize eye strain. Window films also help to cool the interior 
of the car so everyone rides in comfort. Different shading levels from clear to dark 
are available.</p>
 
<p>
<b style="font-size: 160%; color: #ffffff; font-weight: 900">Good</b>
<b style="font-size: 130%; color: #FF0000; font-weight: 900"> 3M</b>
<b style="font-size: 130%; color: #ffffff; font-weight: 900"> High Performance Window film</b> 
This high performance line of window films offers unbeatable solar performance with a great sleek 
charcoal look. The FX-HP line of automotive window films comes in a variety of light transmissions, 
with a limited lifetime warranty.
</p>
</div>
<div class="mthreecols">
<div class="mcol1">
<b style="font-size: 120%; color: #000000; font-weight: 900">3M" High-Performance 35%</b><br />
<p>38% Visible light transmission<br />
11% Visible light reflection<br />
49% Total solar energy rejected<br />
99% UV reduction<br />
</p>
</div>
<div class="mcol2">
<b style="font-size: 120%; color: #000000; font-weight: 900">3M" High Performance 20%</b><br />
 
<p>22% Visible light transmission<br />
9% Visible light reflection<br />
54% Total solar energy rejected<br />
99% UV reduction<br /></p>
</div>
<div class="mcol3">
<b style="font-size: 120%; color: #000000; font-weight: 900">3M" High Performance 5%</b><br />
 
<p>5% Visible light transmission<br />
8% Visible light reflection<br />
58% Total solar energy rejected<br />
99% UV reduction<br /></p>
</div>
 
</div>
<div class="mallcols">
<p>
<b style="font-size: 160%; color: #ffffff; font-weight: 900">BETTER</b>
 <b style="font-size: 130%; color: #FF0000; font-weight: 900">3M</b>
<b style="font-size: 130%; color: #ffffff; font-weight: 900">Nano-Carbon Window Film</b>
 Introducing the new and improved, innovative 3M" Color-Stable Auto Window Film. 3M" Color- Stable 
 Window Film will never fade to purple as the film ages, it is coated with a 
 durable, scratch resistant covering, the metal free construction will not interfere 
 with your electronics, and has superior UV and heat rejection performance at darker 
 shades. 3M is a leader in creating technology-advanced metal free window films. 
 The lifetime warranty insures years of performance without having to replace your 
 car's window film</p>
</div>
<div class="mthreecols">
<div class="mcol1">
<b style="font-size: 120%; color: #000000; font-weight: 900">3M" Nano-Carbon 35%</b><br />
<p>
38% Visible light transmitted<br />
39% Total solar energy rejected<br />
40% Infrared rejected<br />
99% UV light rejected<br />
7% Visible light reflected<br />
57% Glare reduction<br />
26% Solar heat reduction<br />
 
</p>
</div>
<div class="mcol2">
<b style="font-size: 120%; color: #000000; font-weight: 900">3M" Nano-Carbon 20%</b><br />
 
<p>
16% Visible light transmitted<br />
52% Total solar energy rejected<br />
59% Infrared rejected<br />
99% UV light rejected<br />
6% Visible light reflected<br />
82% Glare reduction<br />
41% Solar heat reduction<br />
</p>
</div>
<div class="mcol3">
<b style="font-size: 120%; color: #000000; font-weight: 900">3M" Nano-Carbon 5%</b><br />
 
<p>
8% Visible light transmitted<br />
58% Total solar energy rejected<br />
72% Infrared rejected<br />
99% UV light rejected<br />
6% Visible light reflected<br />
92% Glare reduction<br />
49% Solar heat reduction<br />
</p>
</div>
 
</div>
<div class="mallcols">
<p>
<b style="font-size: 160%; color: #ffffff; font-weight: 900">Best</b>
 <b style="font-size: 130%; color: #FF0000; font-weight: 900">3M</b>
<b style="font-size: 130%; color: #ffffff; font-weight: 900">Crystalline Automotive Window Film</b>
The new 3M" Crystalline Automotive Window Films offer a clear breakthrough in automotive solar 
protection. These films are metal-free, resulting in an easy-to-maintain, long-life film that 
wont interfere with car electronics. The Crystalline films feature a proprietary multi layer 
technology that combines more than 200 layers in a film that is thinner than a Post-it® Note.
<br /><br />
With 3M" Crystalline Automotive Window Films, you get the most trusted name in the window film 
industry. 3M products have provided protection from the sun's harmful rays for more than 40 years. 
These films offer superior protection, comfort and style, and the Crystalline line is no different.
</p>
 
<p>&bull; Breakthrough multi layer Nanette<br />
                      &bull; Reduced reflectivity compared to traditional films<br />
                      &bull; Added safety and security for driver and passengers<br />
                      &bull; 99.9% UV protection (SPF 1700+)<br />
                      &bull; Reflects more heat than many of the darkest tints available<br />
                      &bull; Advanced heat rejection capability<br />
                      &bull; Metal-free design with no electronic interference*<br />
                      &bull; National lifetime manufacturer's warranty<br />
                    </p>
</div>
<div class="mtwocols">
<div class="mcol1">
<b style="font-size: 120%; color: #000000; font-weight: 900">3M" Crystalline 70%</b><br />
<p>68% Visible Light Transmitted<br />
50% Total Solar Energy Rejected<br />
59% On Angle<br />
97% Infrared Rejected<br />
38% Solar Heat Reduction<br />
9% Visible Light Reflection Int.<br />
9% Visible Light Reflection Ext.<br />
99.9% UV Rejected<br />
23% Glare Reduction<br /></p>
 
</div>
<div class="mcol2">
<b style="font-size: 120%; color: #000000; font-weight: 900">3M" Crystalline 40%</b><br />
<p>39% Visible Light Transmitted<br />
59% Total Solar Energy Rejected<br />
66% On Angle<br />
97% Infrared Rejected<br />
50% Solar Heat Reduction<br />
6% Visible Light Reflection Int.<br />
7% Visible Light Reflection Ext.<br />
99.9% UV Rejected<br />
56% Glare Reduction<br /></p>
</div>
 
</div>
<div class="mallcols" style="clear:left; text-align:center">
 <b style="font-size: 160%; color: #ffffff; font-weight: 900">790 Tint a </b>
 <b style="font-size: 130%; color: #FF0000; font-weight: 900"> 3M</b> 
 <b style="font-size: 160%; color: #ffffff; font-weight: 900">Authorized Window Film Dealer</b>
 
</div>
</div>
 
 
	<div style="clear: both;">&nbsp;</div>
</div>
<!-- end page -->
<div id="footer">
	<p id="legal">790 Tint All Rights Reserved<br />
		</p>
	<p id="links"><a href="Privacy.aspx">Privacy</a> | <a href="Terms.aspx">Terms</a> | <a href="Admin/Default.aspx">Admin</a></p>
</div>
 
<asp:Label ID="lblMessage" runat="server" ForeColor="Red"></asp:Label>
 
</asp:Content>

Open in new window

0
Comment
Question by:gogetsome
2 Comments
 
LVL 16

Accepted Solution

by:
sh0e earned 2000 total points
ID: 22713009
width: 760px < (width: 125px + 2px) *6
#menu width < (<a> width + border width) * number of <a>
760 < 762

Which is why it overflows.  It works in IE because IE just resizes the div to fit.  If you look more closely, it is not actually behaving the way you want in IE.  The #menu width is 762px.

Solution:
Either resize the border width
#menu a { border-left: 1px solid #07159b; }

Or change the widths from 760 to 762
#header { width: 762 }
#menu { width: 762 }
0
 

Author Closing Comment

by:gogetsome
ID: 31505946
Awesome!
Thank you for your help and complete explaination. It works perfectly!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

963 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question