Solved

Works in IE not in Mozilla

Posted on 2008-10-14
2
290 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 500 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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
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…

758 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now