SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2005
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Safari issue with :hover

    Hi! I'm running into an issue where Safari is putting text-decoration:underline in an unexpected place on hover. Wondering if anyone has run into this issue before, and if so, knows how to fix without altering the HTML. The page is using the HTML5 DOCTYPE.

    Chrome, Firefox, IE8, IE9 (the way I'd like it to behave on hover. "this is some text" gets "text-decoration:underline;"):


    Safari 5.1.7 (notice "left" and "right" are getting "text-decoration:underline;" applied on hover)



    HTML:
    Code HTML4Strict:
    <a href="#">
        <p><span>Left</span> This is some text <span>Right</span></p>
    </a>

    CSS:
    Code CSS:
                   a {
      			display:block;
      			height:300px;
      			width:300px;
      			background:#d4d4d4;
      			text-decoration:none;
      			color:black;
      		}
     
      		a p {
      			position:relative;
      		}
     
      		a span {
      			position:absolute;
      			top:200px;
      			color:#BF6E30;
      		}
     
      		a:hover p {
      			text-decoration:underline;
      		}
     
      		a:hover p span {
      			text-decoration:none;
      		}

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,520
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I would hazard a guess that Safari is correct because the text-decoration is on the p element and not on the span. Targeting the span should have no effect.

    I think you will need additional html to fix this and apply a wrap around the text that needs the underline.

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Would someone mind taking another look at the problem posed by the author?

    Just looking at the post, it seems to me that Safari has a problem.

    Add "text-decoration:underline" into the properties for "a span {}"

    In FF(whatever the latest is) and IE8, you will see the underlines "swap" as the mouse hovers over the area of the anchor; so the span in the last command is indeed being targeted.

    Isn't the "p" just an element in the path to the "span"?

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    What paul was trying to say was that EVEN if it did work, it wasnt the way the SPECIFICATIONS describe how it should function, this would make it a BUG and that specific brows thus not compliant to the standard. When coding your goal should be to comply with the standard.

    BTW, I tested it FF 3.5,3.6, 5, 10 on macs same issue; Opera however exhibits the behavior as would have been expected by the OP.


    Isn't the "p" just an element in the path to the "span"?
    the simple answer is NO.
    P is the containing element, but within the P is the ANONYMOUS inline element ( the words "this is some text") and although this element cannot be targeted directly and it still must be taken in to account in some situations ( such as the one described in the OP)

    In short the inconsistency we are seeing is that some VERSIONS of SOME BROWSERS let the anonymous element inherit all the proeprties in questions , other UAs dont. Alas, this is why wee need standards.

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Thank you for the reply and explanation. Guess I'm having a problem visualizing the relationships. Would it be possible for you to show what the code should look like with a standards-compliant browser? (Code that would act like the abnormal behavior presently exhibited by the majority of browsers.) Your explanation seems good; but I don't know how to translate it into standards-compliant code... so I could compare the good to the no-so-good. OP = Order of Precedence? If not, thanks for the time you've given me.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,520
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ronpat View Post
    Thank you for the reply and explanation. Guess I'm having a problem visualizing the relationships. Would it be possible for you to show what the code should look like with a standards-compliant browser? (Code that would act like the abnormal behavior presently exhibited by the majority of browsers.) Your explanation seems good; but I don't know how to translate it into standards-compliant code... so I could compare the good to the no-so-good. OP = Order of Precedence? If not, thanks for the time you've given me.
    This is in essence pretty simple to understand.

    text-decoration was only applied to the p element.

    Therefore all text in the p element should have an underline.

    text-decoration is not inherited therefore the span has no text-decoration rules applied and therefore cannot be turned off.

    Its the same reasoning that people try to turn the text-decoration off on linked images by addressing the image and wonder why it doesn't work (in most browsers); the reason is the same and it is the anchor that has the text-decoration not the image. The image just sits on top of the underline.

    To make it even simpler imagine this code.

    Code:
    p { background:red }
    p span { background:transparent }
    Code:
    <p>This is some text <span>(and this is text in a span)</span></p>
    Working on the same assumption as the text-decoration rule in the OP's original code would you expect the span to have no background now! Of course not. The span sits on the background and therefore has a red background but the spans background is already transparent just as the text-decoration for the span should already be none the (default).

    You can change the colour of the span to white of course but you cannot "turn off" the red colour and allow the body background to show through the span.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    p { background:red }
    span { background:transparent }
    </style>
    </head>
    
    <body>
    <p>This is some text <span>(and this is text in a span)</span></p>
    </body>
    </html>
    The issue has nothing to do with text-decoration as such and the reason for the difference is that the span was absolutely placed and some browsers just lose the text-decoration because absolute elements are removed from the flow and consider them as not part of the flow for the underline.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,520
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ronpat View Post
    Thank you for the reply and explanation. Guess I'm having a problem visualizing the relationships. Would it be possible for you to show what the code should look like with a standards-compliant browser?
    Yuo would need a structure like this (in html5):
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    a {
    	display:block;
    	height:300px;
    	width:300px;
    	background:#d4d4d4;
    	text-decoration:none;
    	color:black;
    }
    a p { position:relative; }
    a span {
    	position:absolute;
    	top:200px;
    	color:#BF6E30;
    }
    a:hover p b { text-decoration:underline; }
    </style>
    </head>
    
    <body>
    <a href="#">
    <p><span>Left</span> <b>This is some text</b> <span>Right</span></p>
    </a>
    </body>
    </html>
    Just the text in the b has the decoration applied and all browsers behave the same.

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2005
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the explanations!

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Paul,

    I can't thank you enough for being so generous with your time and knowledge, and for expressing yourself so very well.

    I was completely unaware of that side-effect of "position:absolute" caused by css standards non-compliance in so many browsers. Would have never thought to consider something like that. That was the key. With that, everything else fell into place.

    It is exhilarating to actually gain insight into how this stuff behaves. Wish I had wings! OK, maybe a better memory would be more practical. Nevertheless, exhilaration feels good!

    You gurus and wizards make a good team.

    Thank you again VERY MUCH!

    Ron


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
  •