IE Float model bug

Dev Shed Forums Sponsor:

June 29th, 2004, 01:22 PM

dkode

PHP/PERL/.NET Coder

Join Date: May 2001

Location: Daytona Beach, Florida

Posts: 36

Time spent in forums: 41 sec
Reputation Power: 8

IE Float model bug

After reading some docs I'm pretty sure this is the float model bug in IE6? Either that or the Box model bug. How do I go about fixing this? If you look at the code and render it, the very top box is off to the right about 3 pixels in relation to the two boxes below it. I read somewhere how to fix this but I dont remember where the article was.

Any help would be appreciated...ripping my hair out

Code:

<HTML>
	<HEAD>
		<title>
			Test
		</title>
		<style>
		.defaultText {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

body {
	margin-left: 0px; 
	margin-top: 0px; 
	margin-right: 0px; 
	margin-bottom: 0px; 
	color: #000000;
	background-color: #EEE;
	font-family: Verdana, sans-serif;
	font-size: smaller;
	margin: 10px 10px 0px 10px;
}
.titleText {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #000000;
}
.addModuleText  {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
}
.moduleTitle {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
}

#bodyWrapper {
	border: 1px solid #000;
	background-color: #559CEC;
	width: 100%;
}

#container {
	float: left;
	width: 100%;
	margin-right: -260px;
}

#content  {
	padding-top: 0px;
	margin-right: 260px;
}

#left {
	position: relative;
	left: 5px;
	width: 250px;
	float: left;
}

#middle {
	margin-left: 250px;
	padding: 0px 7px 10px 10px;
}

#sidebar {
	float: right;
	padding-top: 0px;
	padding-right: 5px;
}

#footer {
	background: #999;
	border: 1px solid #cecea5;
	clear: both;
}

#module {
	position:relative;
	width: 100%;
	padding: 2px;
	background: #FFF;
	border: 1px solid #000;
	font-size: 10px;
	margin-bottom: 8px;
}

#title {
	background-color: #C2DBF5;
	padding: 3px;
	border: 1px solid #144678;
	text-align: left;
	color: Black;
	font-weight: bold;
	font-size: 14px;
}

#moduleItem {
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}

#moduleItem h1 {
	font-weight: bold;
	font-size: 12px;
	margin-bottom: 0px;
}

#moduleItem p {
	margin-top: 0px;
	margin-bottom: 10px;
}

#module #footer {
	background-color: #C2DBF5;
	border: 1px solid #144678;
	padding: 4px;
	text-align: left;
	color: black;
	font-weight: normal;
	font-size: 10px;
}
		</style>
	</HEAD>
	<BODY>

			<DIV id="bodyWrapper">
				
					<DIV id="addNewModule"></div>
					<DIV id="container">
						<DIV id="content">
							<DIV id="left"></DIV>
							<DIV id="middle">
<div id="module">
	
<div id="title"><span id="_ctl0_Title_lblTitle">test</span></div>
	
			<div id="moduleItem">
				<table border="0" cellpadding="3" cellspacing="0">
					<tr>
						
						<td>
							<h1>Test</h1>
						</td>
					</tr>
				</table>
			</div>
		
	
</div>
<div id="module">
	
<div id="title"><span id="_ctl1_Title_lblTitle">Homework files</span></div>
	
			<div id="moduleItem">
				<table border="0" cellpadding="3" cellspacing="0">
					<tr>
						
						<td>
							<h1>Text1</h1>
						</td>
					</tr>
				</table>
			</div>
		
	
</div>
<div id="module">
	
<div id="title"><span id="_ctl2_Title_lblTitle">Some Module Title</span></div>
	
			<div id="moduleItem">
				<table border="0" cellpadding="3" cellspacing="0">
					<tr>
						
						<td>
							<h1>Text2</h1>
						</td>
					</tr>
				</table>
			</div>
		
	
</div></DIV>
						</DIV>
					</DIV>
					<DIV id="sidebar">
						
					</DIV>
				
				
			</div>
		</form>
	</BODY>
</HTML>

__________________
"Mankind cannot define memory, yet it defines mankind"

Last edited by dkode : June 29th, 2004 at 01:25 PM.

June 29th, 2004, 01:51 PM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,674

Time spent in forums: 1 Month 3 Days 15 h 15 m 50 sec
Reputation Power: 687

Big John has an excellant article on the 3 pixel jog.

cheers,

gary

__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

My html and css workshop, demos and tutorials.
Ask a better question, get a better answer.

June 29th, 2004, 03:04 PM

Akh

|<.+#f@#+.&.|

Join Date: Mar 2002

