MSIE 8 size larger than Firefox 3.6

mottwsc · February 25, 2011

When I view my or other web pages in MSIE 8, it displays about 40% larger than looking at the same pages in Firefox 3.6. My concern is that, for users viewing my site, I don't want the sizing to change (at least not that much), since it messes up my layout. Is there a way, through CSS, to fix this problem (assuming I can detect the browser type)?

Thanks for any help...

haku · February 25, 2011

You may be zoomed in or out on one or both of the pages you are looking at. Press ctrl + 0 (zero) while looking at your page in each browser to reset it to the normal size.

cssfreakie · February 25, 2011

Also a reset.css could be a nice thing to have. to eliminate most browser differences.

Just google: what is a reset.css and the first link is the good one (meyers reset).

mottwsc · February 27, 2011

OK - I'm providing the specific screen shots and code in order to describe the problems. The attached Word doc shows the screens and describes what is happening. I've included several pieces of code below.

PROBLEM 1:

The footer is centered but the rest of the page is not.

PROBLEM 2:

The main menu overflows when zooming to 125% in Firefox 3.6.

Thanks for any specific guidance!

Here's the page that is being displayed:

<?php
require("header1.php");
echo "<title>ABCO</title>";
?>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/videobox.js"></script>

<link rel="stylesheet" href="css/videobox.css" type="text/css" media="screen" />
<?php
require("header2.php");
?>
<body class="front">
<div id="wrapper">
	<div id="header" style="margin-left:21px;">
<?php		
		echo "<a href='home'><img class='logo' src='/images/blank.png' alt='' /></a>
		<ul class='primary-menu'>";

		require("menu2.php");

		echo "</ul>";
?>
	<div class="clear"></div>
	</div>
	<div id="banner">
		<div class="bannerhead">
			<h1 class="logo-big">ABCO</h1>
			<h2 class="tagline">AB AB AB</h2>
		</div>
		<div class="clear"></div>
	</div>
	<div id="frontboxes">
		<div class="frontbox frontbox-small">

		</div>
		<div class="frontbox frontbox-big">

		</div>
		<div class="frontbox frontbox-small">

	</div>
	<div class="clear"></div>
</div>
<div class="clear"></div>

<?php
require("footer.php");
?>

</body>
</html>

Here's header1.php:

<!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" />

Here's header2.php:

<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="/05_a/style.css" type="text/css" />
<link rel="stylesheet" href="/05_a/typography.css" type="text/css" />
</head>

<?php
$divBackgroundColor = "FFFFFF";		# white
?>

Here's the menu bar - menu2.php:

<?php
			echo "
			<li><a href='01.html'>Test0001</a></li>
			<li><a href='02.html'>Test2</a></li>
			<li><a href='03.html'>Test 00003</a></li>
			<li><a href='04.html'>Test00 000004</a></li>
			<li><a href='05.html'>Test0005</a></li>
			<li><a href='06.html'>Test00000006</a></li>
			<li><a href='07.html'>Test0007</a></li>
			<li><a href='08.html'>Test 00008</a></li>
			";
?>

Here's the footer - footer.php:

<?php
echo "
<div id='footer'>
	<div class='wrapper'>
		<span class='left'>© ".date('Y')."   ABCO, LLC</span>		
		<span class='right'>
		";
		if( isset($auth) )
		{
			if( $auth == "yesIndeed" )
			{ echo "<a href='/abc_how_to.html'>How To</a> | "; }
		}
		echo "
		<a href='/abc_terms.html'>Terms of Use</a> | <a href='/abc_privacy.html'>Privacy</a> | <a href='/abc_contact.html'>Contact</a></span>
	<div class='clear'></div>
	</div>
</div>
";
?>

Here's the main style sheet - style.css:

/* -------------------------------------------------------------- 
   
   style.css
   Sets up main style.
   
-------------------------------------------------------------- */

html, #wrapper {
height: 100%;
min-width:1000px;	/* added */
}

body > #wrapper{
height: auto;
min-height: 100%;
min-width:1000px;	/* added */
}

body.front{
background:#fff url(../images/body-front-bg.png) repeat-x 0 60px;
/* background:#fff url(../images/body-front-bg.png) repeat-x 0 62px; */
margin:0;
}

body.interior{
margin:0;
}

.wrapper{
margin:0 auto;
width:960px;
}

/* Header */
body.front #header{
float:left;
height:62px;
/* height:62px; */
/* width:100%; */
width:960px;
/* border-bottom:8px solid #08408C; */  /* new */
/*float:left;  this does nothing */
}

body.interior #header{
float:left;
height:60px;
/* height:62px; */
width:100%;
border-bottom:8px solid #08408C;
}

.logo{
background:url(../images/logoTEST.png) no-repeat;
width:187px;
height:50px;
float:left;
border:medium none;
margin:5px 0 0 10px;
/* margin:5px 0 0 10px; */
}

