Problem with column layout in IE

Get Started
1

I have a web page that has a full width header and footer, in between is a column at the left and to the right the main content section of the page.

The CSS code for the layout is modified from a recommendation I found on sitepoint for a 3-column layout, and I think I understand it, but it’s a bit complex and I’m not sure I didn’t make a mistake modifying it. (I’m still fairly new to CSS.)

In Firefox, the layout works perfectly, but in IE, if the browser window is too narrow, the contents of the main section jump down the page - the top of the main content will start below any content in the left-hand column.

Can anyone suggest why this happens and how I can fix it?

Here are the HTML and CSS for the page (sorry, they’re quite long):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<title>JnY - Luxury gifts for all occasions</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
	<link href="Englishstyle.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="outer">
	<div id="header">
		<div id="userinfo">
			<table>
				<td class="welcome"></td>
				<td class="nobutton">
					<a href="?login"> Log In </a>
				</td>
								<td class="nobutton">
						<a href="?register"> Register </a>
					</td>
							<td>
					<form action="" method="post">
						<label for="usercountry">Country:</label>
						<select name="usercountry" id="usercountry">
							<option selected="selected">Australia</option>
														<option>Australia</option>
														<option>&#54620;&#44397;</option>
														<option>&#20013;&#22269;</option>
												</select>
						<input class="nobutton" type="submit" name="setcolacu" value=" Change " />
					</form>
				</td>
			</table>
		</div> <!-- end of user info div -->
		<div id="sitebranding">
			<img src="images/JnY logo.gif" class="featureleft" alt="JnY logo" width="120" height="80" />
			<div id="topbuttons">
				<p>
				<a href="?homepage">Home</a>
				<a href="?aboutus">About Us</a>
				<a href="?contactus">Contact Us</a>
				<a href="?shoppingcart">Shopping Cart</a>
				( items)			<a href="?wishlist">Wish List</a>
				( items)			</p>
			</div>
		</div> <!-- end of sitebranding -->
		<div id="tagline">
			<p>Luxury gifts for all occasions</p>
		</div> <!-- end of tagline -->
	</div> <!-- end of header -->
 
	<div id="mainnavigation">
		<div id="topnavigation">
		<h3>Our Products</h3>
			<ul>
								 
				<li>
					<img height = "18px" width = "18px" src="images/hearticon2.gif" alt="" />
										<a href="?categpage&amp;id=5">Original Art Works</a>
				</li>
							 
				<li>
					<img height = "18px" width = "18px" src="images/hearticon2.gif" alt="" />
										<a href="?categpage&amp;id=3">Organic Health</a>
				</li>
							 
				<li>
					<img height = "18px" width = "18px" src="images/hearticon2.gif" alt="" />
										<a href="?categpage&amp;id=4">Wine</a>
				</li>
							 
				<li>
					<img height = "18px" width = "18px" src="images/hearticon2.gif" alt="" />
										<a href="?categpage&amp;id=2">Ceramics</a>
				</li>
							 
				<li>
					<img height = "18px" width = "18px" src="images/hearticon2.gif" alt="" />
										<a href="?categpage&amp;id=18">Bookmarks</a>
				</li>
							 
				<li>
					<img height = "18px" width = "18px" src="images/hearticon2.gif" alt="" />
										<a href="?categpage&amp;id=15">Cars</a>
				</li>
							 
				<li>
					<img height = "18px" width = "18px" src="images/hearticon2.gif" alt="" />
										<a href="?categpage&amp;id=19">Passion</a>
				</li>
					</ul>
		</div> <!-- end of topnavigation -->
		<div id="quicklinks">
			<h3>Quick links</h3>
			<ul>
				<li>
					<a href="?howtobuy">How to buy</a>
				</li>
				<li>
					<a href="?payment">Payment methods</a>
				</li>
				<li>
					<a href="?shipping">Shipping information</a>
				</li>
				<li>
					<a href="?storeloc">Store locations</a>
				</li>
				<li>
					<a href="?sitemap">Site map</a>
				</li>
			</ul>
		</div> <!-- end of quick links -->
	</div> <!-- end of mainnavigation -->
 
	<div id="maincontent">
		<div class="aboutus">
			<h2>Welcome to JnY&#039;s web site</h2>
			<p>JnY Co is an international company which is just starting out (September 2009).</p><p>We hope to join the growing band of international shopping mall sites, and plan to focus on beautiful <br/>luxury gift products such as fine ceramic ware for the home, unique designer jewellery, elegant accessories <br/>for the well-tailored, delicate perfumes, wines to suit the discerning palate and much more.</p><p>You are welcome to browse through our fledgling site and contact us if you find something you are <br/>interested in.</p><p>Please come back in a few weeks to enjoy the experience of purchasing on our site!</p>		
		</div>
	</div> <!-- end of maincontent -->
	<div id="clearfooter">
	</div>
