Another notorious Internet Explorer quirk

Goldeneye · November 11, 2008

I am working on a a template for displaying user submitted articles. Anyway, everything seems to be parsing just fine until you open it up in Internet Explorer (6, not sure about 7) and adjust the width of the window. What happens is that if you adjust the window to a certain the left-floated side bar starts moving towards the right as if it's given a negative-margin. If you open it up in Internet Explorer, you will get a better idea of what I'm talking about.

I'll provide some code for your perusal that has been 'simplified', which can also be found as an attachment along with a screenshot.

My question is: How would I 'fix' this? At first I thought it was my min-width that I gave to the article DIVs, but that didn't seem to be it.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>Greetings | FOOBAR DESIGN MOCK-UP</title>
	<style type="text/css">
		* {margin: 0; padding: 0;}
		body {background: #000000; color: #C9C9C9; font-size: 14px; font-family: Times New Roman, sans-serif, Arial;}
		a:link {color: #6E7B8B; text-decoration: none;}
		a:visited {color: #6E7B8B; text-decoration: none;}
		a:hover {color: #8BA446; text-decoration: underline;}
		a:active {color: #8BA446; text-decoration: underline;}

		.articleinfo {
					width: 544px;
					text-indent: 20px;
					border-bottom: 0px dotted gray;
					margin-bottom: 10px;
					}

		div.articletitle {
					font-size: 19px;
					text-align: center;
					}

		div.articleauthor {
					font-size: 12px;
					text-align: center;
					}

		div.articleheader {
					max-width: 544px;
					width: auto !important;
					width: 544px;
					border: 1px solid gray;
					text-align: left;
					padding-left: 4px;
					margin-bottom: 10px;
					}

		div.articlebody {
					max-width: 544px;
					width: auto !important;
					width: 544px;
					}

		div.articlesources {
					max-width: 544px;
					width: auto !important;
					width: 544px;
					border: 1px solid gray;
					padding-left: 4px;
					margin-top: 10px;
					margin-bottom: 20px;
					}

		hr.footerdiv {
					height: 1px;
					color: gray;
					background: gray;
					width: 100%;
					}

		div.boxes {
					float: left;
					width: 100%;
					background: url(si.pblack/bg.box.jpg) top left repeat-x transparent;
					padding: 1px 0 0 0;
					}

		div.mainbox {
					margin-left: 250px;
					margin-top: 23px; /*Set left margin to Sidebox Width*/
					min-height: 235px; 
					height: auto !important;
					height: 235px;
					}

		div.sidebox {
					float: left;
					width: 250px; 
					margin-left: -100%;
					margin-top: 23px;
					background: transparent;
					border-right: 1px solid #3D3D3D;
					border-bottom: 1px solid #3D3D3D;
					}

		div.space {
					margin: 10px; /*DIV.space provides 'padding' inside the mainbox and sidebox DIVs*/ 
					margin-top: 0;
					}

		div.sidebox p {
					margin: 2px 2px 1em 2px;
					}

		div.cFooter {
					clear: both;
					position: relative;
					width: 80%;
					left: 50%;
					margin-left: -40%;
					margin-top: 20px;
					border: 1px solid #3D3D3D;
					text-align: center;
					}

		div.cFooter p {
					font-size: 10px;
					text-align: center;
					margin-top: 5px;
					margin-bottom: 5px;
					font-family: Arial;
					}
	</style>
</head>
<body>
	<div class="boxes">
		<!-- The 'mainbox' DIV is contained by the 'boxes' DIV -->
		<div class="mainbox">
			<!-- The 'space' DIV is just here to provide padding for the content/text -->
			<div class="space">
				<!-- These are just the article classes, obviously -->
				<div class="articleheader">
					<div class="articletitle">Foobar</div>
					<div class="articleauthor">By: <a href="http://localhost/si/php4_v2/design/index.php?users&user">Goldeneye</a></div>
					<span class="textstyle3">Added:</span> Jun. 1st 2008, 01:32 MDT | <span class="textstyle3">Last Edited:</span> Jun. 1st 2008, 13:37 MDT
				</div>
				<div class="articlebody">
					Loremipsum dolor sit amet, consectetuer adipiscing elit. Morbi interdum urnaac turpis. Cras vehicula libero in dolor. Duis faucibus leo nec tortor. Praesent est ligula, iaculis sed, bibendum sit amet, pulvinar non, nisl. Praesent orci metus, accumsan in, consectetuer at, rutrum sed, mauris. Vivamus nisi libero, mattis ut, dignissim non, ornare nec, mi.Fusce eget dui sed tellus interdum rutrum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque facilisis. Pellentesque dapibus sollicitudin odio. Maecenas pede. Donec ultrices urna eu elit.<br><br><br>
					<div class="typelabel">Quote:</div>
					<blockquote class="quotethis">Phasellus mollis odio vitae est. Vivamus facilisis. Nulla diam nunc, luctus sit amet, consectetuer sit amet, congue in, arcu. Fusce non metus in lectus iaculis dignissim. Proin tristique, augue tincidunt semper ultricies, felis enim tincidunt lectus, at fermentum lorem felis ut neque.</blockquote><br><br>
					Suspendisse tempus. Mauris imperdiet ligula ut turpis. Curabitur nisi tellus, posuere a, lobortis sit amet, pretium quis, pede. Nullam aliquet, odionec interdum eleifend, arcu magna vehicula justo, ac blandit enim nequevel purus. Quisque justo felis, aliquet sit amet, ullamcorper a, malesuada nec, ante. Morbi quis turpis eu lorem ullamcorper rhoncus. Curabitur a orci. Pellentesque vitae justo. Etiam tincidunt, libero sitamet aliquam aliquet, urna lectus lobortis est, et consequat neque odio in orci. <br><br>Donec viverra porta lectus. Donec faucibus ipsum eget tortor. Nulla facilisi. Suspendisse sollicitudin, quam vel ullamcorper rhoncus, ipsum leo adipiscing neque, non eleifend velit nisl gravida nulla. Mauris in risus in quam sodales pulvinar. Donec gravida sollicitudin diam. Donec viverra congue dui. Fusce placerat erat velnunc. Integer neque nulla, convallis quis, lobortis sed, vestibulum ut, leo. Praesent ipsum massa, suscipit et, imperdiet quis, aliquet id, nulla. Praesent sapien sapien, vulputate ac, molestie ut, dapibus in, tortor. Nunc viverra, sapien et malesuada tempor, est orci faucibus leo, non bibendum pede est id nibh. Vivamus in nibh in eros vestibulum consectetuer. Duis lectus mi, condimentum nec, luctus quis, accumsannon, nibh. Donec pellentesque odio quis urna. Donec consequat iaculispede. Praesent ornare dignissim diam. Proin tincidunt sem sed sapien. In hac habitasse platea dictumst.
				</div>
				<div class="articlesources">
					<u>Sources</u><br />Goldeneye
					<hr class="footerdiv">
					<span class="textstyle5">Categories: Miscellaneous</span>
				</div>
			</div> <!-- End the 'space' DIV -->
		</div> <!-- End the 'mainbox' DIV -->
	</div> <!-- End the 'boxes' DIV-->

	<div class="sidebox"> <!-- Here's where the sidebar begins. -->
		<div class="space">
			<h3>Today's Poll</h3>
			<h4>This is a poll</h4>
			<p>
				<input name="polloption" value="" id="i1" type="radio"> <label for="i1">True</label><br>
				<input name="polloption" value="" id="i2" type="radio"> <label for="i2">False</label><br>
				<input name="polloption" value="" id="i3" type="radio"> <label for="i3">What?</label><br>
			</p>
		</div>
	</div>

	<div class="cFooter">
		<p>Foobar | v. Archipelago</p>
	</div>
</body>
</html>

[attachment deleted by admin]

haku · November 12, 2008

Link please.

BoltZ · November 12, 2008

We can't really do much with that code without those images. Post a link

Goldeneye · November 13, 2008

Alright then, for your convenience, here's a link to for a first-hand experience:

http://severnaya.freehostia.com/mock-up.html

This quirk only seems to occur in Internet Explorer 6, I tested it in Internet Explorer 7, and it behaved as I intended it to.

Sign In

Another notorious Internet Explorer quirk

Recommended Posts

Goldeneye

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

BoltZ

Link to comment

Share on other sites

Goldeneye

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information