.logo-bottom{
background:url(../images/logo-videos.png) no-repeat;
width:187px;
height:50px;
float:left;
border:medium none;
margin:25px 0 0 44px;
/* margin:5px 0 0 10px; */
}

.maintenance{
margin:27px 0 0 90px;
text-align:center;
color:#c71585;
font-size:13px;
font-style:italic;
font-weight:bold;
border:2px solid #c71585;
max-width:800px;
}

/* Body */
#main{
background:#30524A;  /* this is the color used behind the border */
width:100%;	
/* height:485px; */		
height:458px;
float:left;
position:relative;
}

#border{
width:960px;
/* height:485px; */
height:458px;
margin:0 auto;
position:relative;
}

#scenery{
height:100%;
position:absolute;
width:100%;
}

#scrollDefault{				/* this is the box for the default background */
background:#fff;
/* width:910px; */
width:800px;
height:350px;
overflow:auto;
/* padding:20px; */
padding:20px;
/* margin:40px 0; */
/* margin:47px 57px 0 0;	/* position of box against background */
margin:36px 60px 0 0;	/* position of box against background */
/* float:left; */
float:right;
}

#scroll{				/* this is the box if there is scenery */
background:#fff;
/* width:910px; */
width:800px;
height:350px;
overflow:auto;
/* padding:20px; */
padding:20px;
/* margin:40px 0; */
/* margin:47px 57px 0 0;	/* position of box against background */
margin:31px 57px 0 0;	/* position of box against background */
/* float:left; */
float:right;
border:5px solid #125E9A;
}

.border-extra1{
background:url(../images/border-extra1.png) no-repeat;
width:103px;
height:97px;
position:absolute;
left:69px;
top:40px;
z-index:999;
}

.border-extra2{
background:url(../images/border-extra2.png) no-repeat;
width:183px;
height:153px;
position:absolute;
left:69px;
bottom:55px;
z-index:999;
}

.border-extra3{
background:url(../images/border-extra3.png) no-repeat;
width:80px;
height:15px;
position:absolute;
right:141px;
top:40px;
z-index:999;
}

.border-extra4{
background:url(../images/border-extra4.png) no-repeat;
width:91px;
height:18px;
position:absolute;
right:165px;
bottom:55px;
z-index:999;
}

#banner{
float:left;
height:200px;	/* height of blue banner before white starts again */
width:960px;
}

.bannerhead{
width:754px;
height:130px;
margin:30px auto 0 auto;
}

h1.logo-big{
background:url(../images/logo-bigTEST.png) no-repeat;
width:486px;
height:130px;
float:left;
border:medium none;
overflow:hidden;
text-indent:3000px;
white-space:nowrap;
margin:0;
padding:0;
}

h2.tagline{
background:url(../images/taglineTEST.png) no-repeat;
width:258px;
height:67px;
float:left;
overflow:hidden;
text-indent:3000px;
white-space:nowrap;
margin:50px 0 0 10px;
padding:0;
}

.bannermain{
background:url(../images/bannermain-bg.png) no-repeat;
width:897px;
height:275px;
margin:20px auto 0 auto;
}

#frontboxes{
float:left;
height:240px;
width:960px;
/*padding:0 15px;*/
padding:0 0 25px 25px;
margin:10px 0 0 0;
}

.frontbox{
height:240px;
max-height:240px;
border:1px solid #b1b1b1;
-moz-border-radius:5px;
float:left;
margin:0 0 0 20px;
width:auto;
}

.frontbox:first-child{
margin:0;
}

.frontbox-small{
width:218px
}

.frontbox-right{
/*width:218px;
height:200px;
float:left;
border:medium none;*/
margin:10px 0 0 -5px;
}

.frontbox-big{
width:458px;
}


/* Menus */
ul.primary-menu{
width:748px;
float:right;
margin:12px 0 0 15px;
padding:0;
list-style:none;
}

ul.primary-menu li {
float:left;
line-height:15px;
list-style-type:none;
margin:5px 5px 0 0;
overflow:hidden;
padding:0;
width:auto;
}

ul.primary-menu li:hover{
background:transparent url(../images/nav-active.gif) no-repeat scroll left top;
color:#FF4E2C;
}

ul.primary-menu li a{
display:block;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
margin:0 0 0 10px;
padding:5px 12px 6px 2px;
text-decoration:none;
text-transform:uppercase;
color:#2c2c2c;
}

ul.primary-menu li:hover a{
background:transparent url(../images/nav-active.gif) no-repeat scroll right top;
color:#FFFFFF !important;
text-decoration:none;
}

/* Sidebar */
#sidebar{
/* width:200px; */
width:170px;
/* padding:0 20px 0 0; */
padding:14px 0 0 18px;		/* this controls the c__n placement */ 
float:left;
}

.note{
text-align:center;
clear:both;
}




/* Footer */
#footer{
border-top:8px solid #08408c;
/* padding:10px 0; */
padding:8px 0;
width:100%;
}

#footer-wrap{
width:960px;
margin:0 auto;
color:#2C2C2C;
}

#footer-wrap a{
color:#125E9A;
}

#footer .right a{
color:#2C2C2C;
}

#footer .left{
margin:0 0 0 15px;
}

#footer .right{
margin:0 15px 0 0;
}

Here's the default topography css - topography.css:

/* -------------------------------------------------------------- 
   
   typography.css
   Sets up default typography.
   
-------------------------------------------------------------- */

/* Default font settings */
body{ 
font-family:arial,Verdana,sans-serif;
font-size:13px;
color:#39395e;
}


/* Headings */
h1,h2,h3,h4,h5,h6{ 
font-weight: normal; 
color: #000; 
margin-top: 10px;
}

h1{
font-size: 29px;
line-height: 1;
margin-bottom: 0.3em;
color:#9ecd67;
}

h2{
font-size: 27px;
margin-bottom: 0.75em;
}

h3{
font-size: 24px;
line-height: 1;
margin-bottom: 1em;
}

h4{
font-size: 21px;
line-height: 1;
margin-bottom: 1.25em;
}

h5{
font-size: 18px;
font-weight: bold;
margin-bottom: 1.5em;
}

h6{
font-size: 15px;
font-weight: bold;
}

h1 img, h2 img, h3 img, 
h4 img, h5 img, h6 img{
margin: 0;
}


/* Text elements */
p{
margin: 0 0 15px 0; 
line-height:16px;
}

p img.left {
float: left;
margin: 1.5em 1.5em 1.5em 0;
padding: 0;
}

p img.left-top { float: left; margin: 0.5em 1.5em 1.5em 0; padding: 0; }

p img.right{
float: right;
margin: 1.5em 0 1.5em 1.5em;
}

p img.right-top{
float: right;
margin: 0.5em 0 1.5em 1.5em;
}

a:focus, a:hover{
text-decoration: underline; 
}

a{ 
color: #dc4848; 
text-decoration: none; 
outline: none;
}

blockquote{
background:#ececec;
margin:0 0 1.5em 0.7em;
padding:10px;
color:#000000;
display:block;
border-left:2px solid #d3d3d3;
font-style:italic;
}

blockquote p{
margin:0;
}

strong{
font-weight: bold;
}

em, dfn{
font-style: italic;
}

dfn{
font-weight: bold;
}

sup, sub{
line-height: 0;
}

abbr, acronym{
border-bottom: 1px dotted #666;
}

address{
margin: 0 0 1.5em;
padding:10px;
font-style: italic;
font-size:13px;
font-weight:bold;
}

del{
color:#666;
}

pre{
margin: 1.5em 0;
white-space: pre;
}

pre,code,tt{
font: 1em 'andale mono', 'lucida console', monospace;
line-height: 1.5;
}

hr{
border:none;
border-top:1px dashed #555;
margin:15px 0 0 0;
}

textarea{
display:block;
width:100%;
margin:15px 0;
}

/* Lists */
li ul, 
li ol{
margin:0 1.5em;
}

ul, ol{
margin: 0 1.5em 1.5em 1.5em;
}

ul{
list-style-type: disc;
}

ul li ul{
list-style-type: circle;
}

ul li ul li ul{
list-style-type: square;
}

ol{
list-style-type: decimal;
}

dl{
margin: 0 0 1.5em 0;
}

dl dt{
font-weight: bold;
}

dd{
margin-left: 1.5em;
}


/* Tables */
table{
width:100%;
}

th{
font-weight: bold;
}

thead th{
background: #c3d9ff;
}

th,td,caption{
padding: 4px 10px 4px 5px;
}

tr.even td{
background: #e5ecf9;
}

tfoot{
font-style: italic;
}

caption{
background: #eee;
}


/* Misc classes */
.small{
font-size: .8em;
margin-bottom: 1.875em;
line-height: 1.875em;
}

.large{
font-size: 1.2em;
line-height: 2.5em;
margin-bottom: 1.25em;
}

.hide{
display: none;
}

.quiet{
color: #666;
}

.loud{
font-weight:bold;
}

.highlight{
background:#ff0;
}

.added{
background:#060;
color: #fff;
}

.removed{
background:#900;
color: #fff;
}

.italized{
font-style:italic;
}


.first{
margin-left:0;
padding-left:0;
}

.last{
margin-right:0;
padding-right:0;
}

.top{
margin-top:0;
padding-top:0;
}

.bottom{
margin-bottom:0;
padding-bottom:0;
}

.clear{
clear:both !important;
}

.left{
float:left !important;
}

.right{
float:right !important;
}

.block{
display:block !important;
}

.noblock{
display:inline !important;
}

.spaceright{
margin-right:10px !important;
}

.spaceleft{
margin-left:10px !important;
}

.spacetop{
margin-top:10px !important;
}

.spacebottom{
margin-bottom:10px !important;
}

[attachment deleted by admin]

Sign In

MSIE 8 size larger than Firefox 3.6

Recommended Posts

mottwsc

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

mottwsc

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information