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…
Hi,
40% larger is a drastic difference, double check and make sure you don’t have “zoom” bumped up in IE8.
Click on “view” in the IE menu and scroll down to zoom, make sure it’s set at 100%.
Based on what you said, I looked into this further. The zoom was set at 125% and after changing it back, it looked similar. However, after researching why this happens (DPI scaling is done relative to how content would display at 96 DPI, so a system setting of 120 DPI would scale to (120 DPI / 96 DPI * 100%) 125% zoom.), it appears that I have another thing to worry about related to resizing based on different screen resolutions. I certainly can’t ask users to change their settings for my site, so…
I’d appreciate any guidance on how to use CSS to attack the problem of different screen resolutions and widths. One specific problem I have is that my web page ends up not centering the main content when I go to a higher resolution. It stays at the left.
Thanks.
You just have to expect that users may have different size text to the one you have on your machine. There are too many variables and indeed the user could use their own stylesheet to over-ride your settings so never count on it being the same.
Just design with that in mind. Allow some breathing space and don’t make things dependent on something that may change cross browser or system.
I’d appreciate any guidance on how to use CSS to attack the problem of different screen resolutions and widths. One specific problem I have is that my web page ends up not centering the main content when I go to a higher resolution. It stays at the left.
Thanks.
If a page is centred correctly it will still be centred in all resolutions. If you have just placed it with a margin-left or absolutely placed it then it won’t center and that is the wrong approach. Give the wrapper a width and use auto margins to center it.
We’d need to see your code to give better advice.
This also suggests that you are designing with the design software running at full screen. Which can lead to other unexpected errors, such as horizontal scrolling being required. You should design to fit the content on an average sized monitor, and allow for those with big monitors who don’t maximise the browser. During the design process when you test in your browser, you should regularly resize the browser to see if something worrying happens, such a a div suddenly jumping down the screen.
Of course, choosing a good width to use has it’s own problems, 960px is a reasonably reliable width as only a small percentage of desktop users will be forced to scroll horizontally, which makes reading very difficult and annoying. But will 960px work well on a mobile phone?
It is a few pixels too wide if you are using the now fairly common 1920 x 1080 resolution screen and want to place two windows side by side each taking up exactly half the screen as it doesn’t allow for the browser itself. You end up with each browser viewport exactly 956 pixels wide for that setup so you’d end up with both windows having a horizontal scrollbar.
^ Until browsers will implement a feature for their tabbed interface called “split view” where you can choose to have two tabs displayed like two columns, next to each other, making the 960px more than comfortable 
Or maybe three? Or four?
I don’t believe the hair splitting should go that far I have a 1360 x 768 res. Should I ask for a 660 min-width? What if I use IE 7? How many px are lost by implicit UAs borders, or oversized scrollbars? Should it be 654 for two windows side-by-side? What happens when tabs side-by side become norm, looking at the possibility widescreens take over?
It’s better to keep it simple. The smallest and the largest. Unit.
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;
}
Hi,
I wasn’t quite sure what you meant abut being centred exactly as you don’t seem to be trying to do anything to center things anyway.
You have floated the element called frontboxes which means it can’t really be centred because it is floated and you can only float left or right (although there are some hacks that can be used to center floats it’s not always the best option).
If instead you didn’t float #frontboxes then you could use auto margins to center it.
#frontboxes {
[B] /*float:left;*/[/B]
height:240px;
width:960px;
/*padding:0 15px;*/
padding:0 0 25px 0;
[B] margin:10px auto 0px;
overflow:hidden[/B];
}
.frontbox {
height:240px;
max-height:240px;
border:1px solid #b1b1b1;
-moz-border-radius:5px;
float:left;
[B] margin:0 0 20px 20px;[/B]
width:auto;
}
That will center those 3 boxes now and you can apply the same logic to your header and banner (once you remove any inline styling) .
Regarding your menu breaking to another line the what did you expect to happen when you increased the text size?
The text will increase and eventuallly be too long for the line and will need to wrap to another line. Even if it doesn’t wrap in one browser it will soon wrap in all browsers at another text increase.
You either have to accept this and code with that in mind and not use a fixed height header but let content wrap nicely to the next line. Use min-height instead and then the header can grow in height and the text can wrap without harm. (There may be some other tweaking/tidying up to do to make it look good when it wraps though.)
The alternative is to code your containers using em measurements so that when the text is scaled the containers will scale also as their sizes will be related. Using ems is the only way to maintain a relationship between the text and the container. However ems are harder to work with and sometimes scale too wide anyway so you would need to combine them with a max pixel width to stop the element getting too big.
Of course that would mean a complete re-design from your point of view. It will probably be easier just to make sure that things can wrap to another line when needed.
Remember that pages don’t have to look exactly the same when zoomed but they should be readable and usable. Expecting pixel perfection on zoomed layouts is a fruitless pursuit anyway and should be aiming at maintaining a usable and readable layout instead even if it’s not quite the same as the standard size.
(Lastly when you post htm code for use to work on it’s much easier if you run your page first and then just copy the code form view source from the browser and post that html for us. Otherwise we have to try and construct a page from the php snippets just to test - which is a lot of effort before we can even try to help. )
Opera has had a proper MDI for hundreds of years, and I often have tabs open side-by-side, so that I can work on two things at once, or refer to one page while working in another. If you’re not one of the Enlightened Few, you can recreate that effect by opening multiple windows and tiling them.
Either way, 960px is still going to be a PITA for a significant minority of people, including those who are using 800×600px resolution, those who have sidebars open, and most people on mobile devices. Good practice is that your site should not invoke horizontal scrollbars down to about 760px width.
^ It’s out of the context, and makes it look like I support 960. The bold resolution below is what I’m talking about, and the fact that it was a weak argument against 960