My first CSS Layout works in safari and FF not IE

[stenson]

Ok so I was only checking the layout with FF as I was building it so that was my first mistake I guess, but anyhow, when using IE7 there appears to be a small maybe 2-3px white padding on some of the images on my page, because of this, the layout gets all skewed. Also when I was on a really bad computer at my work the site wraps some of the content to the next line (because of bad resolution?) and It makes it look dumb. I've tried everything I know how to do but I dont have very much experience with css so any help would be appreciated.

Here is the CSS:

html,body { margin:0px; padding:0px; height: 100%; text-align: center; }

body {
color: #000000;
font-size: 9pt;
font-family: Calibri;
background: #DFDFDF url('images/content_bg.gif') top repeat-y;
}

a:link,a:active,a:visited { text-decoration: none; color : #000000; }
a:hover { text-decoration: none; color : #339933; background: transparent; }

img { border: 0px; margin: 0px; padding: 0px; background: transparent; }

p { width: 560px; }

form { padding: 0px; margin: 0px; }

h1 { font-size: 10pt; color: #000000; }

h2 { font-size: 9pt; color: #339933; }

h3 { font-size: 11pt }

h4 { font-size: 9pt; color: #296436; text-decoration: underline; }

a:focus { -moz-outline-style: none; }

::-moz-selection{
background: transparent;
color:#0080FF;
}

::selection {
background: transparent;
color:#0080FF;
}

code::-moz-selection {
background: #339933;
}

code::selection {
background: #339933;
}

hr {
color: #339933;
height: 1px;
width: 100%; }

ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}

table.lessons {
text-align: center;
font-family: Calibri;
font-weight: normal;
font-size: 9pt;
color: #fff;
width: 550px;
background-color: #333;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;
}

table.lessons td {
background-color: #CCC;
color: #000;
padding: 4px;
text-align: left;
border: 1px #fff solid;
}

#container {
margin-right: auto;
margin-left: auto;
min-height: 100%;
width: 770px;
position: relative;
margin-bottom:-30px;
height: auto;
overflow: hidden;

}

* html .container {height:100%;}

#header {
width: 100%;
height: 26px;
background-image: url('images/header.gif');
background-repeat: no-repeat;
overflow: hidden;
margin: auto;
background-position: center;
padding: 0px;
}

#banner {
width: 100%;
height: 106px;
background-image: url('images/banner.gif');
background-repeat: no-repeat;
overflow: hidden;
margin: 0px 0px 0px 0px;
background-position: center;

}

#wrapper { float: right; width: 100%; margin-left: -160px; margin-bottom: 26px; }

#content {

margin: 18px 6px 0px 10px;
padding: 0px 0px 0px 0px;
}

#contentwrapper {

float: right;
min-width: 500px;
margin: 10px 23px 0px 00px;
padding: 0px 0px 0px 0px;
text-align: left;
}

#contentwrapper a {
text-decoration: underline;
color: #339933;
font-size: 9pt;
font-weight: bold;
}

#contentwrapper a:hover {
text-decoration: underline;
color: #339933;
font-size: 9pt;
font-weight: bold;
}

#footer {
float:auto;
position: relative;
bottom: 0px;
height: 45px;
clear: both;
width: auto;
text-align: center;
font-size: 8.5pt;
}

#clearfooter {
clear: both;
height: 100px;
}

#menu {
float: left;
margin: 20px 0px 0px 8px;
width: 155px;
background: #F0F0F0;
border: none;
padding: 0px 0px -2px 0px;
text-align: left;
}

#menucontainer ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}

#menucontainer a {
display: block;
width: 155px;
padding: 0px 0px 0px 0px;
margin: 0px;
padding-left: 0px;
font-size: 8.5pt;
}

#menucontainer a:hover {
display: block;
width: 155px;
background: #F8F8F8;
padding: 0px 0px 0px 0px;
margin: 0px;
}

#nav {
height: 26px;
background: transparent;
font-size: 7.5pt;
color: #000000;
text-align: center;
margin: 8px 12px 0px 0px;
}

#nav a {
display: block;
float: right;
width: 57px;
height: 26px;
color: #000000;
background: transparent;
text-decoration: none;
}

