SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    MSIE 8 size larger than Firefox 3.6

    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...

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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%.

  3. #3
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mottwsc View Post
    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....
    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.

  5. #5
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mottwsc View Post

    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.
    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?

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,819
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Dr John View Post
    960px is a reasonably reliable width
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ^ 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.

  8. #8
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    <?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:
    Code:
    <!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:
    Code:
    <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:
    Code:
    <?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:
    Code:
    <?php
    	echo "
    	<div id='footer'>
    		<div class='wrapper'>
    			<span class='left'>&copy; ".date('Y')." &nbsp;&nbsp;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:
    Code:
    /* -------------------------------------------------------------- 
       
       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:
    Code:
    /* -------------------------------------------------------------- 
       
       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;
    }
    Attached Files Attached Files

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.


    Code:
    #frontboxes {
        /*float:left;*/
        height:240px;
        width:960px;
        /*padding:0 15px;*/
        padding:0 0 25px 0;
        margin:10px auto 0px;
        overflow:hidden;
    }
    .frontbox {
        height:240px;
        max-height:240px;
        border:1px solid #b1b1b1;
        -moz-border-radius:5px;
        float:left;
        margin:0 0 20px 20px;
        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. )

  10. #10
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by noonnope View Post
    ^ 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
    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 800600px 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.

  11. #11
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ^ 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

    Quote Originally Posted by felgall View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •