SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2005
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning problem in IE6/IE7

    I am currently trying to solve a problem with my site's CSS. It works great in FF and Safari, but fails in IE6 and IE7.

    The site in question is http://waylonrobert.com

    For convenience, here is my CSS:

    Code CSS:
    @charset "UTF-8";
    /* CSS Master for [url]www.waylonrobert.com[/url]
    ----------------------------------
    Author: Waylon Baumgardner (waylonrobert@gmail.com) - ([url]www.waylonrobert.com[/url])
    Creation: March 13, 2008
    Revision No.: 7
    Revision Date: February 3, 2009
    Copyright: All rights reserved. 
    (Stradivarius - [url]http://en.wikipedia.org/wiki/Stradivarius[/url])
    ----------------------------------
    */
     
    /* ----- PAGE LAYOUT ------------------------------------------------- */
     
    html, body { 
     	margin: 0; 
     	padding: 0; 
     	text-align: center; 
     	background:#59460f url(/images/woodbg3.jpg) repeat fixed left top;
     	color: #eae5d8;
     	font-family: Georgia, sans-serif;
     	font-size: 13px;
    } 
     
     /* *** Float containers fix:
     [url]http://www.csscreator.com/attributes/containedfloat.php[/url] *** */ 
    .clearfix:after {
     content: "."; 
     display: block; 
    height: 0; 
     clear: both; 
     visibility: hidden;
     }
     
    .clearfix{display: inline-block;}
     
    /* Hides from IE-mac \*/
    * html .clearfix{height: 1%;}
    .clearfix{display: block;}
    /* End hide from IE-mac */ 
     
    /* --- TYPOGRAPHY --- */
     
    h1 {
    	font-family: "Rockwell", serif;
    	font-size: 20px;
    	font-weight: normal;
    	color: #f8f5c0;
    	text-align: left;
    }
     
    h2 {
    	font-family: "Rockwell", serif;
    	font-size: 14px;
    	font-weight: normal;
    	font-variant: small-caps;
    	letter-spacing: 0.1em;
    	color: #f8f5c0;
    	text-align: left;
    }
     
    a:link, a:visited {
        color: #F8F5C0;
    	font-weight: bold;
    }
     
    a:hover {
    	background-color: #573910;
    }
     
    a:visited {
    	text-decoration: none;
    }
     
    .highlight {
    	background-color: #000;
    }
     
    /* --- CONTENT CLASSES --- */
     
    a img {
    	border: 0;
    }
     
    .pagewidth { 
     	width: 800px; 
     	text-align:left;  
    	margin-left: auto; 
     	margin-right: auto;  
    } 
     
    .section {
     	width: 800px;
     	height: 65px;
     	background: transparent;
     	margin-top: 20px;
    }
     
    .section2 {
      	width: 800px; 
     	text-align:left;  
    	margin-left: auto; 
     	margin-right: auto; 
    }
     
    .workDES {
    	width: 400px; 
     	float: left; 
     	text-align: left;
     	line-height: 1.5em;
     	position: absolute;
     	margin-left: 8px;
     	padding: 10px 5px 10px 5px;
    }
     
     
    .workIMG {
     	float: right;
     display: inline-block;
     	position: relative;
     	width: 400px;
    clear: both; 
    }
     
    .shell {
    	background:url(/images/work-bg.png) no-repeat;
    	text-align: center;
    	width: 800px;
    	height: 245px;
    	margin-top: 20px;
    }
     
    .marginauto {
    	margin: 20px auto;
    }
     
    ul {
     	list-style-position: outside;
     	list-style-image: none;
     	list-style-type: none;
     	padding: 5px;
    }
     
    .testli li {
    background:transparent url(/images/arrow.png) no-repeat scroll 0 4px;
    padding: 0 20px 0 20px;
    }
     
    /* ----- MASTHEAD ------------------------------------------------- */
     
    #top {	
    	background:transparent url(/images/toptest.png) repeat-x;
    	width: 100%;
    	height: 45px;
    }
     
    #masthead {	
    	margin: auto;
    	height: 175px;
    }
     
    /* ----- NAVIGATION ------------------------------------------------- */
     
    .navtop {
        width: 800px;
        height: 48px;
        margin: auto auto;
    }
     
    /* --- BUTTONS --- */
    a.wsa { 
        background:url(/images/wsa2.png) repeat 0px 0px; 
        width: 150px; 
        height: 43px; 
        display: block; 
    }
     
    a.wsa span { 
        display: none; 
    }
     
    a.wsa:hover { 
        background: url(/images/wsa2.png) repeat 0px -43px; 
    }
     
    a.logoa { 
        background:url(/images/logoa.png) repeat 0px 0px; 
        width: 150px; 
        height: 43px; 
        display: block; 
    }
     
    a.logoa span { 
        display: none; 
    }
     
    a.logoa:hover { 
        background: url(/images/logoa.png) repeat 0px -43px; 
    }
     
    a.printa { 
        background:url(/images/printa.png) repeat 0px 0px; 
        width: 150px; 
        height: 43px; 
        display: block; 
    }
     
    a.printa span { 
        display: none; 
    }
     
    a.printa:hover { 
        background: url(/images/printa.png) repeat 0px -43px; 
    }
    a.contacta { 
        background:url(/images/contacta.png) repeat 0px 0px; 
        width: 150px; 
        height: 43px; 
        display: block; 
    }
     
    a.contacta span { 
        display: none; 
    }
     
    a.contacta:hover { 
        background: url(/images/contacta.png) repeat 0px -43px; 
     
    }
     
    /* --- NAV CLASSES --- */
     
    .topli {
    float: right; /* This pushes the buttons to the right - make sure right order in HTML */
    }
     
    /* ----- FOOTER ------------------------------------------------- */
     
    #foot {
    	background:url(/images/footbg4.png) repeat-x;
    	width: 100%;
    	height: 325px;
    	margin: auto auto;
    }
     
    #foot2 {
    	padding: 10px 5px 0px 5px;
    	background: url(/images/footerpbg.png) repeat-x;
    	height: 25px;
    	width: 800px;
    	margin: auto auto;
    }
     
    /* --- FOOTER CLASSES --- */
     
    .shell2 {
    	background: transparent;
    	text-align: center;
    	width: 800px;
    	height: 275px;
    	margin: auto auto;
    	margin-bottom: 10px;
    }
     
    .foot1 {
     	width: 400px; 
     	float: left; 
     	text-align: left;
     	line-height: 1.5em;
     	clear: both;
     	position: absolute;
     	margin-left: 8px;
     	padding: 26px 5px 10px 5px;
    }
     
    .foot2 {
     	float: right;
     	display: inline;
     	position: relative;
     	width: 400px; 
      	padding: 26px 5px 10px 5px;
       	text-align: left;
    }
     
    .pfoot1 {
     	padding-right: 45px;
    }
     
    .footer {
    	clear: both;
    	font-size: 11px;
    	margin: auto;
    	text-align: left;
    	width: 800px;
    }
     
    .left {
    	float: left;
    }
     
    .left span {
    	margin: 0 0 0 5px;
    }
     
    .right {
    	float: right;
    }
     
    .right span {
    	margin: 0 5px 0 36px;
    }

    I've tried several things but I can't get the left column to align properly. Any suggestions? Thanks!

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mathematics needed - the width of .workIMG (400px) plus the width of .workDES (400px) plus the padding on .workDES (10px) plus the left margin on .workDES (8px) = 818px, which won't fit in a 800px wide container. This is why you had to try absolute positioning for FF.

    As the divider line image is 400px wide, the easiest way to make things fit is a negative left margin on .workIMG - then you can remove the absolute positioning :
    Code:
    .workDES {
    	width: 400px; 
     	float: left; 
     	text-align: left;
     	line-height: 1.5em;
     	margin-left: 8px;
     	padding: 10px 5px 10px 5px;
    }
    
     
    .workIMG {
     	float: right;
     	position: relative;
     	width: 400px;
     	clear: both; 
     	margin-left: -20px;
    }

  3. #3
    SitePoint Member
    Join Date
    Aug 2005
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    Mathematics needed - the width of .workIMG (400px) plus the width of .workDES (400px) plus the padding on .workDES (10px) plus the left margin on .workDES (8px) = 818px, which won't fit in a 800px wide container. This is why you had to try absolute positioning for FF.

    As the divider line image is 400px wide, the easiest way to make things fit is a negative left margin on .workIMG - then you can remove the absolute positioning :
    Code:
    .workDES {
    	width: 400px; 
     	float: left; 
     	text-align: left;
     	line-height: 1.5em;
     	margin-left: 8px;
     	padding: 10px 5px 10px 5px;
    }
    
     
    .workIMG {
     	float: right;
     	position: relative;
     	width: 400px;
     	clear: both; 
     	margin-left: -20px;
    }
    Thanks so much! I completely overlooked this. This is my first attempt at a complete CSS site by scratch (without the aid of a framework or readily available CSS template that I've modified) so there is obviously a lot to learn. Thanks again .


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
  •