No replies
Mzor
Offline
newbie
Last seen: 11 years 19 weeks ago
Joined: 2009-05-06
Posts: 1
Points: 0

I am pretty much a newbie when it comes to CSS... Currently I am designing a website for someone, and the style-sheet I've made has worked has worked fine in the browsers I have tested - Firefox, Opera, Safari, Chrome - But in IE the style sheet is an absolute mess to the greatest meaning of the word. I've validated the CSS, and it went through fine... But basically, I'm making a three column layout, and in IE, the paragraph margins are messed up, the borders aren't working correctly, the whole thing has uncentered itself, the columns are wider than they are supposed to be and are passing the borders, etc.

Now, I really have no clue where to even start trying to fix this, so I was wondering if someone could look at the code and assist me a bit...

I have the CSS in one external stylesheet:

body {
  background-color: #003800;
}
 
#wrap{
   width: 816px;
   margin-left: auto;
   margin-right: auto;
   background-color: #ffffff;
}
 
#header {
  background-color: #ffffff;
  text-align: center;
  border-top: solid 8px;
  border-left: solid 8px;
  border-right: solid 8px;
  border-bottom: none;
}
 
#main {
  margin:0; padding:0;
  border-top: solid 8px;
  border-left: solid 8px;
  border-right: solid 8px;
  border-bottom: solid 2px;
		}
#main2 {
  margin:0; padding:0;
}
 
#left-col {
  float:left;
  width:150px;
  margin:0; padding:0;
  font-size:80%;
}
 
#right-col {
  float:right;
  width:150px;
  margin:0; padding:0;
  font-size:80%;
}
 
#middle {
  margin:0 150px;
  border-left: solid;
  border-right: solid;
  border-width: 2px;
}
 
#footer {
    border-bottom: solid 8px;
    border-left: solid 8px;
    border-right: solid 8px;
    border-top: none;
    text-align: center;
    font-size: 0.8em;
}
.spacer {
  margin:0; padding:0.5em 1em;
}

And my HTML:

 
<html>
 
<head>
 
HEADER STUFF
 
</head>
<body>
<div id="wrap">                    
      <div id="header">                   
          <img border="0" src="header.jpg" />
      </div>                      
      <div id="main">               
        <div id="main2">                        
          <div id="left-col">                   
            <div class="spacer">      
Left Bar content
            </div>                 
          </div>                        
          <div id="right-col">                   
            <div class="spacer">              
Right bar content
            </div>                 
          </div>                        
          <div id="middle">                   
            <div class="spacer">
Middle Content
                        </div>                 
          </div>                                             
        </div>             
      </div>
      <div id="footer">Footer</div>       
  </body>    
</html>

Note that there are other CSS properties for text and headers, but those aren't affected.

Anyway, any ideas? It would be helpful to have this work in IE.