Hello,
I'm having a problem where a style for a <a> tag
isn't working in IE:
border : 1px solid red;
If you use my code below, you'll see what I mean.
In IE6 on WinXP, I'm not seeing a red top and
bottom border. My HTML validates. It looks
exactly like I want it to in Firefox and Opera.
I recommend pasting my text into a file and then
viewing it to easily see what's going on.
Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1" />
<title> New Document </title>
<style type="text/css">
body
{
background-color : #bfbfbf;
text-align : center;
padding : 0px;
margin : 0px;
}
#mainDiv
{
width : 100%;
padding : 0px;
background-color : white;
background-image : url(images/bg1.gif);
}
#divContainer
{
width : 800px;
border-right : 1px solid black;
border-left : 1px solid black;
margin : 0 auto 0 auto;
}
#titleSection
{
width : 100%;
background-color : white;
/*background-image : url(images/logo1.jpg);*/
height : 120px;
margin : 0 auto 0 auto;
/*border-top : 1px solid gray;*/
border-bottom : 1px solid black;
text-align : left;
}
#titleSection img
{
margin-top : 10px;
}
/* //////////////////////////
//////// Global Links ////
////////////////////////// */
#globalLinks
{
width : 100%;
background-color : #224466;
margin-right : auto;
margin-left : auto;
text-align : left;
}
#globalLinks ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#globalLinks ul li
{
display: block;
float : left;
text-align: center;
padding: 0;
margin: 0;
}
#globalLinks ul li a
{
color : white;
text-decoration : none;
background-color : #2B5B87;
padding : 4px 8px 4px 8px;
margin : 0px;
border-right : 1px solid black;
font-family : Verdana;
font-weight : bold;
}
#globalLinks ul li a:hover
{
background-color : #3583CB;
}
/* //////////////////////////////
////// Control Bar ///////////
/////////////////////////////// */
#controlBar
{
width : 100%;
background-color : #AABBCC;
padding-bottom : 4px;
padding-top : 2px;
margin-bottom : 0px;
margin-right : auto;
margin-left : auto;
/*text-align : left;
padding-top : 10px;*/
}
#globalNav ul
{
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
#globalNav ul li
{
display: inline;
}
#globalNav ul li a
{
text-decoration: none;
padding: 2px 4px 2px 4px;
color: #fff;
background-color: #036;
border : 1px solid red;
}
#globalNav ul li a:hover
{
color: #fff;
background-color: #369;
border : 1px solid green;
}
/* /////////////////////
////// Content //////
///////////////////// */
#content
{
width : 100%;
background-color : white;
height : 500px;
margin-right : auto;
margin-left : auto;
}
</style>
</head>
<body>
<div id="mainDiv">
<div id="divContainer">
<!-- <div id="globalLinks">
<ul>
<li><a href="">Help</a></li>
<li><a href="">About</a></li>
<li><a href="">Logout</a></li>
</ul>
</div>
-->
<div id="titleSection">
<img src="images/logo5.jpg" alt="Tracking
Management Tool" />
</div>
<div id="controlBar">
<div id="globalNav" style="float:left; padding
: 2px 0px 2px 3px">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Help</a></li>
<li><a href="">About</a></li>
<li><a href="">Logout</a></li>
</ul>
</div>
<div style="float:right; text-align : left;">
<input type="text" size="10" />
<input type="button" value="Search for SIG/CR
#" />
<a href="">[Advanced]</a>
</div>
Welcome, User!
</div>
<div id="content"></div>
</div>
</div>
</body>
</html>
