...

View Full Version : IE compatability problem?



JonisJon
02-26-2009, 10:31 AM
I changed something in my code and all of a sudden the left half of my rounded corners on my main content box are not showing up. They show up fine in Firefox and other browsers, but never in IE.

Can someone else take a look at this and maybe offer some advice? It would be much appreciated! I am relatively new to CSS so it would not surprise me if it was something simple. Thank you!

URL: www.fellowcitizensmusic.com/Music.html

my CSS:
@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #FFF;
text-align: center;
color: #000000;
margin: 0;
padding: 0;
font-family: Verdana, Geneva, sans-serif;
}

.oneColElsCtrHdr #container {
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
background-color: #FFF;
margin: auto;
}
.oneColElsCtrHdr #header h1 {

}
.oneColElsCtrHdr #mainContent {
background-color: #CCC;
padding: 0 40px;
}

#mainContent {
font-family: "Rockwell Extra Bold";
font-size: 100%;
font-style: normal;
color: #FFF;
text-align: center;
float: none;
clear: none;
position: absolute;
top: 210px;
left: 0px;
}

.oneColElsCtrHdr #footer {
padding: 0 10px;
background:#DDDDDD;
}
.oneColElsCtrHdr #footer p {
margin: 0;
padding: 10px 0;
}#header {
background-color: #FFF;
position: absolute;
top: 0px;
background-repeat: repeat-x;
left: 0px;
width: 100%;
height: 60px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
background-image: url(../images/Header_Bg2.jpg);
overflow: hidden;
}
#header ul {
list-style-type: none;
font-size: 20px;
color: #FFF;
font-weight: bold;
position: absolute;
top: 0;
clear: right;
padding-left: 2.5em;
left: 40px;
float: left;
}
#header li {
display: inline;
margin-right: 1em;
overflow: hidden;
}
#header a {
font-size: 100%;
color: #FFF;
text-decoration: none;
padding-top: 2px;
padding-right: 15px;
padding-bottom: 2px;
padding-left: 15px;
}


#masthead {
background-position: center;
position: absolute;
width: 100%;
left: 0px;
top: 60px;
}
.box {
background-color: #000;
clear: left;
}
.boxtop {
background-image: url(../images/ne.gif);
background-repeat: no-repeat;
background-position: right top;
}
.boxtop div {
background-image: url(../images/nw.gif);
background-repeat: no-repeat;
background-position: left top;
height: 50px;
font-size: 0px;
}
.boxbottom {
background-image: url(../images/se.gif);
background-repeat: no-repeat;
background-position: right bottom;
}
.boxbottom div {
font-size: 0px;
height: 50px;
background-image: url(../images/sw.gif);
background-repeat: no-repeat;
background-position: left bottom;
}
.boxcontent {
padding: 0px 50px 0px 50px;
}

abduraooft
02-26-2009, 10:50 AM
Fix all errors in your markup first, see http://validator.w3.org/check?uri=http%3A%2F%2Fwww.fellowcitizensmusic.com%2FMusic.html&charset=%28detect+automatically%29&doctype=Inline&group=0

btw, I don't see any difference in the display of FF and IE(6)

JonisJon
02-26-2009, 10:53 AM
Thank you I will try that first!

IE7 is where i am displaying the problem, it is completely possible it is only my computer I suppose.

abduraooft
02-26-2009, 11:00 AM
Have a try by

.boxtop {/*holder.css (line 107)*/
background-image:url(../images/ne.gif);
background-position:right top;
background-repeat:no-repeat;
text-align:left;
}
.boxtop div {/*holder.css (line 112)*/
background-image:url(../images/nw.gif);
background-position:left top;
background-repeat:no-repeat;
font-size:0;
height:50px;
width:50px;
float:left;
} and the same for your bottom divs' styles

AmmO
02-26-2009, 11:01 AM
Looks fine in IE7 to me as well

JonisJon
02-26-2009, 11:10 AM
Have a try by

.boxtop {/*holder.css (line 107)*/
background-image:url(../images/ne.gif);
background-position:right top;
background-repeat:no-repeat;
text-align:left;
}
.boxtop div {/*holder.css (line 112)*/
background-image:url(../images/nw.gif);
background-position:left top;
background-repeat:no-repeat;
font-size:0;
height:50px;
width:50px;
float:left;
} and the same for your bottom divs' styles

I tried out what you said here and it made everything work, except then the top right corner was out for some reason. I then kept the other settings you gave me but turned off the float settings in each of the divs, now it is showing up perfectly!

Thanks again for the quick and pointed response, it is much appreciated!:)

abduraooft
02-26-2009, 11:15 AM
Thanks again for the quick and pointed response, it is much appreciated! However I seriously recommend you to follow my first comment :)

JonisJon
02-26-2009, 08:00 PM
I went through the validation and looked at what it brought up, I tried fixing one of the things it said and it actually caused a problem so I backtracked it. As well as most of the problems it brings up are actually having to do with the flash on that page and it is working fine?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum