asked on

Font and element sizes in Internet Explorer using CSS

This is my test site:
http://secure.bbdesign.com/cup-caddy

I built the site on a Mac and mostly tested with Safari. Firefox and Chrome look virtually identical. When I load the same website in Internet Explorer, everything is a mess (see two attached screenshots for comparison).

It appears the problem is mostly fonts and font sizes. But a small difference in font size can easily cause the whole layout to distort.

For Windows and Internet Explorer, I have a VirtualBox installation of Windows 7. This problem is so bad, I'm wondering if what I am seeing is really what Windows/IE users are seeing. I believe its IE 10 that is installed.

I've been building websites for 15 years, I am not new to this. But I still don't understand how IE can be this far off.

If I change my font sizes so that the layout works in IE, then everything looks ridiculously small in all the other browsers. I can't possibly be the only one trying to deal with these issues... how are others handling it?

Do I need a media query or something for the IE browser? Is there even such a thing?

Any insight or advice would be greatly appreciated.

Thanks!
1.jpg
2.jpg

Gary

Paste the first few lines of your html

Brad Bansner

ASKER

HTML:

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Cup Caddy</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.1.min.js"></script>
</head>
<body>

<div id="background">
	<div id="content">

Open in new window

CSS:

body{background:#ece7de url('../img/bg_main.jpg') repeat center top;color:#010101;font-family:'Source Sans Pro',Helvetica,Arial,sans-serif;}

div#background{background:transparent url('../img/bg_main2.jpg') no-repeat center 156px;min-height:811px;height:auto !important;height:811px;}

div#content{width:1000px;margin:0 auto;}

img#logo{margin:26px 0 0 28px;}

ul#nav1{float:right;margin:0;padding:0;}
ul#nav1 li{display:inline-block;float:left;margin:0;padding:0;border-right:2px #b40000 dashed;}
ul#nav1 li:last-child{border-right:none;}
ul#nav1 li a,ul#nav1 li a:visited{display:inline-block;padding:3em 1em 0.5em 1em;color:#000;font-size:1.5em;text-decoration:none;}
ul#nav1 li a:hover{text-decoration:underline;}

div#home1{margin-top:24px;background:transparent url('../img/ph_home-1.png') no-repeat center top;min-height:607px;height:auto !important;height:607px;}

ul#home2{width:850px;margin:0 auto;margin-bottom:30px;padding:0;}
ul#home2 li{display:inline-block;float:left;width:170px;margin:0;padding:0;text-align:center;}
ul#home2 li img{margin-bottom:6px;}

div#slideshow{float:left;position:relative;width:480px;height:360px;background-color:#fff;}
img.slHome{position:absolute;top:10px;left:20px;display:none;}

div#homefeature li{padding-bottom:12px;}

div#homefeaturewrapper{float:right;position:relative;width:498px;height:360px;border-left:2px #000 dashed;}
div#homefeature{float:right;padding:20px 20px 20px 20px;width:440px;height:320px;background-color:#fff;}

img#homephoto{margin:-50px 0 0 50px;}

div#homesub p{float:right;margin:160px 0 0 0;width:480px;}
div#homesub img{margin:30px 0 0 0;}

div#footer img{padding:2.2em 0 0 7.5em;}
div#footer p{float:right;padding-top:4em;font-size:0.7em;}

h1{margin:0;padding:0.2em 0 0 0.5em;color:#fff;font-size:4.4em;font-weight:bold;text-shadow:2px 2px 2px #000;}
h2{margin:0;padding:0 0 0 1em;color:#b40000;font-size:3em;font-weight:normal;}
h3{width:276px;margin:0;padding:2em 0 0 2em;color:#fff;font-size:1.4em;font-weight:normal;text-shadow:1px 1px 1px #000;}
h4{width:284px;margin:0;padding:1em 0 0 2.4em;color:#fff;font-size:1.1em;font-weight:normal;text-shadow:1px 1px 1px #000;}
h5{margin:0;padding:0;color:#b40000;font-size:1.4em;font-weight:normal;}
h6{float:left;margin:70px 20px 0 0;padding:0;color:#b40000;font-size:1.4em;font-weight:normal;}
h7{float:left;margin:0;padding:0;font-size:3.4em;font-weight:bold;}

div.divider{margin:1.5em 0 0 0;border-bottom:2px #000 dashed;}

a,a:visited{color:#b40000;font-weight:bold;text-decoration:underline;cursor:pointer;}
a:hover{color:#b40000;text-decoration:none;}

Open in new window

Gary

Do you have a live link?

Brad Bansner

ASKER

Link is the first thing I put in my original question.

Gary

Sorry missed that
I'm not seeing what you are seeing in IE7, 8, 9 or 10 - the site looks exactly the same as any other browser
Maybe what you have installed is a beta version of IE

Brad Bansner

ASKER

It says version 10.0.9200.16618. It should install new versions automatically.

My zoom is set to 100%. I don't see anything else obvious, and I have never really fooled with the default Internet Options.

It sure would be great if this is a local problem with my IE.

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Chris Stanyon

In IE, you can change the zoom level and the text size independently. The only way I can get your site to 'break' in the same way as the images you've attached is to change the Text size from Medium to Larger (Page Menu -> Text size).

Something to be aware of - if the layout of your site breaks when the text size is changed, then re-think your design - this is something you have no control over, and doesn't really fit in with accessibility guidelines - visually impaired users for example will maybe change the font to be larger than you intended.

Brad Bansner

ASKER

I reset all my options in IE and now it works. I don't see a Text Size option in IE, just the Zoom Size. I don't know how it got changed in the first place, but hopefully now what I am seeing is what the majority of users are seeing.

I understand the point that text size changes shouldn't break a layout. I don't see how its possible to have any element next to any other in that case, though... at some point, the items won't fit next to each other. That is probably another discussion for another day.

Thanks for your help!