CSS problems with IE

[mikeinspain]

Hi Guys..

Hope someone can help. I have a problem with a particular page on one of the sites I am developing. The page is here: http://tagwealth.co.uk/contact/.

The pages renders fine in Safari and Firefox, but it gets shunted to the left of the screen in IE.

The CSS for the page is below..

/********************************************
   HTML ELEMENTS
********************************************/ 
 
/* top elements */
* { padding: 0; margin: 0; }
 
body {
    margin: 0;
    padding: 0;
    color: #333;
    background: #FFF url(/images/bg.jpg) repeat-x;
    text-align: center;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.72em;
    font-style: normal;
    line-height: 2.0em;
    font-weight: normal;
    font-variant: normal;
}
 
/* links */
a { background: inherit; color: #72A545; }
a:hover { background: inherit; color: #006699; }
 
/* headers */
h1, h2, h3 {
    font: bold 1em 'Trebuchet MS', Tahoma, Sans-serif;
    color: #82A7B0;
}
h1 { font-size: 1.4em; }
h2 { font-size: 1.2em; text-transform: uppercase;}
h3 { font-size: 1.2em; }
 
p, h1, h2, h3 {
    margin: 10px 15px;
}
ul, ol {
    margin: 10px 30px;
    padding: 0 15px;    
    color: #72A545;    
}
ul span, ol span {
    color: #333;
}
 
/* images */
img {
    border: 2px none #CCC;
}
img.float-right {
  margin: 5px 0px 5px 15px;  
}
img.float-left {
  margin: 5px 15px 5px 0px;
}
a img {  
  border: 2px solid #72A545; /* #32CD32; */
}
a:hover img {  
  border: 2px solid #806B4D !important; /* IE fix*/
  border: 2px solid #72A545; /* #32CD32; */
}
 
code {
  margin: 5px 0;
  padding: 10px;
  text-align: left;
  display: block;
  overflow: auto;  
  font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
  /* white-space: pre; */
  background: #FAFAFA;
  border: 1px solid #f2f2f2;  
  border-left: 3px solid #72A545;
}
acronym {
  cursor: help;
  border-bottom: 1px solid #777;
}
blockquote {
    margin: 15px;     padding: 0 0 0 20px;      
      background-color: #FAFAFA; 
    background-position: 8px 10px;
    border: 1px solid #f2f2f2; 
    border-left: 3px solid #72A545;  
    font: bold 1.2em/1.5em "Trebuchet MS", Tahoma, sans-serif; 
    color: #666666;    
}
 
/* form elements */
form {
    margin:10px; padding: 0;
    border: 1px solid #f2f2f2; 
    background-color: #FAFAFA; 
}
label {
    display:block;
    font-weight:bold;
    margin:5px 0;
}
input {
    padding: 2px;
    border:1px solid #eee;
    font: normal 1em "Trebuchet MS", Tahoma, sans-serif;
    color:#777;
}
textarea {
    width:400px;
    padding:2px;
    font: normal 1em "Trebuchet MS", Tahoma, sans-serif;
    border:1px solid #eee;
    height:100px;
    display:block;
    color:#777;
}
input.button { 
    margin: 0; 
    font: bold 1em Arial, Sans-serif; 
    border: 1px solid #CCC;
    background: #FFF; 
    padding: 2px 3px; 
    color: #333;    
}
 
/* search form */
.searchform {
    background-color: transparent;
    border: none;    margin: 0; padding: 0;    
}
.searchform p { margin: 10px; padding: 0; }
.searchform input.textbox { 
    width: 130px;
    color: #333; 
    height: 20px;
    padding: 2px;    
    vertical-align: top;
}
.searchform input.button { 
    font: bold 12px Arial, Sans-serif; 
    color: #333;    
    width: 60px;
    height: 26px;
    border: none;
    padding: 3px 5px;    
    vertical-align: top;
}
 
/***********************
      LAYOUT
************************/
 
#header-content, #content, #footer-content {
    width: 760px;
}
 
/* header */
#header {
    height: 100px;
    text-align: left;    
}
#header-content {
    position: relative;
    margin: 0 auto; padding: 0;
}
#header-content #logo {
    position: absolute;
    letter-spacing: inherit;
    color: #FFF;
    margin: 0;
    padding: 1;
    /* change the values of left and top to adjust the position of the logo */
    top: 9px;
    left: 0px;
    font-family: "ATRotis Semiserif 55", sans-serif, serif;
    font-size: 30px;
    font-weight: bold;
    width: 288px;
    height: 44px;
}
#header-content #slogan {
    position: absolute;    
    font: bold 1.1em 'Trebuchet Ms', Sans-serif;
    text-transform: none;
    color: #FFF;    
    margin: 0; padding: 0;
 
    /* change the values of left and top to adjust the position of the slogan */
    top: 55px; left: 40px;
}
 
