#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2009
    Posts
    14
    Rep Power
    0

    Unhappy Internet Explorer not showing Image Hyperlink borders Correctly


    Hi all,

    Just working on my digital portfolio and I cannot for the life of me get my head around this issue.

    In my "3D" section I have set up a gallery which basically hides the large version of the image, then when the mouse is clicked on the thumbnail, the main image is moved to the center (as if by magic).

    I have got it working fine in all browsers apart from one annoying problem.

    I wish for the thumbnails to have a normal state border colour of #000000 and a hover border colour of #c8fa00. This seems to work fine in firefox, but when I open the site in IE, it uses the horrible looking default hyperlink colours, blue(link) purple (active) etc. I know I am missing something silly but I have racked my brain for about 10 hours on this

    The location of the problem page is:

    http://www.daletitterton.co.uk/3d.html


    The CSS code I use to style the links is as follows

    Code:
    .thumbs3d {
    text-align:center;
    }
    .thumbs3d a{
    
    color:#000000;
    }
    
    .thumbs3d:visited{
    
    color:#000000;
    }
    
    .thumbs3d:hover{
    
    color:#c8fa00;
    
    }
    The CSS code I have used to align the thumbs and display the large images is as follows

    Code:
    #threethumb {
    	text-align:center;
    }
    
    #threethumb span {
    position:absolute;
    visibility:hidden;
    left:-2000px;
    color:#FFFFFF;
    z-index:50;
    text-decoration: none;
    }
    
    #threethumb:active span{
    position:absolute;
    visibility: visible;
    text-decoration:none;
    top:0px;
    left: -5px;
    }

    Here is the entire style sheet for your viewing pleasure incase there is something in there which is causing the problem

    Code:
    @charset "utf-8";
    
    html { height: 100%; }
    
    
    a:link, a:visited {outline:none;}
    a:active { outline: none; }
    
    
    body
    {
    	background-color:#222222;
    	color:#CCCCCC;
    	font-family: Arial, Helvetica, sans-serif;
    	min-height:100%;
    }
    
    
    #PageContainer {
    	text-align:center; 
    	margin:auto;
    	background-color:#222222;
    
    }
    #topcontainer {
    	text-align:center;
    	width:710px;
    	height:149px; 
    	margin:auto;
    	border:solid;
    	border-width:1px;
    	border-color:#333333;
    	background-color:#222222;
    }
    
    #logoHome {
    position:relative;
    float:left;
    }
    
    #mainContent {
    	position:relative;
    	text-align:center;
    	top:0px;
    	width:710px;
    	height:262px; 
    	border-left:solid;
    	border-right:solid;
    	border-bottom:solid;
    	border-width:1px;
    	border-left-color:#333333;
    	border-right-color:#333333;
    	border-bottom-color:#333333;
    	background-color:#222222;
    	margin:auto;
    }
    
    
    #mainContentForm {
    
    position:relative;
    	text-align:center;
    	top:0px;
    	width:710px;
    	height:350px; 
    	border-left:solid;
    	border-right:solid;
    	border-bottom:solid;
    	border-width:1px;
    	border-left-color:#333333;
    	border-right-color:#333333;
    	border-bottom-color:#333333;
    	background-color:#222222;
    	margin:auto;
    
    
    }
    
    #mainContentVideo {
    
    position:relative;
    
    	text-align:left;
    	top:0px;
    	width:710px;
    	height:2500px; 
    	border-left:solid;
    	border-right:solid;
    	border-bottom:solid;
    	border-width:1px;
    	border-left-color:#333333;
    	border-right-color:#333333;
    	border-bottom-color:#333333;
    	background-color:#222222;
    	margin:auto;
    
    
    }
    
    #YoutubeTitle {
    	position:relative;
    	top:10px;
    	/*border-style:solid;
    border-width:5px;
    border-color:#FFFFFF;*/
    text-align:left;
    	left:5px;
    	width:700px;
    	height:100px;
    	margin:auto;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    }
    
    #YoutubeVideos {
    
    position:relative;
    /*border-style:solid;
    border-width:5px;
    border-color:#FFFFFF;*/
    top:90px;
    text-align:left;
    left:30px;
    float:left;
    width:255px;
    height:2250px;
    margin:auto;
    
    
    }
    
    
    #YoutubeDescription {
    
    position:relative;
    /*border-style:solid;
    border-width:5px;
    border-color:#FFFFFF;*/
    text-align:left;
    top:20px;
    left:11px;
    float:left;
    width:385px;
    height:2230px;
    margin:auto;
    
    
    }
    
    #YoutubeDescriptionHeader {
    
    color:#c8fa00;
    font-weight:bold;
    
    
    }
    #mainContentWeb {
    
    position:relative;
    
    	text-align:left;
    	top:0px;
    	width:710px;
    	height:500px; 
    	border-left:solid;
    	border-right:solid;
    	border-bottom:solid;
    	border-width:1px;
    	border-left-color:#333333;
    	border-right-color:#333333;
    	border-bottom-color:#333333;
    	background-color:#222222;
    	margin:auto;
    
    
    }
    
    
    #WebDescription {
    
    position:relative;
    /*border-style:solid;
    border-width:5px;
    border-color:#FFFFFF;*/
    text-align:right;
    top:20px;
    left:0px;
    float:left;
    width:320px;
    height:1500px;
    margin:auto;
    
    
    }
    #WebTitle {
    	position:relative;
    	top:10px;
    	/*border-style:solid;
    border-width:5px;
    border-color:#FFFFFF;*/
    text-align:left;
    	left:5px;
    	width:700px;
    	height:100px;
    	margin:auto;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    }
    
    #mainContent3d {
    
    position:relative;
    	text-align:left;
    	width:710px;
    	height:468px; 
    	border-left:solid;
    	border-right:solid;
    	border-bottom:solid;
    	border-width:1px;
    	border-left-color:#333333;
    	border-right-color:#333333;
    	border-bottom-color:#333333;
    	background-color:#222222;
    	margin:auto;
    
    
    }
    
    .thumbs3d {
    text-align:center;
    }
    .thumbs3d a{
    
    color:#000000;
    }
    
    .thumbs3d:visited{
    
    color:#000000;
    }
    
    .thumbs3d:hover{
    
    color:#c8fa00;
    
    }
    #threeDescription {
    
    position:relative;
    text-align:center;
    /*border-style:solid;
    border-width:5px;
    border-color:#FFFFFF;*/
    top:20px;
    left:0px;
    width:705px;
    height:300px;
    margin:auto;
    }
    
    #threethumb {
    	text-align:center;
    }
    
    #threethumb span {
    position:absolute;
    visibility:hidden;
    left:-2000px;
    color:#FFFFFF;
    z-index:50;
    text-decoration: none;
    }
    
    #threethumb:active span{
    position:absolute;
    visibility: visible;
    text-decoration:none;
    top:0px;
    left: -5px;
    }
    
    
    #threeTitle {
    position:relative;
    	/*border-style:solid;
    border-width:5px;
    border-color:#FFFFFF;*/
    text-align:left;
    top:10px;
    left:0px;
    	width:700px;
    	height:100px;
    	margin:auto;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    
    }
    
    #mainContentPhoto {
    
    position:relative;
    
    	text-align:left;
    	top:0px;
    	width:710px;
    	height:420px; 
    	border-left:solid;
    	border-right:solid;
    	border-bottom:solid;
    	border-width:1px;
    	border-left-color:#333333;
    	border-right-color:#333333;
    	border-bottom-color:#333333;
    	background-color:#222222;
    	margin:auto;
    
    
    }
    
    
    #PhotoDescription {
    
    position:relative;
    /*border-style:solid;
    border-width:5px;
    border-color:#FFFFFF;*/
    text-align:left;
    top:20px;
    left:0px;
    float:left;
    width:710px;
    height:1500px;
    margin:auto;
    
    
    }
    
    #PhotoTitle {
    	position:relative;
    	top:10px;
    	/*border-style:solid;
    border-width:5px;
    border-color:#FFFFFF;*/
    text-align:left;
    	left:5px;
    	width:700px;
    	height:100px;
    	margin:auto;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    
    
    }
    
    #gallerycontainer{
    position: relative;
    left:20px;
    height:600px;
    }
    
    
    #thumbnail:hover{
    background-color: transparent;
    }
    
    
    #thumbnail span{
    position: absolute;
    left: -1000px;
    visibility: hidden;
    color: black;
    text-decoration: none;
    }
    
    #thumbnail span img{
    border-width: 0;
    }
    
    #thumbnail:hover span{
    visibility: visible;
    top: 20px;
    left: 320px;
    z-index: 50;
    }
    
    
    #footerContentContainer {
    position:relative;
    text-align:left;
    top:0px;
    border-left:solid;
    border-right:solid;
    border-bottom:solid;
    border-width:1px;
    border-left-color:#333333;
    border-right-color:#333333;
    border-bottom-color:#333333;
    width: 710px;
    height:40px;
    margin:auto;
    
    
    }
    #footerContent {
    font-size:10px;
    position:absolute;
    bottom:0px;
    text-align:right;
    margin:auto;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    
    #logo {
    position:relative;
    float:left;
    width:220px;
    
    }
    
    #navHome {
    position:relative;
    float:left;
    right:100px;
    top:114px;
    width:80px;
    
    }
    
    #navWeb {
    position:relative;
    float:right;
    top:114px;
    right:90px;
    width:62px;
    }
    
    #nav3d {
    position:relative;
    float:right;
    top:113px;
    right:63px;
    width:42px;
    }
    
    #navVideo {
    position:relative;
    float:right;
    top:114px;
    right:0px;
    width:100px;
    }
    
    #navPhotography {
    position:relative;
    float:right;
    top:119px;
    right:17px;
    width:160px;
    }
    
    #navContact {
    position:absolute;
    right:10px;
    bottom:1px;
    width:100px;
    }
    
    #flashMain{
    position:relative;
    top:0px;
    
    }
    and finally here is the 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=utf-8" />
    
    <title>daletitterton.co.uk - 3D portfolio</title>
    
    <link href="dalestyle.css" rel="stylesheet" type="text/css" />
    
    <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
    
    </head>
    
    
    
    
    
    
    
    
    
    <body>
    
    
    <div id="PageContainer">
    
    
    
    <div id="topcontainer">
    
    
    
    <div id="logoHome">
    
    
    
      <a href="index.html"><img src="daletitterton.gif" alt="Daletitteton.co.uk - Home" border="0"/></a>
    
      
    
    </div>
    
     
    
      <!--Video Button-->
    
     
    
    <div id="navVideo">
    
    <object type="application/x-shockwave-flash" data="flash/video_btn.swf" 
    
    width="100" height="30">
    
    <param name="movie" value="flash/video_btn.swf" />
    
    <param name="bgcolor" value="#222222" />
    </object>
    	</div>
    
    
    
     <!-- Photography Button -->
    
     
    
    <div id="navPhotography">
    
    <object type="application/x-shockwave-flash" data="flash/photography_btn.swf" 
    
    width="160" height="30">
    
    <param name="movie" value="flash/photography_btn.swf" />
    
    <param name="bgcolor" value="#222222" />
    </object>
    </div>
    
     
    
    <!--3D Button-->
    
    
    
    <div id="nav3d">
    
    
    
    <object type="application/x-shockwave-flash" data="flash/3d_btn.swf" 
    
    width="42" height="30">
    
    <param name="movie" value="flash/3d_btn.swf" />
    
    <param name="bgcolor" value="#222222" />
    </object>
    </div>
    
    
    
    <!--Web Button-->
    
    
    
    <div id="navWeb">
    
    
    
    <object type="application/x-shockwave-flash" data="flash/web_btn.swf" 
    
    width="62" height="30">
    
    <param name="movie" value="flash/web_btn.swf" />
    
    <param name="bgcolor" value="#222222" />
    </object>
    </div>
    
    
    
    </div>
    
    <!-- TOP CONTAINER DIV END  -->
    
    
    
    <div id="mainContent3d">
    <div id="threeTitle">
      Digital 3D models and characters.  I spend a lot of my spare time creating and working on
        3D projects. Mixture of University work, client work and personal work.<br />
        
    
        
        <div id="threeDescription">
        <a href="#" div id="threethumb"class="thumbs3d"><img src="images/3d/thumbs/3dlarge01.jpg" alt="3d thumbnail 1"/><span><img src="images/3d/3dlarge01.jpg" alt="3d Large Image1"/></span></a><a href="#" div id="threethumb"class="thumbs3d"><img src="images/3d/thumbs/3dlarge02.jpg" alt="3d thumbnail 2"/><span><img src="images/3d/3dlarge02.jpg" alt="3d Large Image1"/></span></a><a href="#" div id="threethumb"class="thumbs3d"><img src="images/3d/thumbs/3dlarge03.jpg" alt="3d thumbnail 3" /><span><img src="images/3d/3dlarge03.jpg" alt="3d Large Image1"/></span></a><a href="#" div id="threethumb"class="thumbs3d"><img src="images/3d/thumbs/3dlarge04.jpg" alt="3d thumbnail 4" /><span><img src="images/3d/3dlarge04.jpg" alt="3d Large Image1"/></span></a><a href="#" div id="threethumb"class="thumbs3d"><img src="images/3d/thumbs/3dlarge05.jpg" alt="3d thumbnail 5" /><span><img src="images/3d/3dlarge05.jpg" alt="3d Large Image1"/></span></a><a href="#" div id="threethumb"class="thumbs3d"><img src="images/3d/thumbs/3dlarge06.jpg" alt="3d thumbnail 6" /><span><img src="images/3d/3dlarge06.jpg" alt="3d Large Image1"/></span></a><a href="#" div id="threethumb"class="thumbs3d"><img src="images/3d/thumbs/3dlarge07.jpg" alt="3d thumbnail 7" /><span><img src="images/3d/3dlarge07.jpg" alt="3d Large Image1"/></span></a><a href="#" div id="threethumb"class="thumbs3d"><img src="images/3d/thumbs/3dlarge08.jpg" alt="3d thumbnail 8" /><span><img src="images/3d/3dlarge08.jpg" alt="3d Large Image1"/></span></a><a href="#" div id="threethumb"class="thumbs3d"><img src="images/3d/thumbs/3dlarge09.jpg" alt="3d thumbnail 9" /><span><img src="images/3d/3dlarge09.jpg" alt="3d Large Image1"/></span></a><a href="#" div id="threethumb"class="thumbs3d"><img src="images/3d/thumbs/3dlarge10.jpg" alt="3d thumbnail 10" /><span><img src="images/3d/3dlarge10.jpg" alt="3d Large Image1"/></span></a><a href="#" div id="threethumb"class="thumbs3d"><img src="images/3d/thumbs/3dlarge11.jpg" alt="3d thumbnail 11" /><span><img src="images/3d/3dlarge11.jpg" alt="3d Large Image1"/></span></a><a href="#" div id="threethumb"class="thumbs3d"><img src="images/3d/thumbs/3dlarge12.jpg" alt="3d thumbnail 12" /><span><img src="images/3d/3dlarge12.jpg" alt="3d Large Image1"/></span></a><a href="#" div id="threethumb"class="thumbs3d"><img src="images/3d/thumbs/3dlarge13.jpg" alt="3d thumbnail 13" /><span><img src="images/3d/3dlarge13.jpg" alt="3d Large Image1"/></span></a><a href="#" div id="threethumb"class="thumbs3d"><img src="images/3d/thumbs/3dlarge14.jpg" alt="3d thumbnail 14" /><span><img src="images/3d/3dlarge14.jpg" alt="3d Large Image1"/></span></a><a href="#" div id="threethumb"class="thumbs3d"><img src="images/3d/thumbs/3dlarge15.jpg" alt="3d thumbnail 15" /><span><img src="images/3d/3dlarge15.jpg" alt="3d Large Image1"/></span></a><a href="#" div id="threethumb"class="thumbs3d"><img src="images/3d/thumbs/3dlarge16.jpg" alt="3d thumbnail 16"/><span><img src="images/3d/3dlarge16.jpg" alt="3d Large Image1"/></span></a></div>
        
    </div>
    
      <!-- MAIN CONTENT DIV END -->
    
    
    
    </div>
    
      <div id="footerContentContainer">
    
    
    
      <div id ="footerContent">
    
    
    
        <a href="http://jigsaw.w3.org/css-validator/check/referer">
    
        <img style="width:88px;height:31px;border:none"
    
                src="http://jigsaw.w3.org/css-validator/images/vcss"
    
                alt="Valid CSS!" />    </a> ęCopyright Dale Titterton 2009</div>
        
        <div id="navContact">
    
    <object type="application/x-shockwave-flash" data="flash/contact_btn.swf" width="100" height="30">
    
    <param name="movie" value="flash/contact_btn.swf" />
    
    <param name="bgcolor" value="#222222" />
    </object>
    </div>
      </div>
    
    
    
    
    
    <!-- whole page container div END -->
    
    </div>
    
    </body>
    
    
    
    </html>
    Gonna stick around here, already picked up some nice tips just from browsing


    EDIT- Forgot to add, it validates fine
  2. #2
  3. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Which IE version does this happen in? Are you sure you are specifying your selectors enough? Did you try adding this to the top of your CSS file?

    css Code:
    a img{border:none}
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2009
    Posts
    14
    Rep Power
    0
    Originally Posted by Skipt
    Which IE version does this happen in? Are you sure you are specifying your selectors enough? Did you try adding this to the top of your CSS file?

    css Code:
    a img{border:none}
    Wow...thanks for the quick response!

    I am testing it in IE7.

    If I add a img{border:none} it just removes the border completely, which is not my aim

    If you view the page in FF, it displays correctly. I have checked my selectors and they seem correct..
  6. #4
  7. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Try putting display:block on the <a>. IE does'nt show top and bottom border on links when not displayed as block level element. Don't ask me why, I don't know.
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2009
    Posts
    14
    Rep Power
    0
    Originally Posted by Skipt
    Try putting display:block on the <a>. IE does'nt show top and bottom border on links when not displayed as block level element. Don't ask me why, I don't know.
    Still no luck, when applying the block CSS it still doesn't show any borders. It also makes the images go very incorrectly aligned..

    Note though, earlier today I managed to get the left and right border the right colour, but there was still a blue box around the whole image at the same time. The left and right colour on the border was almost as if it was a second border, which sat on top of the default border given by IE.

    Sorry if that doesn't make sense it is hard to explain. I cannot remember how I got this though as it was one of my thousand attempts at sorting it.

    I feel now though that if I knew that code display:block and used border=none, I could have cracked it.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2004
    Posts
    855
    Rep Power
    1395
    Since you have a lot of junk in your CSS, which is most likely to be responsible for your troubles, and you have Transitional set as your DTD one quick way to resolve your problem would be to add border="0" to all your thumbnail images.
    Code:
    <img border="0" alt="3d thumbnail 1" src="images/3d/thumbs/3dlarge01.jpg" />
    EDIT:
    Originally Posted by DaleT
    EDIT- Forgot to add, it validates fine
    Just what validates fine?

    W3C XHTML
    Last edited by holodoc; June 3rd, 2009 at 02:24 PM.
    PHP Code:
    <?php
    abstract class Ignorance extends Stupidity implements Unavoidable 
         public static 
    $humiliation

         private function 
    __construct(){
            
    parent::__destruct();
         }; 

    ?>
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2009
    Posts
    14
    Rep Power
    0
    Thank you for the response, holodoc. This does not solve the problem though, this just removes the border completely, any more ideas?

    Thanks

    Also, can you please refer to which parts of the CSS are junk as I thought it was all in use, no point in having none-relevant stuff in there!

    EDIT- I only validated the CSS , the XHTML validator is picking up on my reuse of a DIV, could this be what is causing the problem? Shall I convert my gallery to use classes rather than DIVS?
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2004
    Posts
    855
    Rep Power
    1395
    Originally Posted by DaleT
    EDIT- I only validated the CSS , the XHTML validator is picking up on my reuse of a DIV, could this be what is causing the problem? Shall I convert my gallery to use classes rather than DIVS?
    Classes and divs are two distinct things that don't have much in common. I believe that I misunderstood you with your request but since you have a lot of XHTML errors and have rather complicated CSS selectors which inherit some strange things I would suggest to you to first try and eliminate your XHTML troubles. Its pointless to argue if something might be causing the problems you have if we argue about an invalid page.
    PHP Code:
    <?php
    abstract class Ignorance extends Stupidity implements Unavoidable 
         public static 
    $humiliation

         private function 
    __construct(){
            
    parent::__destruct();
         }; 

    ?>
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2009
    Posts
    14
    Rep Power
    0
    Originally Posted by holodoc
    Classes and divs are two distinct things that don't have much in common. I believe that I misunderstood you with your request but since you have a lot of XHTML errors and have rather complicated CSS selectors which inherit some strange things I would suggest to you to first try and eliminate your XHTML troubles. Its pointless to argue if something might be causing the problems you have if we argue about an invalid page.
    Ok, thank you, I will have a go at fixing these errors now and update the topic when this is complete so you guys can have another look

    EDIT - I mean to say div ID and div CLASS not DIVS and CLASSES lol sorry
  18. #10
  19. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Add these in your stylesheets, right below #threeDescription{}
    css Code:
     
    #threeDescription a img{
    	border:1px solid #000000;
    }
    #threeDescription a img:hover{
    	border:1px solid #c8fa00;
    }
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  20. #11
  21. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2009
    Posts
    14
    Rep Power
    0
    Awesome....just awesome Works brilliant.


    I did think of that earlier, the div was within a div and the container would take prescedence over any styling. If the container didn't have its color attributes set, then IE would just use the default.

    Is that correct?


    You have inspired me to sort out my XHTML validation now.

    Thanks for all your help
  22. #12
  23. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Unless you use some sort of reset, then yes, it would default to the browsers default rendering of links. So really, I was right in my first post that your specifity wasn't good enough, in a small way...

    In any way, even I am now puzzled by what you meant by it validated fine.
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  24. #13
  25. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2009
    Posts
    14
    Rep Power
    0
    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.daletitterton.co.uk%2F3d.html&charset=(detect+automatically)&doctype=Inli ne&group=0&user-agent=W3C_Validator%2F1.654

    Validates fine now In CSS and in XHTML

    Thanks guys
  26. #14
  27. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Just to let you know, that code won't work in IE6 (the code I provided). IE6 doesn't recognize :hover on any element besides <a>, so you would need a workaround for IE6.
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  28. #15
  29. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2009
    Posts
    14
    Rep Power
    0
    Thank you sir, I shall look into applying this when I have finished updating my portfolio.

IMN logo majestic logo threadwatch logo seochat tools logo