I know the problem is simple, but I cant see it

**Aries Mars** · Sep 16, 2007 08:14

Hey people, what's good?

IE 6 is using its default link color scheme for my links, even though I've set them to something different.

Here's the css:

Code:

.portfolio a{
	padding:0px;
	margin:0px;
}
#nav a{
	float:left;
	width:43px;
	height:41px;
}
#home a{padding:28px 0 0 17px;}
#contact a{padding:28px 0 0 10px;}
#news a{padding:28px 0 0 17px;}
#footer_menu a{
	background:transparent none repeat scroll 0%;
	color:#BBB;
	display:block;
	float:left;
	margin:10px 10px 0px 10px;
	padding:0px;
	text-decoration:none;
	width:auto;
}
a {
	color:#999;
	font-size:12px;
}
a:link {
	color:#999;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color:#999;
}
a:hover {
	text-decoration: none;
	color:#FFF;
}
a:active {
	text-decoration: none;
	color:#fff;
}
body{
	background:url(../images/dixon_bg_blue.gif) no-repeat;
	background-attachment:fixed;
}

.portfolio {
	background:transparent none repeat scroll 0%;
	border-bottom:1px dashed #000;
	float:left;
	width:300px;
	padding:0px 0 10px 0;
	margin:0;
}
.contact_me form {
	background:transparent none repeat scroll 0%;
	height:auto;
	margin:0px;
	padding:0px;
	width:300px;
}
.contact_me p input {
	background:transparent repeat-x scroll center top;
	border:1px solid #000;
	color:#999;
	display:block;
	font-size:11px;
	margin:2px 0px 8px;
	padding:3px;
	width:273px;
}
.contact_me p{
	padding:0px;
}
.contact_me p textarea {
	background:transparent center top;
	border:1px solid #000;
	color:#999;
	display:block;
	font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
	font-size:11px;
	height:80px;
	line-height:17px;
	margin:2px 0pt 5px;
	padding:3px;
	width:273px;
}
.content_paragraph{
	padding: 10px 0 10px 0;
	border-bottom:1px dashed #000;
}
.last_paragraph{
	padding:0px 0 10px 0;
}
#header{
	background:transparent url(../images/header_blue.gif) no-repeat scroll left top;
	height:69px;
	margin:50px auto 0px;
	width:500px;
}
#header ul{
	height:69px;
	list-style-type:none;
	margin:0px 0px 0px 320px;
	padding:0pt;
	width:180px;
}
#home{
	background-image:url(../images/left_link_blue.gif);
	float:left;
	width:60px;
	height:69px;
}
#contact{
	background-image:url(../images/center_link_blue.gif);
	width:60px;
	height:69px;
	float:left;

}
#news{
	background-image:url(../images/right_link_blue.gif);
	width:60px;
	height:69px;
	float:left;

}
img, #container{
	behavior:url(iepngfix.htc);
	background-repeat:repeat;
}
#container {
	background: url(../images/content_bg.png) scroll center top;
	background-repeat:repeat;
	margin:0px auto;
	padding:0px;
	width:500px;
	overflow:hidden;
}
#portfoliio_container{
	float:left;
	margin:0;
	padding:10px;
	width:300px;

}
#content{
	float:left;
	margin:0px;
	padding:10px;
	width:300px;
}
#content form{
	padding:0;
	margin:0;
}
#right{
	background:transparent;
	padding:10px; 
	width:160px;
	float:right;
}
#footer_menu{
	background:transparent none repeat scroll 0%;
	height:35px;
	margin:0px;
	padding:0px;
	text-align:left;
}
#footer_menu li{
	backsground:transparent none repeat scroll 0%;
	display:block;
	float:left;
	height:35px;
	list-style-type:none;
	margin:0px;
}
#footer_menu li a img{
	vertical-align:middle;
	margin:0px 4px;
	border:none;	
	font:"Times New Roman", Times, serif;
}
#footer{
	background:transparent url(../images/footer_blue.gif) no-repeat scroll center top;
	clear:both;
	height:35px;
	margin:0px auto;
	padding:0px;
	width:500px;
}

Now the HTML:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dixon's Projects</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/type.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="nav">
	<ul>
		<li id="home"><a href="index.html">Home</a></li>
		<li id="contact"><a href="contact.html">Contact</a></li>
		<li id="news"><a href="news.html">News</a></li>
	</ul>
</div>
</div>