Location: norway

Posts: 2,715

Time spent in forums: 4 Weeks 17 h 42 m 44 sec
Reputation Power: 642

you ought to validate your code before you ask to solve problems with the code. http://validator.w3.org/

the id's have to be unique, you can only use a id once within a document.
http://www.w3.org/TR/html4/struct/global.html#h-7.5.2

you ought to use a proper doctype, choose one that makes the browsers render your page in standard compliance mode.
see here for a list http://www.hut.fi/~hsivonen/doctype.html

you don't have very good structur of your markup,
you shouldn't have more that one h1-element,
and you should drop all those unnecessary tables,
use css to controll the layout.
http://www.webaim.org/techniques/structure/

June 30th, 2004, 08:17 AM

dkode

PHP/PERL/.NET Coder

Join Date: May 2001

Location: Daytona Beach, Florida

Posts: 36

Time spent in forums: 41 sec
Reputation Power: 8

i'm going through trying to clean up some of the code now. couple of questions though:

1. If i can't use an ID more than once in a document then what do I use for repeating dynamic content from a database? class attrtibutes?

2. The 3pixel box hack from positioniseverything.net fixed the 3px jog problem. thank you!

3. When you said I don't have good markup (I shouldn't use H1 more than once in the document?) So do I just make custom class attributes and use them instead if I am going to be repeating content? Someone told me once not too use too many class and id's, but instead use and <h*> tags if they are relevant to displaying text instead of layout.

any information would help! thank you.

June 30th, 2004, 01:55 PM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,674

Time spent in forums: 1 Month 3 Days 15 h 15 m 50 sec
Reputation Power: 687

Quote:

Originally Posted by dkode

1. If i can't use an ID more than once in a document then what do I use for repeating dynamic content from a database? class attrtibutes?

#Charlie is like a unique name, it identifies the only "Charlie" in the group (document). .redhead is a class that includes anyone in the group with red hair.

Quote:

Originally Posted by dkode

2. The 3pixel box hack from positioniseverything.net fixed the 3px jog problem. thank you!

You're welcome. I consider the site a basic reference.

Quote:

Originally Posted by dkode

3. When you said I don't have good markup (I shouldn't use H1 more than once in the document?) So do I just make custom class attributes and use them instead if I am going to be repeating content? Someone told me once not too use too many class and id's, but instead use and <h*> tags if they are relevant to displaying text instead of layout.

Think of the page as an outline of a chapter in your dissertation. At the top level is the chapter heading, h1. Below that are sections, h2, subsections, h3, and further breakdowns, h4–h6. (You can skip a level, but stay in order. For example, you may not want a header on your nav column, but consider that it's implicit. Sub-headers in the column would be a level lower.) How these are rendered is subject to style rules. Keep in mind that html tags describe what the element is. Is the element a list, a paragraph, a header? Then tag it for what it is, not for how you want it to display. Grouping and segregating for layout or display styling follows. If the simple html isn't right, the page starts as a failure and it's a cast iron bitch to pull it together with ids classes and all the king's men.

cheers,

gary

Last edited by kk5st : June 30th, 2004 at 02:26 PM.

June 30th, 2004, 04:33 PM

dkode

PHP/PERL/.NET Coder

Join Date: May 2001

Location: Daytona Beach, Florida

Posts: 36

Time spent in forums: 41 sec
Reputation Power: 8

thank you!

that clears up alot for me except the part about the unique ID's?

When you said an id identifies a unique id in the group, does this mean I declare the id only once in the stylesheet but then can use it as many times as I want through the document? what did the other guy mean by that they have to be unique? I only have one of each id in the stylesheet.

June 30th, 2004, 04:43 PM

Akh

|<.+#f@#+.&.|

Join Date: Mar 2002

Location: norway

Posts: 2,715

Time spent in forums: 4 Weeks 17 h 42 m 44 sec
Reputation Power: 642

if you read the links i provided, you would have gotten the answers you needed.

you can only use one id on one html-element
but can refeere to this element several times in the style sheet,

like

#one { text-align:center}
#one em { color:red;}

just an example

Last edited by Akh : June 30th, 2004 at 04:46 PM.

June 30th, 2004, 05:26 PM

dkode

PHP/PERL/.NET Coder

Join Date: May 2001

Location: Daytona Beach, Florida

Posts: 36

Time spent in forums: 41 sec
Reputation Power: 8

ahhh I understand now.

So it was wrong for me to do the following:

Code:

#header #loginControl {
   <!--some code here-->
}

It should have been:

Code:

#loginControl {
   <!--some code here-->
}

I will read that link again, thanks

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: