SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Indetnation Issues - Please help!

    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.
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Care to post your css and html?

  3. #3
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
     }
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au

  4. #4
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    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>?

  5. #5
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au

  6. #6
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does anybody know how to fix this?
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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

  8. #8
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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

  10. #10
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree totally...where do I find the FAQ you keep referring to?
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •