SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict Romuba's Avatar
    Join Date
    Jun 2007
    Location
    Cape Town, South Africa
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image position changed in IE8?

    I am working on a new site layout and I thought I had it all working but then came along IE8 and suddenly the image on the top right displaces downwards into the navigation. Any ideas?

    The Spry navigation on the left also has the flyouts displaying incorrectly - they display up higher than they should?

    The url is http://www.stmatthews.co.za/layout.html

    The css is as follows:
    Code:
    @charset "utf-8";
    body  {
    	font: 1em Verdana, Arial, Helvetica, sans-serif;
    	background: #003366;
    	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    	padding: 0;
    	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    	color: #000000;
    	top: 0px;
    }
    .twoColFixLtHdr #body_section {
    	width: 780px;
    	background: #003366 url(../images/white_200.jpg) repeat-y;
    	position: relative;
    	float: left;
    }
    .twoColFixLtHdr #container {
    	width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    	background: #003366;
    	margin: 0 auto;
    	text-align: left;
    } 
    
    
    .twoColFixLtHdr #header {
    	background: #003366;
    	padding: 0px;  /* 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. */
    	height: 200px;
    	margin: 0px;
    } 
    .twoColFixLtHdr #header img {
    	margin: 0px;
    	padding: 0px;
    	left: 0px;
    	top: 0px;
    	right: 0px;
    	bottom: 0px;
    	clip: rect(0px,0px,0px,0px);
    	float: left;
    	position: relative;
    }
    .twoColFixLtHdr #header h1 {
    	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    }
    .twoColFixLtHdr #header #logo {
    	text-align: left;
    }
    .twoColFixLtHdr #header #banner {
    	left: 0px;
    	height: 200px;
    	width: 530px;
    	top: 0px;
    	right: 0px;
    	float: right;
    	bottom: 0px;
    	margin: 0px;
    	padding: 0px;
    	position: relative;
    }
    .twoColFixLtHdr #footer {
    	padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
    	background:#003366;
    } 
    
    .twoColFixLtHdr #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: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    	color: #004FE1;
    	font-size: 60%;
    	text-align: center;
    }
    .twoColFixLtHdr #footer a:link {
    	color: #065EFF;
    }
    .twoColFixLtHdr #footer a:hover {
    	color: #fff;
    }
    
    .twoColFixLtHdr #sidebar1 {
    	float: left; /* since this element is floated, a width must be given */
    	width: 200px; /* 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 */
    	background: #fff; /* the background color will be displayed for the length of the content in the column, but no further */
    	padding: 0px;
    	position: relative;
    	color: #000;
    }
    .twoColFixLtHdr #mainmenu {
    	font: small-caps 60% Geneva, Arial, Helvetica, sans-serif;
    	color: #fff;
    	height: 50px;
    	text-align: right;
    	padding-right: 20px;
    	display: block;
    	letter-spacing: .05em;
    	word-spacing: .2em;
    }
    .twoColFixLtHdr #mainmenu a:link {
    	color: #FFF;
    }
    .twoColFixLtHdr #mainmenu a:visited {
    	color: #A6A6A6;
    	text-decoration: none;
    }
    .twoColFixLtHdr #mainmenu a:hover {
    	color: #000;
    	background: #fff;
    	height: 50px;
    }
    .twoColFixLtHdr #mainmenu a:active {
    	color: #003366;
    	text-decoration: none;
    	background: #fff;
    }
    
    
    .twoColFixLtHdr #mainContent {
    	margin: 0 0 0 0px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
    	padding: 10px 0px;
    	text-align: justify;
    	float: right;
    	background: #fff url(../images/paper_curl.jpg) no-repeat right top;
    	width: 530px;
    } 
    .twoColFixLtHdr #mainContent01 {
    	margin: 0 0 0 0px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
    	padding: 10px 0px;
    	text-align: justify;
    	float: right;
    	background: #9999ff url(../images/container_background.gif) no-repeat center 13px;
    	width: 780px;
    } 
    
    
    .twoColFixLtHdr #mainContent p {
    	font-size: 70%;
    	padding: 10px;
    }
    .twoColFixLtHdr #mainContent h1 {
    	font: bold 110% Geneva, Arial, Helvetica, sans-serif;
    	padding-left: 50px;
    	background: url(../images/head_bar.jpg) no-repeat;
    	color: #fff;
    	height: 30px;
    	padding-top: 10px;
    	letter-spacing: .1em;
    	word-spacing: .1em;
    	margin-top: 25px;
    	margin-left: 10px;
    }
    .twoColFixLtHdr #mainContent01 p {
    	font-size: 70%;
    	padding: 0px 10px;
    }
    .twoColFixLtHdr #mainContent01 #table01 h5 {
    	padding-left: 10px;
    }
    
    .twoColFixLtHdr #mainContent01 h1 {
    	font: bold 110% Geneva, Arial, Helvetica, sans-serif;
    	padding-left: 50px;
    	background: url(../images/head_bar.jpg) no-repeat;
    	color: #fff;
    	height: 30px;
    	padding-top: 10px;
    	letter-spacing: .1em;
    	word-spacing: .1em;
    	margin-top: 25px;
    	margin-left: 10px;
    }
    .twoColFixLtHdr #container #table01 {
    	background: url(../images/table_background.jpg) no-repeat center center;
    	height: 115px;
    	color: #003366;
    	padding: 10px;
    }
    .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;
    }
    #flashcontent {    width: 300px;    height: 190px;    margin: 0 auto;}
    Ross Bartholomew
    Web Designer/Developer
    BartWebSites
    E-mail: ross@bartwebsites.com

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE 8 is in beta right now so don't worry about your sites breaking in it. Only worry about finding bugs in the browser and reporting them to Microsoft so they can fix them.


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
  •