/* header menu */
#header-content ul {
    position: absolute;
    right: -5px; top: 15px;
    font: bolder 1.3em 'Trebuchet MS', sans-serif;
    color: #FFF;
    list-style: none;
    margin: 0; padding: 0;        
}
#header-content li {
    display: inline;
}
#header-content li a {
    float: left;
    display: block;
    padding: 3px 12px;    
    color: #FFF;
    background-color: #333;
    text-decoration: none;
    border-right: 1px solid #272727;
}
#header-content li a:hover {
    background: #65944A;
    color: #FFF;
}
#header-content li a#current  {
    background: #65944A;
    color: #FFF;
}
 
/* header photo */
.headerphoto {
    margin: 0 auto;
    width: 770px;
    height: 200px;
    padding: 15px 10px 10px 10px; 
    background: #FFF url(/images/headerphoto.jpg) no-repeat center;    
}
 
/* content */
#content-wrap {
    clear: both;
    float: left;
    width: 100%;
}
#content {
    text-align: left;    
    padding: 0;
    margin: 0 auto;    
}
 
/* sidebar */
#sidebar {
    float: right;
    width: 30%;
    margin: 0 0 10px 0; padding: 0;    
}    
#sidebar h1 {
    padding: 10px 0px 5px 10px;
    margin: 0;    
}
.sidebox {
    background: #F2F2F2;
    border: 1px solid #EFEDED;
    margin-bottom: 10px;
}
 
/* sidebar menu */
#sidebar ul.sidemenu {
    list-style:none;
    margin: 10px 0;
    padding: 0;
    background: #F2F2F2;            
}
#sidebar ul.sidemenu li {
    padding: 0px 10px;
}
#sidebar ul.sidemenu a {
    display:block;
    font-weight:normal;
    color: #333;
    height: 1.5em;    
    padding:.3em 0 .3em 15px;
    line-height: 1.5em;
    border-bottom: 1px dashed #CCC;
    text-decoration:none;
}
#sidebar ul.sidemenu a.top{    
    border-top: 1px dashed #CCC;
}
#sidebar ul.sidemenu a:hover {
    padding: .3em 0 .3em 10px;
    border-left: 5px solid  #65944A;
    color: #65944A;        
}
 
/* main */
#main {
    float: left;
    width: 68%;    
    margin: 0 0 10px 0; padding: 0;    
}
#main h1 {
    padding: 10px 0 5px 5px;
    margin: 0 0 0 10px;
    border-bottom: 1px solid #f2f2f2;     
}
 
.post {
    margin: 0;
    padding: 0;
    border: 1px solid #EFEDED;
    background-color: #FFF;
    background-image: url(/images/gradientbg.jpg);
    background-repeat: repeat-x;
}
.post .post-footer {
    background-color: #FAFAFA;
    border: 1px solid #f2f2f2;
    padding: 5px; margin-top: 20px;
    font-size: 95%;
}
.post .post-footer .date {
    background: url('clock.gif') no-repeat 0 center;
    padding-left: 20px; margin: 0 10px 0 5px;
}
.post .post-footer .comments {
    background: url('comment.gif') no-repeat 0 center;
    padding-left: 20px; margin: 0 10px 0 5px;
}
.post .post-footer .readmore {
    background: url('page.gif') no-repeat 0 center;
    padding-left: 20px; margin: 0 10px 0 5px;
}
 