</div>
<div id="pagefooter">
	<div id="footbutt">
		<p>
			<a href="?homepage">Home</a>
			<a href="?aboutus">About Us</a>
			<a href="?contactus">Contact Us</a>
			<a href="?termsofuse">Terms of Use</a>
			<a href="?privpol">Privacy</a>
		</p>
	<p>JnY Co, Hamilton Place, Mt Waverley, Victoria, 3149, Australia. ABN 123456789. </p><p>Phone: (03) 99998888 Fax: (03) 99998888 Email: [email]pat@joynyoung.com[/email]</p>	</div>
</div> <!-- end of pagefooter -->
 
</body>
</html>



&#65279;/* CSS for JnY web site */

body {
	font-family: "Trebuchet MS", Helvetica, Arial, sans-serif; 
	font-size: 12;
}

a:link {
	color: navy; 
}

a:active {
	color: navy; 
}

a:visited {
	color: navy; 
}

a:hover {
	color: navy; 
}

#header {
	background-color: white;
}

#outer {
	background-color: #e9f3fe;
	background-image: url(images/1stpicforbackground.gif);
	background-repeat: repeat;
	background-position: top left;
}

#pagefooter {
	background-color: #ebead0;
}

#userinfo {
	height:30px;
}

#userinfo table {
	white-space: nowrap;
	float: right;
}

#topbuttons p {
	margin-left: 187;
	margin-top: 90;
}

#footbutt {
	margin-left: 187;
}

#topbuttons a, #footbutt a {
	font-size: 14px;
	font-weight: bold;
	color: navy;
	text-decoration: underline;
	padding-left: 4px;
	padding-right: 4px;
}

#topbuttons a:hover, #footbutt a:hover {
	font-size: 16px;
	font-weight: bold;
	color: navy;
	text-decoration: underline;
	padding-left: 4px;
	padding-right: 4px;
}

#topnavigation ul {
	padding-left: 10px;
	margin: 0;
}

#topnavigation li {
	border: solid 2px #c53a12; 
	-webkit-border-radius: 5px; 
	-moz-border-radius: 5px; 
	text-align: left; 
	font-size: 14;
	font-weight: bold;
	text-indent: -10px;
	padding: 0;
	padding-left: 20px;
	margin-bottom: 2px;
	margin-left: 0;
	margin-right: 5px;
}

#topnavigation a {
	text-decoration:none;
}

#quicklinks h3 {
	padding-top: 60px;
}

#quicklinks ul {
	padding-left: 10px;
	margin: 0;
}

#quicklinks li {
	text-align: left; 
	font-size: 14;
	font-weight: bold;
	padding: 0;
	padding-left: 20px;
	margin-bottom: 2px;
	margin-left: 0;
	margin-right: 5px;
}

#sitebranding {
	border-top: 3px solid #000000;
	background-color: #ebead0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	margin: 0;
	height: 115px;
	background-image: url(images/gifts.jpg);
	background-repeat: no-repeat;
	background-position: top right; 
}

h1 {
	font-size: 40px;
	color: #ebead0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 8px;
	margin: 0;
	text-align:left;
	white-space: nowrap;
}

h2 {
	color: navy;
	font-size: 30px;
	font-weight: normal;
	padding-top: 15px;
	margin-top: 15px;
	margin-bottom:0;
	padding-bottom:0;
	border:0;
	white-space: nowrap;
}