<div id="container">
  <div id="portfoliio_container">
  	<div class="portfolio">
	<h4>Past Work</h4>
	<a href="../news.html"><img src="images/picture_link.jpg"/></a>
	<a href="../news.html"><img src="images/picture_link.jpg" /></a>
	<a href="../news.html"><img src="images/picture_link.jpg"/></a>
	<a href="../news.html"><img src="images/picture_link2.gif"/></a>
	<a href="../news.html"><img src="images/picture_link2.gif"/></a>
	<a href="../news.html"><img src="images/picture_link.jpg"/></a>
	<a href="../news.html"><img src="images/picture_link.jpg"/></a>
  	</div>
	<div class="portfolio">
	<h4>Past Work</h4>
	<a href="../news.html"><img src="images/picture_link.jpg"/></a>
	<a href="../news.html"><img src="images/picture_link.jpg" /></a>
	<a href="../news.html"><img src="images/picture_link.jpg"/></a>
	<a href="../news.html"><img src="images/picture_link2.gif"/></a>
	<a href="../news.html"><img src="images/picture_link2.gif"/></a>
	<a href="../news.html"><img src="images/picture_link.jpg"/></a>
	<a href="../news.html"><img src="images/picture_link.jpg"/></a>
  	</div>
	<div class="portfolio">
	<h4>Past Work</h4>
	<a href="../news.html"><img src="images/picture_link.jpg"/></a>
	<a href="../news.html"><img src="images/picture_link.jpg" /></a>
	<a href="../news.html"><img src="images/picture_link.jpg"/></a>
	<a href="../news.html"><img src="images/picture_link2.gif"/></a>
	<a href="../news.html"><img src="images/picture_link2.gif"/></a>
	<a href="../news.html"><img src="images/picture_link.jpg"/></a>
	<a href="../news.html"><img src="images/picture_link.jpg"/></a>
  	</div>
	<div class="portfolio">
	<h4>Past Work</h4>
	<a href="../news.html"><img src="images/picture_link.jpg"/></a>
	<a href="../news.html"><img src="images/picture_link.jpg" /></a>
	<a href="../news.html"><img src="images/picture_link.jpg"/></a>
	<a href="../news.html"><img src="images/picture_link2.gif"/></a>
	<a href="../news.html"><img src="images/picture_link2.gif"/></a>
	<a href="../news.html"><img src="images/picture_link.jpg"/></a>
	<a href="../news.html"><img src="images/picture_link.jpg"/></a>
  	</div>
  </div>
  <div id="right" >
  <h4>Header</h4>
	<p class="last_paragraph">		
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer eget elit vel purus condimentum dignissim. 
		Praesent viverra eleifend ipsum. Proin arcu tellus, volutpat ac, fringilla quis, malesuada nec.
	</p>
  </div>
</div>

<div id="footer">
	<ul id="footer_menu">
		<li><a href="#">Yahoo!</a></li>
		<li><a href="#">Yahoo!</a></li>
		<li><a href="#">Yahoo!</a></li>
	</ul>
</div>
</body>
</html>

May be you guys can see something I'm not,
Thanks,
A.

**Paul O'B** · Sep 16, 2007 09:50

Hi,

I'm seeing these links defined as per your code:

Code:

a {
	color:#999;
	font-size:12px;
}
a:link {
	color:#999;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color:#999;
}
a:hover {
	text-decoration: none;
	color:#FFF;
}
a:active {
	text-decoration: none;
	color:#fff;
}

They seem to be displaying as expected in IE6 with the code you posted!

**Aries Mars** · Sep 16, 2007 10:19

In FF what I expect code to do, it does. But in IE it doesn't.

**Aries Mars** · Sep 16, 2007 10:35

The image links in the .portfolio class displays and behaves the way I expect them to. But in IE6, the .portfolio links just display MS default colors, with no behaviors.

**Paul O'B** · Sep 16, 2007 11:36

Hi,

So you are talking about the image borders and not the text links that I've been looking at for the last hour!! It would have been impossible for me to spot that as obviously I can't see any of the images when running the above code

I expect that the default IE internal stylesheet has styled the image borders more specifically than other browsers so you will also need to be more specific to effect changes on the images.

e.g.

Code:

a img{border:1px solid red}
a:visited img{border:1px solid yellow}
a:hover img{border:1px solid orange}
a:active img{border:1px solid green}

Mozilla probably defines a border without a colour for a linked image and therefore the border takes the colour from the parents foreground colour. I'm guessing IE sets the img border with more specifically as mentioned above.

**Aries Mars** · Sep 16, 2007 12:26

Oh man sorry about that,

Well I tried the above and poof!!! It works!!!

Thanks for not blowing a gasket,

B.

User Tag List

Thread: I know the problem is simple, but I cant see it

Thread Tools

Display

I know the problem is simple, but I cant see it

Bookmarks

Bookmarks

Posting Permissions