Indetnation Issues - Please help!

**Alexandra** · May 23, 2005 05:52

I am having some trouble in IE 6 with the layout of the text on a website I have built. The templates work fine and validate perfectly, but when I add content after a few lines the content kicks out and sites a few pixels closer to the left margin than the preceeding lines.

I can't find anything in the CSS or the code and was wondering if anyone else had come across a similar issue? If so, can anybody give me an idea of how to get around the problem. I have inlcuded a screenshot below to show what I mean, if necessary I can post the code also.

http://www.cadmium.com.au/images/indent-issue.jpg

Thanks in advance for any assistance given.

**Egor** · May 23, 2005 05:53

Care to post your css and html?

**Alexandra** · May 23, 2005 05:56

Oh, if you insist!

Here goes...

The HTML:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
 <!-- Website Designed by Cadmium Design and Development -->
 <!-- Helping your business make it online -->
 <!-- http://www.cadmium.com.au/ -->
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
   <title>Diamond Computer Systems - Help &amp; Support</title>
   
   <meta name="description" content="Welcome to the official DiamondCS website - Leader in anti trojan, anti worm and other security &amp; detection technologies (TDS Trojan Defence Suite, Wormguard, Port Explorer, and more...)" />
   <meta name="keywords" content="DiamondCS,security,trojan,trojans,antitrojan,anti trojan,TDS,Port Explorer,Wormguard,trojan defence suite,trojan defense suite,TDS3,TDS-3,IRClean,Regprot,Taskman" />
   <meta name="copyright" content="Copyright (C) 2003 Diamond Computer Systems Pty. Ltd. (http://www.diamondcs.com.au/)" />
   
   <link rel="stylesheet" type="text/css" href="styles/subpage.css" id="style_subpage" title="Sub-Page Stylesheet" />
 </head>
 
 <body>
 
 <!-- Must remain on all pages for "Return to Top" link to work. -->
 <a name="top"></a>
 
 <!-- The utility menu &amp; DiamondCS logo -->
 <?php include("includes/header.htm"); ?>
 
 <!-- Header Panel with intro text -->
 <!-- Keep headers to 3 lines, and ensure "&nbsp" x 5 remains at the beginning of 2nd line -->
 <!-- <span class="heavy"></span> should surround words you wish to highlight -->
 <div id="feature_panel">
   <img src="images/sub_feature_panel_support.jpg" height="98" width="237" alt="Photo of a woman's hand holding a mouse" title="Woman holding a mouse" />
   <p>
 	professional <span class="heavy">help &amp;<br />
 	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;support</span> from diamondCS<br />
   </p>
 </div>
 
 <!-- The Sub Page Menu -->
 <div id="menu">
   <?php include("includes/menu.htm"); ?>
 </div>
 
 <!-- The main page content -->
 <div id="main">
   <p class="breadcrumbs"><a href="index.php" tabindex="11" accesskey="h">Diamond Computer Systems</a> &gt; Help &amp; Support</p>
   
 New line<br>
 New line<br>
 New line<br>
 New line<br>
 New line<br>
 New line<br>
 New line<br>
 New line<br>
 New line<br>
 New line<br>
 New line<br>
 New line<br>
 New line<br>
 New line<br>
 New line<br>
 New line<br>
   
   <!-- Place at intervals throughout the page wheh there is a lot of content -->
   <!-- Each page should have at least 1 at base of page -->
   <div class="top_link">
 	<a href="#top" tabindex="12" accesskey="t">Return to Top</a>
   </div>  
 </div>
 
 </body>
 </html>

And the CSS:

Code:

