• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 487
  • Last Modified:

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?
/* 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>

Open in new window

background.jpg
header.jpg
Marygraphic.jpg
0
dyarosh
Asked:
dyarosh
3 Solutions
 
itzyCommented:
Hi

I believe bordercolor works only in IE and Safari.
Try
border:15px solid #ffd666;

Regards
0
 
oleberCommented:
it is a question of order.

        border-bottom-color:#ffd666;
        border-bottom:solid;
        border-bottom-width: 15px;

first you define the color, after you are redefining all the border-bottom and after the with.

try:
        border-bottom:solid;
        border-bottom-color:#ffd666;
        border-bottom-width: 15px;
0
 
David S.Commented:
The problem is that when you set border-bottom after you set border-bottom-color the color gets reset back to its initial value. Apparently IE7 fails to follow what the specs say to the letter on this point.

The specs: http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties

The solution is to just use the border-bottom property and specify all 3 values for it:
#header {
        height: 133px;
        background-image:url(images/background.jpg);
        background-repeat:repeat;
        width: auto;
        border-bottom: 15px solid #ffd666;
}

Open in new window

0
 
David S.Commented:
I don't know which browsers support the non-standard HTML bordercolor attribute, but the CSS border-color property is well supported.

oleber is right that because border-bottom is a shorthand property, the order matters.
0
 
dyaroshAuthor Commented:
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.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now