SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2005
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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!

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2005
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In FF what I expect code to do, it does. But in IE it doesn't.

  4. #4
    SitePoint Zealot
    Join Date
    Mar 2005
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

  6. #6
    SitePoint Zealot
    Join Date
    Mar 2005
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh man sorry about that,

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

    Thanks for not blowing a gasket,
    B.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •