3 replies [Last post]
littlemanchan
Offline
Regular
Last seen: 15 years 35 weeks ago
Joined: 2005-04-20
Posts: 21
Points: 0

First off, I know about IE6's 3px jog thing, and I've tried a few things like the holly hack and stuff, but I'm either doing it wrong or I'm putting them in the wrong place. Suffice it to say, I still have the problem.

Also in IE6, one of my 'layouts' magically reappears itself.. you'll have to see for yourself. I don't know what this is, and don't know how to search for it.

working model: http://www.freewebtown.com/luciansmith/web.html

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
 <meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
 <title>Title</title>
 <style type="text/css">

body {
	margin: 5px 5px;
	background: #eee;
	font: 12px verdana, arial, sans-serif;
	} 
a { 
	text-decoration: none;
	}
a.menuMain {
	display: block;
	}
.spacer { width: 800px; height:5px; background: #000080; margin-left: -4px; }
#header {
	width: 790px;
	height: 90px;
	background: tan;
	border: 1px solid black;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	}
#wrap { 
	}
#left_content {
	float: left;
	width: 150px;
	background: #fff;
	padding-bottom: 10px;
	border-left: 1px solid black;
	border-right: 1px solid black;
	}
.left_block {
	position: relative;
	width: 150px;
	margin-bottom: 5px;
	background: white;
	}
.left_block .blockTitle {
	background: #0066FF;
	font: 13px verdana, arial, sans-serif;
	font-weight: bold;
	color: #FFF;
	padding: 2px;
	text-align: center;
	border-bottom: 1px solid black;
	}
.left_block .blockContent {
	padding: 5px;
	}

#right_content {
	clear: left;
	float: left;
	width: 150px;
	background: #fff;
	border: 1px solid black;
	border-top: 0;
	}
.right_block {
	position: relative;
	margin-bottom: 5px;
	width: 150px;
	background: white;
	}
.right_block .blockTitle {
	background: #0066FF;
	font: 13px verdana, arial, sans-serif;
	font-weight: bold;
	color: #FFF;
	padding: 2px;
	text-align: center;
	border-bottom: 1px solid black;
	}
.right_block .blockTitle a {
	font: 13px verdana, arial, sans-serif;
	font-weight: bold;
	color: #FFF;
	}
.right_block .blockContent {
	padding: 5px;
	}
.toplinks {
	text-align: center;
	margin-top: 9px;
	margin-right: 1px;
	overflow: hidden;
	}
.toplinks a {
	float: left;
	padding: 0px 5px;
	border-left: 1px solid black;
	border-bottom: 1px solid black;
	color: #0033FF;
	font-weight: bold;
	text-decoration: none;
	background: white;
	}
.toplinks a:hover {
	text-decoration: none;
	background: #0033FF;
	color: white;
	}
.toplinks span {
	display: none;
	}
#content {
	margin-left: -1px;
	padding: 5px;
	width: 629px;
	overflow: hidden;
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	background: white;
	}

* html .content {margin-left: -3px;}

.centerR_block {
	clear: right;
	float: right;
	width: 310px;
	margin-bottom: 5px;
	overflow: hidden;
	background: #00EE00;
	border: 1px solid #006600;
	}
.centerR_block div.blockTitle {
	padding: 1px 5px 10px 5px;
	font: 14px verdana, arial, sans-serif;
	float: left;
	overflow: hidden;
	}
.centerR_block div.blockContent {
	float: left;
	display: inline;
	background: #fff;
	width: 294px;
	border: 1px solid #006600;
	padding: 2px 5px;
	margin: -9px 0 -1px 5px;
	clear: left;
	}
.centerL_block {
	width: 310px;
	margin-bottom: 5px;
	overflow: hidden;
	background: #00EE00;
	border: 1px solid #006600;
	}
.centerL_block div.blockTitle {
	padding: 1px 5px 10px 5px;
	font: 14px verdana, arial, sans-serif;
	float: left;
	overflow: hidden;
	}
.centerL_block div.blockContent {
	float: left;
	display: inline;
	background: #fff;
	width: 294px;
	border: 1px solid #006600;
	padding: 2px 5px;
	margin: -9px 0 -1px 5px;
	clear: left;
	}
.centerC_block {
	clear: both;
	width: auto;
	margin-bottom: 5px;
	overflow: hidden;
	background: #0098FF;
	border: 1px solid #000080;
	}
.centerC_block div.blockTitle {
	color: #000;
	padding: 1px 5px 10px 5px;
	font: 14px verdana, arial, sans-serif;
	text-align: center;
	}
.centerC_block div.blockContent {
	background: #fff;
	margin: -9px 5px -1px 5px;
	border: 1px solid #000080;
	padding: 5px;
	}
 </style>
</head>

<body>

<div id="header">Don't you wanna FANTA FANTA?  Don't you wanna want a FANTA?
</div>

<div id="wrap">
<div id="left_content">
<div class="left_block">
<div class="blockTitle">Left Block Title</div>
<div class="blockContent">
<a class="menuMain" href="#">Links</a>
<a class="menuMain" href="#">Links</a>
<a class="menuMain" href="#">Links</a>
<a class="menuMain" href="#">Links</a>

</div>
</div>
<div class="left_block">
<div class="blockTitle">Left Block Title</div>
<div class="blockContent">
Left Block
</div>
</div>
</div>

<div id="right_content">
<div class="right_block">
<div class="blockTitle"><a href="#">Calendar</a></div>
<div class="blockContent">
1 2 3 4 5 6 7

</div>
</div>

</div>


<div id="content">


<div class="centerR_block">
<div class="blockTitle">GIGGETY GIGGETY GIG</div>
<div class="blockContent">Dear Diary.... Jackpot!</div>
</div>
<div class="centerL_block">
<div class="blockTitle">OHH RIGHT!</div>

<div class="blockContent">I don't want anybody using this pool unless there's a lifeguard on duty.  Hehehehehehe... doodie.  HEHEHEHEHEHEHEHE.... Diarrhea.</div>
</div>
<div class="centerC_block">
<div class="blockTitle">THE KING AND I</div>
<div class="blockContent">I am an automaton nucular neohuman android; you may call me ANNA. I am a robot ninja from the planet england who is here to destroy you and free this land from your tyranny.</div>
</div>
Lorem Ipsum deathum shizum.<br />This behavior I do not understand.<br /><br /><br /><br /><Br /><br /><br /><br /><br />
How did this box above appear?  centerC_block

</div>


</div>

</body>

</html>

Thanks.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

2 things: IE6's 3px jog and another strange appearing box.

You can't get rid of the 3px jog. You can either make a design that can ignore it, float:right next to the float left, or margin-right:-3px;

Not sure about the appearing box. Its not some wierd alternate manifestation of the guillotine bug?

littlemanchan
Offline
Regular
Last seen: 15 years 35 weeks ago
Joined: 2005-04-20
Posts: 21
Points: 0

2 things: IE6's 3px jog and another strange appearing box.

well, i did a margin-right on my left_content and that fixed it, using the * html hack. as for the appearing box, still can't figure it out, but i'll read up on the guillotine bug.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 23 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

2 things: IE6's 3px jog and another strange appearing box.

This is very similar to the duplicate character bug, but I don't see a trigger.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.