/* footer */
#footer {
    clear: both;
    margin: 0; padding: 0;
    font: normal .95em/1.5em 'Trebuchet MS', Tahoma, Arial, sans-serif;
    text-align: left;    
}
#footer h3, #footer p {
    margin-left: 0;
}
#footer-content {    
    border-top: 1px solid #EAEAEA;
    margin: 0 auto;
    padding-left: 15px;
}
#footer-content a {
    text-decoration: none;
    color: #777;    
}
#footer-content a:hover {
    text-decoration: underline;
    color: #333;
}
#footer-content ul {
    list-style: none;
    margin: 0; padding: 0;
}
#footer-content .col {
    width: 32%;
    padding: 0 5px 30px 0;    
}
#footer-content .col2 {
    width: 33%;
    padding: 0 0 30px 0;    
}
 
/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right {    text-align: right; }
 
/* additional classes */
.clear { clear: both; }
.gray  { color: #BFBFBF; }
 

I have no idea why this happening. Would someone be kind enough to point me in the right direction. Thanks Mike

[mikeinspain]

PS: I forgot to include this bit of CSS that is in the php file.

    <style type='text/css' media='screen,projection'>
        <style type='text/css' media='screen,projection'>
    <!--
    body { margin:20px auto;width:500px;padding:20px;border:1px solid #ccc;background:#fff;font-family:georgia,times,serif; }
    fieldset { border:0;margin:0;padding:0; }
    label { display:block; }
    input.text,textarea {
    width:300px;
    color:#333;
    padding:3px;
    margin:1px 0;
    border:1px solid #ccc;
    font-family: 'courier new', courier, monospace;
    font-size: 16px;
    line-height: 25px;
}
    input.submit { padding:2px 5px;font:bold 12px/12px verdana,arial,sans-serif; }
 
    -->
    </style>

thanks Mike

[drhowarddrfine]

As usual, the solution is validate your html and css and fix the errors listed there.

[mikeinspain]

As usual, the solution is validate your html and css and fix the errors listed there.

Thanks for that. I am have tried going through the 2 error pages for xhtml and css, but I really can't seem to get this particular page to display correctly in IE. As mentioned safari, firefox etc.. are all ok and indeed IE except for the one page where it all gets shifted to the left...

Is it a case of perhaps inputting a little IE hack to render it correct on the screen or is there perhaps an easier solution?

I have reverted back to the original code for this page now.

Thanks

Mike

[drhowarddrfine]

iirc, and it is the case now, you are missing the ending </style> tag. How does IE react to this? I don't know. But it's hard enough to work with code that validates than one with 20 html errors as it is now. Maybe it will fix it, maybe it won't. But at least we can eliminate those possibilities.

[mikeinspain]

iirc, and it is the case now, you are missing the ending </style> tag. How does IE react to this? I don't know. But it's hard enough to work with code that validates than one with 20 html errors as it is now. Maybe it will fix it, maybe it won't. But at least we can eliminate those possibilities.

Sorry if this is a really stupid question, and I really appreciate your help but below is my first rows of code: I see that I have that tag </style> there..??

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <script type="text/javascript" src="js/functionAddEvent.js"></script>
    <script type="text/javascript" src="js/contact.js"></script>
    <script type="text/javascript" src="js/xmlHttp.js"></script>
    <style type='text/css' media='screen,projection'>
        <style type='text/css' media='screen,projection'>
    <!--
    body { margin:20px auto;width:500px;padding:20px;border:1px solid #ccc;background:#fff;font-family:georgia,times,serif; }
    fieldset { border:0;margin:0;padding:0; }
    label { display:block; }
    input.text,textarea {
    width:300px;
    color:#333;
    padding:3px;
    margin:1px 0;
    border:1px solid #ccc;
    font-family: 'georgia,times,serif;
    font-size: 16px;
    line-height: 25px;
}
    input.submit { padding:2px 5px;font:bold 12px/12px verdana,arial,sans-serif; }
 
    -->
    </style>
<meta name="Description" content="Information architecture, Web Design, Web Standards." />
<meta name="Keywords" content="your, keywords" />
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Distribution" content="Global" />
<meta name="Author" content="Erwin Aligam - [e-mail]" />
<meta name="Robots" content="index,follow" />
<link rel="stylesheet" href="/css/PixelGreen.css" type="text/css" />
<title>//  TAG WEALTH MANAGEMENT  //  Pensions  //  Investments  //  Retirement Planning  //</title>
</head>

[drhowarddrfine]

I just went by what the validator said. But you have two <style> tags. Remove one. Might be confusing to a browser. Also, add a <title></title>. That will confuse the validator, too.