/* Sub-Page Version */
 
 /* Created by Cadmium Design and Development */
 /* http://www.cadmium.com.au */
 
 body {
 	background: #f5f8f9 url(../images/menu_background.jpg) repeat-y scroll top left; /* White Background */
 	margin: 0;
 	padding: 0;
 }
 
 #header {
 	background: #014455 url(../images/header_background.jpg) no-repeat scroll center;
 	width: 100%;
 	height: 20px;
 }
 
 #header p {
 	font: bold x-small Arial, Helvetica, sans-serif;
 	color: #fff; /* White */
 	padding: 2px 10px;
 	margin: 0;
 }
 
 #header a:link, #header a:visited {
 	color: #fff; /* White */
 	text-decoration: none;
 }
 
 #header a:active {
 	color: #ccc; /* Light Gray */
 	text-decoration: none;
 }
 
 #header a:hover {
 	color: #ccc; /* Light Gray */
 	text-decoration: underline;
 }
 
 #logo_container {
 	width: 100%;
 	background: #fff;
 	margin: 0;
 	padding: 0;
   height: 57px;
 }
 
 #logo {
 	float: right;
 	margin: 15px 15px 0 0;
 	background: #fff; /* White */	
 }
 
 #logo img {
 	border: 0;
 }
 
 #feature_panel {
 	clear: both;
 	border-top: 1px solid #67888F;
 	border-bottom: 1px solid #67888F;
 	background: #fff url(../images/feature_panel_gradient.jpg) repeat-y scroll top right;
 	padding: 0;
 	width: 100%;
 	height: 98px;
 }
 
 #feature_panel img {
 	border: 0;
 	padding: 0;
 	margin: 0 20px 0 0;
 	float: left;
 }
 
 #feature_panel p {
 	font: italic x-large Arial, Helvetica, sans-serif;
 	color: #016699;
 	margin: 30px 0 0 0;
   line-height: 80%;
 }
 
 #feature_panel p span.heavy {
 	font-weight: bold;
 }
 
 #menu {
 	width: 150px;
 	padding: 0;
 	margin: 0;
    float: left;
 }
 
 #menu ul {
   list-style: none;
   padding: 0;
   margin: 0;
 }
 
 #menu ul li {
   border-bottom: 1px solid #fff;
   font: bold 8pt Arial, Helvetica, sans-serif;
   padding: 5px 10px;
 }
 
 #menu ul li a:link, #menu ul li a:visited {
   color: #fff;
   text-decoration: none;
   background: url(../images/menu_bullet.gif) no-repeat scroll left;
   padding: 5px 0 4px 10px;
 }
 
 #menu ul li a:hover {
   color: #016699;
   background: url(../images/menu_bullet_hover.gif) no-repeat scroll left;
   padding: 5px 0 4px 10px;
 }
 
 #main {
   margin: 0 10px 0 171px;
   padding: 0 10px 10px 10px;
 }
 
 #main p.breadcrumbs {
   font: 8pt Arial, Helvetica, sans-serif;
   margin-top: 10px;
 }
 
 #main p.breadcrumbs a:link {
   color: #cc0000;
 }
 
 #main p.breadcrumbs a:visited {
   color: #0000ff;
 }
 
 #main p.breadcrumbs a:active, #main p.breadcrumbs a:hover {
   color: #016699;
 }
 
 #main h1 {
   font: bold 12pt Arial, Helvetica, sans-serif;
   color: #016699;
   margin: 0;
 }
 
 #main p {
   font: 10pt Arial, Helvetica, sans-serif;
   color: #000;
   padding: 0;
   margin-top: 5px;
 }
 
 .top_link {
   font: bold 8pt Arial, Helvetica, sans-serif;
   float: right;
   margin: 10px 0 10px 0;
 }
 
 .top_link a:link, .top_link a:active {
   color: #016699;
   text-decoration: none;
   background: url(../images/top_bullet.gif) no-repeat scroll left;
   padding: 0 0 0 13px;
 }
 
 .top_link a:visited {
   color: #016699;
   text-decoration: none;
   background: url(../images/top_bullet.gif) no-repeat scroll left;
   padding: 0 0 0 13px;
 }
 
 .top_link a:hover {
   color: #cc0000;
   text-decoration: none;
   background: url(../images/top_bullet_hover.gif) no-repeat scroll left;
   padding: 0 0 0 13px;
 }
 
 #main a:link, #main a:active {
   color: #016699;
 }
 
 #main a:visited {
   color: #cc0000;
 }
 
 #main a:hover {
   color: #67888f;
 }

**Egor** · May 23, 2005 06:17

I've had a quick look through the code. From what I can see, it could well be an IE bug. Do the other browser's display it alright? Have you tried wrapping that section in a <p>?

**Alexandra** · May 23, 2005 16:48

It is definitely an IE bug as Firefox displays it perfectly (haven't checked the others yet. I've tried the <p> option, adding extra padding and spacing to the left (at first i thought it might be the menu sticking out further than it should as the kink is below that, but I can't see how that is the case.

**Alexandra** · May 23, 2005 20:10

Does anybody know how to fix this?

**Paul O'B** · May 24, 2005 09:13

HI,

It's IE's infamous three pixel jog. Have a look at the faq section on floats which explains in detail how to cure it.

For a quick fix add this code which will straighten it out.

Code:

/* mac hide \*/
* html #main{height:1%}
/* end hide */

The faq explains all about it and what else you may need to do

**Alexandra** · May 25, 2005 19:59

Thanks Paul. I ended up using the "* html" hack in the css to make IE use absolute positioning which seemed to solve the problem. I'll look in on the FAQ though as I can see this happening a lot in the future and I'd like a better solution than the one I used.

**Paul O'B** · May 26, 2005 07:55

HI Alex,

You may be better of using a float and using the fix as above (and documented in the faq). The reason being that absolute elements are removed form the flow and you will be unable to position anything under an absolute element unless the layout is completely rigid in which case you can use it ok.

However most times you will wanst to preserve the flow of the document and floats are useful for this

**Alexandra** · May 26, 2005 22:45

I agree totally...where do I find the FAQ you keep referring to?

**Paul O'B** · May 27, 2005 09:57

I agree totally...where do I find the FAQ you keep referring to?

lol - its here stickied at the top of the css forum

http://www.sitepoint.com/forums/showthread.php?t=171943

User Tag List

Thread: Indetnation Issues - Please help!

Thread Tools

Display

Indetnation Issues - Please help!

Bookmarks

Bookmarks

Posting Permissions