#nav a:hover {
display: block;
float: right;
width: 57px;
height: 26px;
color: #339933;
background: transparent;
text-decoration: none;
}

#tab {
height: 18px;
background: transparent;
font-size: 8pt;
color: #e2f6e3;
text-align: center;
margin: 89px 7px 0px 0px;
}

#tab a {
display: block;
float: right;
width: 125px;
height: 18px;
color: #e2f6e3;
background: transparent;
text-decoration: none;
}

#tab a:hover {
display: block;
float: right;
width: 125px;
height: 18px;
color: #96c098;
background: transparent;
text-decoration: none;
}

#bigbuttons {
height: 105px;
width: auto;
padding:0;
margin: 10px 0px 0px 0px;
font-family: arial, helvetica, sans-serif;
list-style-type:none;
}

#bigbuttons li {display:inline;}

#bigbuttons li a
{
text-decoration:none;
float:left;
margin: 0px 0px 0px 28px;
}

.newsletter {
background-image: url(images/button_newsletter_hover.gif);
background-repeat: no-repeat;
height: 105px;
width: 220px;
}

.newsletter a{
background-image: url(images/button_newsletter.gif);
background-repeat: no-repeat;
height: 105px;
width: 220px;
display: block;
}

.newsletter a:hover{
background-image: url(images/button_newsletter_hover.gif);
background-repeat: no-repeat;
}

.leagues {
background-image: url(images/button_leagues_hover.gif);
background-repeat: no-repeat;
height: 105px;
width: 220px;
}

.leagues a{
background-image: url(images/button_leagues.gif);
background-repeat: no-repeat;
height: 105px;
width: 220px;
display: block;
}

.leagues a:hover{
background-image: url(images/button_leagues_hover.gif);
background-repeat: no-repeat;
}

.clubevents {
background-image: url(images/button_clubevents_hover.gif);
background-repeat: no-repeat;
height: 105px;
width: 220px;
}

.clubevents a{
background-image: url(images/button_clubevents.gif);
background-repeat: no-repeat;
height: 105px;
width: 220px;
display: block;
}

.clubevents a:hover{
background-image: url(images/button_clubevents_hover.gif);
background-repeat: no-repeat;
}

strong {
padding-left: 5px;
color: #3D7C49;
font-size: 9pt;
}

.content{
padding: 10px 20px 10px 10px;

}

[cmarshall]

Try this:

* { margin:0px; padding:0px; }

Also, make sure you have a valid DOCTYPE, etc. Don't use an XML preamble (<?xml...?>).

[stenson]

ok i put in the * { margin:0px; padding:0px; } nothing happened, also the doctype is <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

[cmarshall]

I'm no IE7 expert, but images always give me agita if they are links. Make sure all <img /> elements have their "border" style set to "none".

[stenson]

yeah thats done. i think it may be something with the divs not lining up properly with the bg or something aswell? because all of the divs are about 1-2 px to the left aswell.. this is really frustrating me lol

[cmarshall]

Well, I do this kind of thing all the time.

I usually put a 1-pixel shim in the

<div>

, just as a belt-and-suspenders kind of thing...

[Marshall]

Personally, I add this to CSS as a catch-all:

img {
border: none;
border: 0px; /* Optional safety measure */
border-width: 0px;
margin: 0;
padding: 0;
}

And I have never encountered a border problem.

Marshall

[stenson]

thanks for the comments guys! but im still having problems.. I might have described the problem wrong or something but its like the layout wont stay in its div's in ie and so far i've made the container be split up by % instead of fixed px values and ive made a separate style sheet to execute when opened in ie with different positioning values however its only a patch job and you can still tell there are some errors with the code. you can try yourselves to goto greenbelttennis.com in ff and ie if that helps but i really want to get this fixed up asap.

[cmarshall]

Oh, heck. I think your problem is in the markup, not the CSS.

For example, I think you forgot to close your banner <div>, and now I see that they are actually <ul></li> elements. When you use those, you need to override some inherent behaviors.

Run a validator on that puppy. I always make sure my pages validate green. That way, the validator becomes my debugger.