SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: IE Again

  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Orlando
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE Again

    Can someone check this out for me...for the most part it looks how I want in Firefox so I figure my code is somewhat sound. CSS validates as does xhtml Transitional. But in IE the main1 div drops down below the sidebar instead of staying up under the header.

    Here's the link.

    I want the sidebar containing navigation to continue to expand down while the main content stays up underneath the header.

    Thanks for the help.
    BTW...I know there is some useless (as of now) selectors but I don't see anything that should mess things up.
    Last edited by Loxias; Apr 20, 2004 at 08:40. Reason: Added link and removed code for less scrolling.

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Northern CA, USA
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE drops into quirks mode without a *strict* Doctype. Have you tried viewing your page with a html strict doctype - as opposed to xhtml? In quirks mode, IE gets the box model wrong, so your width hacks in your css may be confusing IE.

    You may need to clear that float as well, but I'm getting kind of cross-eyed scrolling right and left trying to read your code.

    A suggestion: Post a link to a page with a problem and leave the CSS in the head. It's a bit easier to look over your code, and download it to my desktop to play around with it. Kind of hard to make suggestions when I can't change things to zoom in on the problem.

    HTH

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Orlando
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was under the impression that IE goes into quirks mode with an improper doctype or an xhtml doctype with an xml declaration. The transitional doctype should be fine (and has worked well for other projects) but I'll check strict out. Let me get the page up and I'll edit it with a link.
    Last edited by Loxias; Apr 20, 2004 at 08:05. Reason: spelling mistakes

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by albion7
    IE drops into quirks mode without a *strict* Doctype.
    Not True IE only drops into quirks mode with no doctype, an incorrct doctype, or an html doctype without uri, or if content is above a doctype (such as the xml prologue).

    Strict and transitional both use standards mode and not quirks mode.

    It can be confusing and here's a good link:

    http://www.ericmeyeroncss.com/bonus/render-mode.html

    Paul

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Orlando
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot Paul...I got all excited when you posted expecting a fix!!

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)

    Thanks a lot Paul...I got all excited when you posted expecting a fix!!
    Sorry I didn't want to butt in on Albions answer.

    I'm just going offline but if there's no solution offered I'll have a look for you tonight (after 9pm).

    (Just check your widths as ie adds about 3 px to floats and can cause elements to drop. (also ie will clear all floats in the document in some cases)

    Paul

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Orlando
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Sorry I didn't want to butt in on Albions answer.

    I'm just going offline but if there's no solution offered I'll have a look for you tonight (after 9pm).

    (Just check your widths as ie adds about 3 px to floats and can cause elements to drop. (also ie will clear all floats in the document in some cases)

    Paul
    NP...just got excited there for a sec.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not quite sure if this is what you wanted to achieve but here it is anyway
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>working</title>
    <style type="text/css">
    /* Main Attributes */
    html body { 
     margin: 10px 0 10px; 
     font-size: 12px; 
    }
    body {
     background: #e9e9e9;
     font-family:  arial, "arial narrow", verdana, helvetica, arial, sans-serif;
    }
    a:link { 
     color: #330;
    }
    a:visited {
     color: #575423;
    }
    a:active {
     color: #8F4F2B;
    }
    a:hover {
     color: #036;
    }
    /* Main Attributes */
    /* Div Information */
    #container { 
     border-left: solid #000 1px;
     border-bottom: solid #000 1px;
     border-right: solid #000 1px;
     margin: 0 auto;
     background: #fff;  
     width: 762px; /*false value*/
     width/* */:/**/760px; 
     width: /**/760px;  
    }
    .space {
     clear: both;
     font-size: 1px;
     margin: 0;
     padding: 0;
     line-height: 1px;
     height: 1px;
    }
    /* Body Content and Sideboxes */
    #main1 {
     margin: 5px 0px 10px 0px; 
     padding: 0;
     border-top: 1px solid #000;
    }
    #sidebox1 {
     margin: 0 5px; 
     padding: 0 2px 0 0;
     border-top: 1px dashed #000;
     border-left: 1px dashed #000;
     border-bottom: 1px dashed #000;
    }
    #sidebox2 {
     margin: 5px 5px; 
     padding: 0 2px 0 0;
     border-top: 1px dashed #000;
     border-left: 1px dashed #000;
    }
    /* Body Content and Sideboxes */
    /* Top of Page */
    #header {
     padding: 5px 0px;
     border-top: 1px solid #000;
     border-bottom: 1px solid #000;
     margin: 10px 5px;
     background-color: #FFFFFF;
    }
    #logo {
     background-color: #C3C3C3;
     border-right: 1px dashed #000;
     border-bottom: 1px dashed #000;
     width: 80px;
     height: 120px;
     float: left;
    }
    #sidebar {
     background:#ffffcc;
     float: right;
     width: 120px;
     margin: 0; 
     padding: 0 2px 0 0;
     border-left: 1px dashed #000;
     border-bottom: 1px dashed #000;
    }
    #links {
     background-color: #EBE800;
     color: #9F9E9E;
     padding: 0;
     border: 0;
     margin: 0;
    }
    /* Top of Page*/
    /* Bottom of Page */
    #footer { 
     margin: 5px 5px 10px 5px;
     border-top: 1px solid #000;
     padding: .85em 0;
     border-bottom: 1px solid #000;
     font-size: 80%;
     font-family: Verdana, Helvetica, sans-serif;
    }
    #bot1 {
     margin: 0;
     padding: 1px 0 0;
    }
    #bot2 {
     background: #888;
     margin: 0; 
     padding: 4px 0 0;
    }
    #copy {
     background: #888;
     text-align: center;
    }
    #compliant {
     float: left;
    }
    #design {
     float: right;
    }
    /* Bottom of Page */
    /* Navigation */
    #navbar{
     background-color: #EBE800;
     margin: 0;
     padding: 0;
     border: 0;
     width: 760px;
    }  
    #navbar li {
     background-color: #EBE800;
     margin: 0;
     padding: 0;
     list-style-type: none; 
    }
    #navbar li a {
     background-color: #EBE800;
     padding: 0 8px;
     font-weight: bold;
     text-decoration: none; 
    }
    #navbar li a:link {
     color: #9F9E9E;
     background-color: #EBE800;
     text-decoration: none;
    }
    #navbar li a:hover {
     color: #EBE800;
     background-color: #9F9E9E;
     text-decoration: none;
    }
    #tnav {
     position: absolute; 
     top: 0;
     right: 0;
     margin: 10px;
    }  
    #tnav li {
     margin: 0;
     padding: 0;
     list-style-type: none;
     border-right: 1px solid #330; 
    }
    #tnav li.non {
     border: none 0;
    } 
    #tnav li a {
     padding: 0 8px;
     font-weight: bold;
     text-decoration: none; 
    } 
    #tnav li a:hover {
     text-decoration: underline; 
    }
    #bnav {background: #888; 
     margin: 0;
     padding:.85em; 
     text-align: center;
    } 
    #bnav li {
     margin: 0;
     padding: 0 0 0 4px;
     list-style-type: none;  
     border-right: 1px solid #330; 
    }
    #bnav li.non {
     border: none 0;
    }
    #bnav a {color: #EBED4A; 
     text-decoration: none;
     font: bold 11px Arial, sans-serif;
     padding: 0 4px 0 0;
      } 
    #bnav a:hover {
     text-decoration: underline; 
    }
    /* Navigation */
    /* Headers */
    h2 {
     color: #EBE800;
     font: bold 22px "Arial Narrow", Arial, sans-serif;
     margin: 4px 0;
     padding: 0;
    }
    #content h3, #sidebar h3 {
     font: bold 15px "Arial Narrow", Arial, sans-serif;
     margin: 0;
     padding: 0;
    }
    #sidebar h3 {
     color: #663;
     margin: 0 1em;
    }
    /* Headers */
    /* Miscellaneous */
    #header.img {
     border: 0;
    }
    #content p { 
     margin: 0.5em 0;
    }
    #right p { 
     color: #885;
     border-top : 1px solid #885;
     padding: 0.5em 0;
     margin: 1em;
    }
    .bold {
     font-weight: bold;
    }
    textarea {
     border: 1px solid #EBED4A;
    }
    input {
     border: 1px solid #EBED5A;
    }
    .button {
     background-color: #9F9E9E;
     color: #fff;
    }
    /* Miscellaneous */
    #centre {
     margin-right:130px;
     margin-left:85px;
    }
    * html #centre {height:1%}/*defeat ie 3pixel jog */
    </style>
    </head>
    <body>
    <div id="container"> 
      <div id="top"> 
    	<div id="logo"> </div>
    	<div id="sidebar"> 
       Sidebar<br />
    	  Navigation<br />
    	  Navigation<br />
    	  Navigation<br />
    	  Navigation<br />
    	  Navigation<br />
    	  Navigation<br />
    	  Navigation<br />
    	  Navigation<br />
    	  Navigation<br />
    	  Navigation<br />
    	  <div id="sidebox1"> Sidebox1<br />
    	  </div>
    	  <div id="sidebox2"> Sidebox2<br />
    	  </div>
    	</div>
    	<div id="centre" > 
    	  <div id="header"> header </div>
    	  <div id="main1"> Main Content </div>
    	  <p>Text will go here. </p>
    	  <div id="main1"> Main Content </div>
    	  <p>Text will go here. </p>
    	  <div id="footer">Footer </div>
    	</div>
      </div>
    <br class="space" />
    </div>
    </body>
    </html>
    I'm sure you can play around with it to make it fit etc.

    Paul

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Orlando
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul...I took a look at your 3 column fixed layout and started wondering if separating the layout into columns instead of rows would work out better. Looks like it will

    Appreciate it.


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
  •