dyarosh
asked on
Border color doesn't show correctly in Firefox but does in IE7
This is question 1 of 2 problems that I'm having with this layout. In FireFox, the border color is black but in IE7 it displays properly. Can someone tell me what I'm doing wrong?
header.jpg
Marygraphic.jpg
/* CSS Document */
@charset "utf-8";
* {
margin-top: 0;
}
body {
font: 14px "Trebuchet MS", Verdana, sans-serif;
text-align:center;
margin: 0;
padding: 0;
background-color: #ffffff;
}
#container {
/* width: 800px; */
text-align:left;
/* margin:0 auto; */
background-color: #FFFFFF;
}
#menucol {
width: 175px;
text-align: left;
margin: 0;
background-color: #0153fa;
float: left;
border-right-color:#ffd666;
border-right:solid;
border-right-width: 15px;
}
#header {
height: 133px;
background-image:url(images/background.jpg);
background-repeat:repeat;
width: auto;
border-bottom-color:#ffd666;
border-bottom:solid;
border-bottom-width: 15px;
}
#contentcol {
width: auto 0;
height: 635px;
text-align:left;
background-color: #FFFFFF;
padding-top: 15px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
background-image:url(images/contentbackground.png);
background-repeat: repeat-x;
margin-right: 150px;
margin-left: 175px;
}
.menuitem {
list-style:none;
margin 0px;
color: #ffffff;
font-weight: bold;
padding-right: 15px;
padding-top:15px;
font-size:15px;
}
ul {
font-family: Verdana, Arial, Helvetica, Sans-Serif;
font-size: 12px;
margin-left: 12px;
padding-left: 5px;
margin-right: 3px;
padding-right: 3px;
margin-top: 5px;
padding-top: 5px;
list-style: none;
margin-bottom: 5px;
padding-bottom: 5px;
color: #ffffff;
font-weight: bold;
}
li {
margin-bottom: 5px;
padding-bottom: 5px;
}
li.menuitem {
margin-bottom: 2px;
margin-left: 0px;
padding-left: 0px;
}
#mass_schedule {
width: 150px;
text-align: left;
margin: 0;
background-color: #0153fa;
float: right;
}
index.html
=========
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Assumption BVM - United in Faith, Centered in Love</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="menucol">
<img src="images/marygraphic.jpg" alt="Virgin Mary" />
<ul>
<li>Home</li>
<li>Assumption School</li>
<li>Bulletin</li>
<li>Calendar</li>
<li>Catholic Links</li>
<li>Christian Formation</li>
<li>Contact Us</li>
<li>Devotions</li>
<li>Liturgical Ministries</li>
<li>Organizations</li>
<li>Parish Services / Volunteer Opportunities</li>
<li>Upcoming Events</li>
<li>Youth Programs</li>
</ul>
</div>
<div id="header">
<img src="images/header.jpg" alt="Assumption BVM Church">
</div>
<div id="mass_schedule">
<p>Mass schedule</p>
</div>
<div id="contentcol"><p>this is where content goes</p></div>
</div>
</body>
</html>
header.jpg
Marygraphic.jpg
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I gave everyone points on this because all the answers were correct to some degree. Itzy was correct that if I used border:15px solid #ffd666;
it would work however not correct in that bordercolor doesn't work.
oleber's answer was the most complete in that it explained why order was important. I ended up implementing his solution.
Finally Kravimir was awarded points for pointing out that IE7 does not follow the specs and gave me a link for them.
Thank you to everyone for your help. I am almost finished and will be posting another problem that I need help with. This one will be more complicated I think.
it would work however not correct in that bordercolor doesn't work.
oleber's answer was the most complete in that it explained why order was important. I ended up implementing his solution.
Finally Kravimir was awarded points for pointing out that IE7 does not follow the specs and gave me a link for them.
Thank you to everyone for your help. I am almost finished and will be posting another problem that I need help with. This one will be more complicated I think.
oleber is right that because border-bottom is a shorthand property, the order matters.