Solved

Works in IE not in Mozilla

Posted on 2008-10-14
2
311 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

[Webinar] Code, Load, and Grow

Managing multiple websites, servers, applications, and security on a daily basis? Join us for a webinar on May 25th to learn how to simplify administration and management of virtual hosts for IT admins, create a secure environment, and deploy code more effectively and frequently.

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
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... …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

739 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