Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

3-column layout gives odd behaviour in IE 1

Status
Not open for further replies.
BillyRayPreachersSon

BillyRayPreachersSon

Programmer
Dec 8, 2003
17,047
GB
I've been using a 3-column layout on a site we're building, but have only just noticed a problem in IE 6/Win (I've not tested it in other versions of IE/Win).

The following is a cut-down test harness showing the problem. It uses the HTML 4.01 transitional DOCTYPE, and validates with no errors.

If you look closely, you will see that running down the left-hand side of the main content area (#mainContent) is a small indent (it runs inside the coloured area, not outside of it). This height of this indent coincides with the height of the left-hand navigation.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
	<title>3-column test harness</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

	<style type="text/css">

/* Miscellaneous */
		html, body {
			padding: 0px;
			margin: 0px;
		}
		html>body {
			font-size: 16px; 		/* IE can't read this */
		}
		body {
			background-color: #CDD5E0;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 100%; 		/* For IE */
			text-align: center;		/* For IE 5.5 & 5.0 to centre the main display area - reverted in div#centreContent */
		}

		#centreContent {
			text-align: left;
			margin: auto;
			width: 736px;
			position: relative;
		}


/* Left Navigation */
		#leftNavigation {
			font-size: 75%;
			width: 136px;
			float: left;
			position: relative;		/* Needed for IE to display this block at all! */
			background-color: red;
		}


/* Right Navigation */
		#rightNavigation {
			width: 163px;
			float: right;
			position: relative;		/* Needed for IE to display this block at all! */
			background-color: red;
		}

/* Containers */
		#contentOuter {
			clear: left;
			background-color: #FFFFFF;
			padding: 0px 6px 6px 6px;
		}

		#content {
			position: relative;
			background-color: #FFFFFF;
			margin-top: 6px;
		}

/* Content */
		#mainContent {
			margin: 0px 186px 20px 153px;
			background-color: gold;
		}

		#mainContent p {
			margin: 0px 0px 10px 0px;
			padding: 0px;
			font-size: 0.8em;
		}

/* Footer */
		#footer {
			background-color: red;
		}

	</style>
</head>

<body id="topOfPage">
	<div id="centreContent">
		<div id="contentOuter">
			<div id="content">

				<div id="leftNavigation">
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi ut neque in nulla aliquet convallis. Morbi porta purus at arcu. Aliquam neque. Aliquam sapien. Nulla facilisis auctor eros. Cras justo. Fusce arcu elit, vulputate ut, suscipit vitae, aliquet vel, neque. Nulla est nibh, aliquam quis, euismod nec, fringilla nec, mauris.</p>
				</div>

				<div id="rightNavigation">
					Right nav would go here
				</div>

				<div id="mainContent">
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi ut neque in nulla aliquet convallis. Morbi porta purus at arcu. Aliquam neque. Aliquam sapien. Nulla facilisis auctor eros. Cras justo. Fusce arcu elit, vulputate ut, suscipit vitae, aliquet vel, neque. Nulla est nibh, aliquam quis, euismod nec, fringilla nec, mauris. Duis malesuada, tortor in tincidunt feugiat, turpis dolor porta est, in rhoncus nunc nulla nec velit. Aenean aliquet ante in elit. Etiam sed massa ac ipsum tristique adipiscing. Nunc semper purus sit amet nibh. Sed lectus. Donec elit velit, imperdiet eget, auctor in, consectetuer vel, massa. Suspendisse facilisis libero vel mauris.</p>
					<p>In diam metus, dictum ac, molestie sit amet, placerat id, enim. Donec hendrerit felis non massa. Aenean turpis odio, ultricies eget, tempus ac, facilisis sit amet, nunc. Integer quis sapien. Fusce mollis augue id tellus dignissim scelerisque. Donec tellus lorem, pharetra sit amet, lacinia eget, condimentum ultricies, felis. Sed bibendum vestibulum mauris. Quisque enim urna, pulvinar nec, tincidunt sit amet, scelerisque nec, erat. Nulla facilisis enim ut orci. Suspendisse potenti. Sed aliquam felis suscipit orci posuere egestas.</p>
					<p>Nam lobortis vestibulum arcu. Nullam ultricies lorem eget orci. Aenean malesuada. Cras eget mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur eget eros ac orci sodales congue. Nullam auctor erat vel diam. Phasellus augue pede, viverra vitae, suscipit at, euismod ac, pede. Duis sollicitudin ornare pede. Ut suscipit. Donec mi quam, facilisis bibendum, consequat quis, ultrices a, erat. Nullam ac nisi vitae sem aliquam consequat. Duis eu neque. Aenean viverra imperdiet orci. Morbi ligula dui, dignissim vitae, fermentum a, iaculis sed, dui. Praesent eget felis. Morbi at justo eget ante auctor tincidunt. Aenean augue eros, interdum sed, aliquet non, tristique nec, nunc.</p>
				</div>

				<div id="footer">
					A footer would go here
				</div>

			</div>
		</div>
	</div>
</body>
</html>

My question is - how do I stop it from happening? I've tested this layout in some non-IE browsers:

NN/Mac, Fx/Mac, Safari/Mac, Opera 7, 7.54, 8/Win, NN7/Win, Fx 1.5/Win

and none exhibit this behaviour - only IE/Win. It's driving me loopy, as I just cannot seem to stop it.

Any help greatly appreciated!

Thanks,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Sort by date Sort by votes
Aaah fantastic!!!

I read that, and assumed the height/width was to "give the box layout" (there's that phrase again that gets my blood boiling - come on MS - sort it out!).

With this assumption, I added "zoom: 1" to the #mainContent style block, and all was solved.

kaht - you've saved me from a very big headache trying to resolve this. Many thanks!

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
[thumbsup2]

I'm just surprised I was able to offer you help, and not even in the javascript forum at that [lol]

-kaht

[small] <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
[banghead] [small](He's back)[/small]
 
Upvote 0 Downvote
I'd never heard of the 3-pixel jog issue before... will definately keep an eye out for it now, though.

All I have to do now is rewrite my templates to work now that I've fixed the issue... I find that fixing that issue gives me loads more.

Ah well - no rest for the wicked ;-)

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
799
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
209
tyutghf
tyutghf
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
waubain
  • Locked
  • Question
3 state slider toggle switch - move slider to state when hover
Replies
0
Views
250
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top