SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with CSS - html layout.

    Hey,

    I have a site I am developing. Naturally the code seems to work fine in all browsers except IE.

    There seems to be a peculiar gap in the top potion of the page. I have attached a screen shot that illustrates the issue.

    The html code is here:
    Code:
    <body class="thrColFixHdr">
    
    <div id="container">
      <div id="topHeader"></div>
      	<div id="sidebar1" >
     	<div id="sidebar2">
    
       		<div id="header"></div>
        			<div id="menuContainer">
          				<div id="menu">
          					<div id="menuLeft"></div>
          					<div id="menuRight"></div>
            			<!-- end #menu --></div>
       		 	<!-- end #menuContainer --></div>
            	<div id="featureContainer"><!-- end #featureContainer --></div>
            	<div id="featureBottomContainer"><!-- end #featureBottomContainer --></div>
        		<div id="mainContent"><!-- end #mainContent --></div> 
         		<div id="footer"><!-- end #footer --></div> 
        	<!-- end #sidebar2 --></div>
         	<!-- end #sidebar1 --></div>
        
    	<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
        
        <div id="subfooter"></div>
      
    <!-- end #container --></div>
    </body>
    And the CSS is here:

    Code:
    .thrColFixHdr #container { 
    	width: 989px ;  /* was 1073 */
    	margin: 15px auto; /* the auto margins (in conjunction with a width) center the page */
    	text-align: left; /* this overrides the text-align: center on the body element. */
    } 
    
    .thrColFixHdr #topHeader {
    	background-image:url(../images/headerTopShadowBG.png);
    	background-repeat:no-repeat;
    	height:8px;
    	float: left; /* since this element is floated, a width must be given */
    	width: 989px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    
    }
    
    .thrColFixHdr #sidebar1 {
    	background-image:url(../images/borderShadowLeft.png);
    	background-repeat:repeat-y;
    	background-position:left;
    	float: left; /* since this element is floated, a width must be given */
    	width: 989px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    	position:relative;
    
    }
    .thrColFixHdr #sidebar2 {
    	background-image:url(../images/borderShadowRight.png);
    	background-repeat:repeat-y;
    	background-position:right;
    	float: right; /* since this element is floated, a width must be given */
    	width: 973px; /* was 1020px*/
    	
    } 
    .thrColFixHdr #header {
    	background-image:url(../images/headerBG.gif);
    	background-position:top;
    	width:957px; /* was 965 */
    	height:127px;
    } 
    
    
    .thrColFixHdr #menu {
    	background-image:url(../images/menuBG.png);
    	background-repeat:repeat-x;
    	height:33px;
    	width:951px;  /* was 965 */
    	margin: 0px 3px;
    }
    .thrColFixHdr #menuContainer {
    	background-color:#FFFFFF;
    	width:957px;  /* was 965 */
    } 
    
    .thrColFixHdr #menuLeft { position:relative;
    	width:645px;
    	float:left;
    	padding: 0 20px 0 10px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    	margin: 0 0;
    } 
    .thrColFixHdr #menuRight { 
    	float:left;
    	padding: 5px 0 0 0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    	margin: 0 0;
    } 
    
    
    
    .thrColFixHdr #featureContainer {
    	background-image:url(../images/featureBG.png);
    	background-repeat:repeat-x;
    	width:957px;
    	height:307px;  
    } 
    
    .thrColFixHdr #featureBottomContainer {
    	background-image:url(../images/featureBGBottom.png);
    	background-repeat:no-repeat;
    	width:957px;  
    	height:12px;
    } 
    .thrColFixHdr #mainContent {
    	width:957px;
    } 
    .thrColFixHdr #footer {
    	background-image:url(../images/footerBG.jpg);
    	background-repeat:repeat-x;
    	background-color:#ffcc33; /*#043571 */
    	min-height:225px;
    	width:957px;
    } 
    
    .thrColFixHdr #subfooter {
    	background-image:url(../images/footerBottomShadowBG.png);
    	background-repeat:no-repeat;
    	height:8px;
    	float: left; /* since this element is floated, a width must be given */
    	width: 989px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
    
    }
    
    .thrColFixHdr #footer p {
    	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    	padding: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    }
    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { /* this class can be used to float an element left in your page */
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
    I realize I am trying something out of the ordinary wrapping and rewrapping code in order to keeps the side elements snug to the main body elements. If there is a different approach to it - I'm all ears.

    Any help is appreciated.

    Thanks!
    Attached Images Attached Images

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    It takes a while for attachments to be approved - can you post a link to the live website?

  3. #3
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Found it! It was a conditional statement in the header of the index page.

    Thanks to Stevie for taking a look!

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Ah, that'll be why when I looked at it just now I couldn't see anything wrong with it!

  5. #5
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the conditional code -

    Code:
    <!--[if IE]>
    <style type="text/css"> 
    /* place css fixes for all versions of IE in this conditional comment */
    .thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 {}
    .thrColFixHdr #mainContent { zoom: 1; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]-->
    The sidebar 1 had a top padding on 30px which I don't understand in the first place. BUT I tend to use pre-built code and then manipulate it - so it may have lost its meaning as soon as I altered the template.


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
  •