h3 {
	color: navy;
	font-size: 16px;
	font-weight: bold;
	padding-top: 5px;
	padding-left: 13px;
	margin-top: 0;
	margin-bottom:0;
	padding-bottom:3px;
	border:0;
	whate-space: nowrap;
}

.featureleft {
	float: left;
	margin-left: 20;
	margin-top: 15;
	margin-right: 20px;
}

.featureright {
	float: right;
	margin: 0;
	margin-top: 0;
	margin-left: 20px;
}

.nobutton {
	padding-top: 4px;
	border: none;
	color: navy;
	font-size: 14;
	font-weight: bold;
	text-decoration: underline;
	background: inherit;
	vertical-align: top;
}

.nobutton:hover {
	font-size: 16; 
	padding-top: 4px;
	border: none;
	color: navy;
	font-weight: bold;
	text-decoration: underline;
	background: inherit;
	vertical-align: top;
}

.nobutton a {
	padding-top: 4px;
	padding-right: 4px;
	padding-left: 4px;
	border: none;
	color: navy;
	font-size: 14;
	font-weight: bold;
	text-decoration: underline;
	background: inherit;
	vertical-align: top;
}

.nobutton a:hover {
	font-size: 16; 
	padding-top: 4px;
	padding-right: 4px;
	padding-left: 4px;
	border: none;
	color: navy;
	font-weight: bold;
	text-decoration: underline;
	background: inherit;
	vertical-align: top;
}

.aboutus p {
	font-size:14px;
	color:navy;
	margin-left: 60px;
	padding-left: 5px;
	white-space: nowrap; 
}

.aboutus h2 {
	margin-left: 60px;
	padding-left: 5px;
	white-space: nowrap; 
}

#tagline p {
	text-align: left;
	vertical-align: top;
	font-style: italic;
	font-size: 20px;
	font-family: Georgia, Times, serif;
	background-color: #acacac;
	border-top: 3px solid #aaaaaa;
	border-bottom: 3px solid #aaaaaa;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 15px;
	margin: 0;
	white-space:nowrap;
}

li {
	list-style-type: none;
	font-size: 12px;
	line-height: 18px;
}
	
#pagefooter p {
	font-size: 14px;
	font-weight: normal;
	color: navy;
	margin: 4px;
	padding-left: 4px;
	padding-right: 4px;
	white-space: nowrap;
}	
	
/* This section deals with the position of the items on the screen. It uses absolute positioning measured in pixels from the top left of the screen. */

html, body {height:100%}
body {
padding:0;
margin:0;
background-color: #ffcc00;
color:navy;
}

#outer{
min-height:100%;
margin-left:180px;
border-left:1px solid #000;
border-right:1px solid #000;
margin-bottom:-92px;
background-color:#e9f3fe;
color:navy;
}
* html #outer{height:100%;} /* IE6 and under treat height as min-height anyway*/

#header{
position:relative;
margin:0 0 0 -181px;
padding-top:5px;
min-height:0;/* ie 7 haslayout fix */

}
/* mac hide \\*/
* html #header{height:56px;he\\ight:1px}/* height needed for ie to force layout */
/* end hide*/

#mainnavigation {
position:relative;/*ie needs this to show float */
width:180px;/* same as the left margin on #outer*/
float:left;
margin-left:-179px;/*must be 1px less than width otherwise won't push footer down in older mozilla*/
left:-2px;/* push column into position*/
background-color:#ffcc00;
color:navy;
}
#mainnavigation p {padding-left:2px;padding-right:2px}
#mainnavigation h3 {padding-left:2px;padding-right:2px}

#pagefooter {
/* width:100%; */
clear:both;
height:90px;
border-top:1px solid #000;
border-bottom:1px solid #000;
position:relative;
}

* html #pagefooter {/*only ie gets this style*/
\\height:92px;/* for ie5 */
he\\ight:90px;/* for ie6 */
}

#clearfooter{clear:both;height:90px;}/*needed to make room for footer*/
* html #maincontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */
2

Hi pat12b,

