ah bugger, ie css problem

[herghost]

Hi all,

 

I have  recently been learning php and use firefox as my browser, so I have been looking at everything in firefox, then I decided to check it was all ok in IE. Oh dear!

 

http://www.fanjunky.com

 

Here is my css

 

body {
margin: 0;
padding: 0;
background: #C3C3C3 url(images/img01.gif) repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #666666;
}

h1, h2 {
font-weight: normal;
}

p, ol, ul {
margin-top: 0;
line-height: 180%;
text-align: left;
}

a {
color: #666666;
}

a:hover {
text-decoration: none;
color: #000000;
}

a img {
border: none;
}

img.left {
float: left;
margin: 0 15px 0 0;
}

img.right {
float: right;
margin: 0 0 0 15px;
}

/* Header */

#header {
height: 110px;
margin: 0 auto;
text-transform: uppercase;
text-align: right;
}

#logo {
float: left;
padding: 24px 0 0 20px;
}

#logo h1, #logo p {
margin: 0;
font-weight: bold;
}

#logo h1 {
}

#logo p {
padding-left: 1px;
line-height: normal;
font-size: .85em;
}

#menu {
float: right;
padding-top: 24px;
}

#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}

#menu li {
display: inline;
}

#menu a {
display: block;
float: left;
padding: 31px 20px;
text-decoration: none;
font-size: .85em;
font-weight: bold;
}

#menu a:hover {
text-decoration: underline;
}

#menu .current_page_item a {
background: #C3C3C3 url(images/img02.gif) repeat-x;
}

/* Page */

#page {
width: 960px;
margin: 0 auto;
}

/* Content */

#content {
float: left;
width: 650px;
}

.post {
}

.meta {
margin: 0;
padding: 10px 0 15px 20px;
border-top: 1px solid #F3F3F3;
}

.meta a {
text-decoration: none;
}

.meta a:hover {
text-decoration: underline;
}

.meta .more {
padding-left: 12px;
background: url(images/img09.gif) no-repeat left center;
}

.meta .comments {
padding-left: 15px;
background: url(images/img10.gif) no-repeat left center;
}

/* Sidebar */

#sidebar {
float: right;
width: 300px;
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}

#sidebar li {
}

#sidebar li ul {
margin-bottom: 10px;
padding-bottom: 10px;
background: #FFFFFF url(images/img16.gif) no-repeat left bottom;
}

#sidebar li li {
padding: 5px 20px;
border-bottom: 1px solid #F3F3F3;
text-align: center;
}

#sidebar h2 {
height: 53px;
margin: 0;
padding: 15px 0 0 20px;
background: url(images/img15.gif) no-repeat;
text-transform: uppercase;
letter-spacing: -1px;
font-size: 1.6em;
font-weight: bold;
color: #FFFFFF;
}

/* Green Box */

.greenbox {
background: #FFFFFF url(images/img03.gif) repeat-x;
}

.greenbox .title {
height: 60px;
background: url(images/img04.gif) no-repeat;
}

.greenbox .title h1, .greenbox .title h2 {
height: 35px;
margin: 0;
padding: 15px 0 0 20px;
background: url(images/img05.gif) no-repeat right top;
text-transform: uppercase;
letter-spacing: -1px;
font-size: 1.6em;
font-weight: bold;
color: #FFFFFF;
}

.greenbox .entry {
padding: 10px 20px 0 20px;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

.gtm { background: url(images/img06.gif) repeat-x left bottom; }
.gtm .l { background: url(images/img07.gif) no-repeat left bottom; }
.gtm .r { background: url(images/img08.gif) no-repeat right bottom; }
/*bluebox*/
.bluebox {
background: #FFFFFF url(images/img03b.gif) repeat-x;
}

.bluebox .title {
height: 60px;
background: url(images/img04b.gif) no-repeat;
}

.bluebox .title h1, .greenbox .title h2 {
height: 35px;
margin: 0;
padding: 15px 0 0 20px;
background: url(images/img05b.gif) no-repeat right top;
text-transform: uppercase;
letter-spacing: -1px;
font-size: 1.6em;
font-weight: bold;
color: #FFFFFF;
}

.bluebox .entry {
padding: 10px 20px 0 20px;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

.btm { background: url(images/img06.gif) repeat-x left bottom; }
.btm .l { background: url(images/img07.gif) no-repeat left bottom; }
.btm .r { background: url(images/img08.gif) no-repeat right bottom; }

/* Two Columns */

.two-columns {
clear: both;
background: url(images/img11.gif) repeat-y;
border-top: 10px solid #C3C3C3;
}

.two-columns .title {
}

.two-columns .title h2 {
height: 53px;
margin: 0;
padding: 5px 0 0 5px;
text-transform: uppercase;
letter-spacing: -1px;
font-size: 1.6em;
font-weight: bold;
color: #FFFFFF;
}

.two-columns .blue {
background: url(images/img13.gif) no-repeat;
}

.two-columns .red {
background: url(images/img14.gif) no-repeat;
}

.two-columns .columnA, .two-columns .columnB {
width: 320px;
}

.two-columns .columnA {
float: left;
}

.two-columns .columnB {
float: right;
}

.two-columns .btm {
clear: both;
background: url(images/img12.gif) no-repeat left bottom;
}

/* Footer */

#footer {
clear: both;
padding: 10px 0;
background: #FFFFFF url(images/img02.gif) repeat-x;
text-align: center;
font-size: smaller;
}
#MB_overlay {
position: absolute;
margin: auto;
top: 0;	left: 0;
width: 100%; height: 100%;
z-index: 9999;
background-color: #000!important;
}
#MB_overlay[id] { position: fixed; }

#MB_window {
position: absolute;
top: 0;
border: 0 solid;
text-align: left;
z-index: 10000;
}
#MB_window[id] { position: fixed!important; }

#MB_frame {
position: relative;
background-color: #EFEFEF;
height: 100%;
}

#MB_header {
margin: 0;
padding: 0;
}

#MB_content {
padding: 6px .75em;
overflow: auto;
}

#MB_caption {
font: bold 100% "Lucida Grande", Arial, sans-serif;
text-shadow: #FFF 0 1px 0;
padding: .5em 2em .5em .75em;
margin: 0;
text-align: left;
}

#MB_close {
display: block;
position: absolute;
right: 5px; top: 4px;
padding: 2px 3px;
font-weight: bold;
text-decoration: none;
font-size: 13px;
}
#MB_close:hover {
background: transparent;
}

#MB_loading {
padding: 1.5em;
text-indent: -10000px;
background: transparent url(spinner.gif) 50% 0 no-repeat;
}

/* Color scheme */
#MB_frame {
padding-bottom: 7px;
-webkit-border-radius: 7px; 
-moz-border-radius: 7px;
border-radius: 7px;
}
#MB_window {
background-color: #EFEFEF;
color: #000;
-webkit-box-shadow: 0 8px 64px #000; 
-moz-box-shadow: 0 0 64px #000; 
box-shadow: 0 0 64px #000;

-webkit-border-radius: 7px; 
-moz-border-radius: 7px;
border-radius: 7px;
}
#MB_content { border-top: 1px solid #F9F9F9; }
#MB_header {
  background-color: #DDD;
  border-bottom: 1px solid #CCC;
}
#MB_caption { color: #000 }
#MB_close { color: #777 }
#MB_close:hover { color: #000 }


/* Alert message */
.MB_alert {
margin: 10px 0;
text-align: center;
}
#sexyBG { display: none; position: absolute; background: #000; opacity: 0.7; -moz-opacity: 0.7; -khtml-opacity: 0.7; filter: alpha(opacity=40); width: 100%; height: 100%; top: 0; left: 0; z-index: 99; }
#sexyBOX { display: none; position: absolute; background: #b9e77b; color: #333; font-size: 1.2em; text-align: center; border: 1px solid #111; top: 70px; z-index: 100; }
.sexyX { font-size: 12px; color: #ddd; padding: 4px 0; border-top: 1px solid #636D61; background: #778574; }

 

any tips on what I am missing for IE?

[xtopolis]

For starters, it doesn't validate.

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.fanjunky.com%2F&charset=(detect+automatically)&doctype=Inline&group=0

 

Most of those errors will go away once you define a proper doctype and adhere to its rules.

http://htmlhelp.com/tools/validator/doctype.html  (I recommend HTML 4.01 Strict)

 

There are some some simple ie fixes like adding text-align: center to the body {} and what not, but let's see it validate first before we starting tinkering with it.

 

[herghost]

Ok,

 

It should now validate

 

Where do I go form here, I am a complete noob when it comes to css!

[SuperBlue]

Did you forget to specify which version of IE? I just tried it in IE7 and everything looked the same as in Firefox.

 

I would however suggest that you stop using tables for layout.