remove all those white-space declarations and you should be fine. I don’t quite understand what purpose they serve in your code? I think it’s safe for you to remove them all, but most importantly these:

.aboutus p {
    font-size:14px;
    color:navy;
    margin-left: 60px;
    padding-left: 5px;
[COLOR=Red][B]    white-space: nowrap; /* remove this line */[/B][/COLOR]
}
 
.aboutus h2 {
    margin-left: 60px;
    padding-left: 5px;
[COLOR=Red][B]    white-space: nowrap; /* remove this line */[/B][/COLOR]
}
3

This does indeed prevent the problem. However, the white-space nowrap was intended to present the text in a nice neat block which would go under the edge of the window when the window was made smaller. Now it doesn’t do that and looks quite messy.

Is there another way I can retain the neat text block?

4

Do you mean in the #sitebranding section?

You could try something like this:


#sitebranding {
  overflow:hidden;
  width:100%; 
  line-height: 1.5em;
}
5

Actually, I mean the “about us” text in the main section of the page. In fact, allowing English text to wrap is not a problem, but my site is also using Korean, and if it’s allowed to automatically wrap, the lines break in the middle of multi-character words. So we have to manually control the line breaks, and we don’t want any automatic wrapping.

I tried overflow:hidden; but it seems to have no effect - the lines wrap as the window gets smaller anyway.

6

Perhaps give #maincontent a fixed width, then. That will also save you from needing all of the <br> elements between lines, which are not advisable.

E.g.


#maincontent {width: 690px;}
7

Aha! But if I leave the white-space:nowrap, and add width:100%, it works in IE but not in Firefox which handles the 100% differently… because the width isn’t really 100%, it is 100% less the width of the left column.

8

Sorry, our last comments crossed over…

I think I still need the breaks, even with a fixed width, otherwise it will take some trickey wordsmithing to get the words to end exactly at the edge of the space…

I tried setting a width for the main content - without the white-space:nowrap, it still wraps; with it, it still jumps down the page. I think I’m despairing of finding a solution!

On other pages, I have tables, forms, pictures… All of them jump down the page in IE.

Is there something I can do with the width:100% that will also work in Firefox?

9

Not sure what you mean. With a fixed width, the text will sort itself into lines. You can set the text to text-align:justify; if you want it to line up evenly on each side.

Ultimately, there are better ways to approach layout. At the moment we are hacking around a bit. What exactly do you want your site to look like? I’m not totally sure I get what you’re aiming at.

Could you post a live link, as well? It’s hard to work on this otherwise.

10

Re the text lines, if it’s Korean, you may have say, 3 characters in a word. Sometites they type spaces bewteen the words, but it doesn’t seem to make any difference - if you let the test sort itself out, it may put the first character of the word on one line and the last two on the next, if that’s how they fit nicely in the allocated space.

e.g. if the word is XYZ, you might get

…X
YZ…

The only way I’ve found of controlling it is to use <br>.

The site isn’t live yet - still lots of work to do. But you can see it (such as it is) at http://www.joynyoung.com/index1.php.

It looks pretty much they way we want it to look, so long as you don’t make the window too small!

It will come up in Korean by default - you can change to English by selecting Australia at the top right and clicking on the Change link.

11

Ah, I see. I wonder how Koreans deal with this normally?

The site works fine in Firefox now, so if you just want to give width:100% to IE alone, you can create a style sheet just for that browser.

In your head section, place this under the first style sheet link:

<!–[if IE]><link rel=“stylesheet” type=“text/css” href=“ie.css”><![endif]–>

… and then in your new ie.css style sheet, just create the rule you want.

12

OK, that sounds good - although I already have different style sheets for different languages! Thanks for your help.

Re the Korean - I’m not sure what the normal way is - I don’t have any technical contacts in Korea (unfortunately). But my observation is that many sites use images of the text to ensure it looks its best. And some sites don’t seem to care. Only my biz manager insists it should break correctly!

13

Sorry, I tried it, but it just seems to treat the whole line as a comment - if I remove the original style sheet link, I get no style at all. What is it that parses this line?

14

Oops, made a typo - of course it works!