SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question Hover Effect on H2 Bottom Link is Weird

    Hello everyone,

    I have an issue with the hover effect I put on the bottom link. I gave the after state a height of 4 more pixels, and it's causing the bottom elements to bounce around a little bit. I didn't update the files, but I'm referring the bottom link with the background on this page. Can this be done with the two different heights on the before and after states of the background of the h2 element, or is it just a bad idea?

    These are the current styles:
    Code:
    h2 a:before{
    	background:url("lplinkstart.gif") no-repeat 0 0;
    	content:" ";
    	height:44px;
    	left:-14px;
    	position:absolute;
    	top:0;
    	width:26px;
    	z-index:99;
    }
    h2 a{float:left; font-size:30px; font-style:italic; font-weight:bold; text-align:center; width:auto; height:44px; background:url("lplinkbody.gif") repeat-x scroll 0 0 transparent;}
    h2 a:after{
    	background:url("lplinkend.gif") no-repeat 100% 0;
    	height:44px;
    	right:-14px;
    	position:absolute;
    	top:0;
    	width:26px;
    	content:" ";
    	z-index:99;
    }
    h2 a{position:relative; margin:30px 0 20px 0; padding:1px 1px 0 1px;}
    h2 a{color:#009; text-shadow:1px 1px 1px #000;}
    h2 a:hover{color:#FFF; text-decoration:none;}
    h2 a:hover:before{
    	background:url("lplinkstartafter.gif") no-repeat 0 0;
    	content:" ";
    	height:48px;
    	left:-14px;
    	position:absolute;
    	top:-2px;
    	width:26px;
    	z-index:99;
    }
    h2 a:hover{float:left; font-size:30px; font-style:italic; font-weight:bold; text-align:center; width:auto; height:48px; background:url("lplinkbodyafter.gif") repeat-x scroll 0 -2px transparent;}
    h2 a:hover:after{
    	background:url("lplinkendafter.gif") no-repeat 100% 0;
    	height:48px;
    	right:-14px;
    	position:absolute;
    	top:-2px;
    	width:26px;
    	content:" ";
    	z-index:99;
    }

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,533
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Am using Firefox and IE8 and don't see a :hover problem with the link in the <h2> element.

    I DO see that the clickable area for "Insurelane" is several pixels high.

    In what browser do you see the jumpy link?

    I tinkered with the html and added a little css at the top of this page to clear the floats. Let me know if this helps... or not:
    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" />
        <meta name="Description" content="This page contains information on how to get home insurance quotes online, so you can find the best policy for your needs." />
        <meta name="Keywords" content="health product reviews" />
        <meta http-equiv="Content-Language" content="en" />
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
        <link href="../style/lp.css" rel="stylesheet" type="text/css" media="screen,projection,tv" />
        <title>Home Insurance Rate Quotes from All Providers</title>
        <style type="text/css">
    .articletext {padding-top:4px}
    .wrapright img {
        float:right;
        padding-left:8px;
    }
    .wrapleft img {
        float:left;
        padding-right:8px;
    }
    .wrapright:after,
    .wrapleft:after {
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
    h2 > a {margin-left:120px;}
        </style>
    </head>
    <body>
        <div id="lpheader"><!-- begin header div -->
            <h1><span id="homeinsurance" class="sectionicon"></span> home &amp; property insurance</h1>
        </div><!-- end header div -->
        <div id="lpbody"><!-- begin body div -->
            <div id="textcontainer">
                <p><span class="headtitle">Protect Your Home's Investment with Home Insurance Rate Quotes!</span></p>
                <div class="wrapright">
                    <img src="homeinsurancerates1.jpg" alt="" title="Protect your #1 investment!"/>
                    <p class="hazard">Attention! What will Cover Your Losses Resulting from a Natural Disaster?</p>
                    <p class="articletext">Getting quotes from a large number of home insurance providers is the best solution to getting the most comprehensive coverage for a reasonable premium. Services like these will expand your horizons, so the consumer can get the full spectrum of the property insurance world. Act now so there will be coverage for your home if and when disaster strikes!</p>
                </div>
                <div class="wrapleft">
                    <img src="homeinsurancerates2.jpg" alt="" title="Keep your home looking like this after a storm." />
                    <p class="articletext">We have made a considerable effort to bring you the quoting tools you need to shop for the best policy for your needs. <!-- aff link needed --><a href="#">Insurelane</a> offers an efficient tool for receiving quotes for property insurance, but there are a bunch of other available applications. Another one that's worth checking out can be found at <!-- aff link needed --><a href="#">LowerMyHomeInsuranceRate.com</a>.</p>
                </div>
    <!-- next 2 divs added to demo extendability -->
                <div class="wrapright">
                    <img src="homeinsurancerates2.jpg" alt="" title="Keep your home looking like this after a storm." />
                    <p class="articletext">We have made a considerable effort to bring you the quoting tools you need to shop for the best policy for your needs. <!-- aff link needed --><a href="#">Insurelane</a> offers an efficient tool for receiving quotes for property insurance, but there are a bunch of other available applications. Another one that's worth checking out can be found at <!-- aff link needed --><a href="#">LowerMyHomeInsuranceRate.com</a>.</p>
                </div>
                <div class="wrapleft">
                    <img src="homeinsurancerates1.jpg" alt="" title="Protect your #1 investment!"/>
                    <p class="articletext">Getting quotes from a large number of home insurance providers is the best solution to getting the most comprehensive coverage for a reasonable premium. Services like these will expand your horizons, so the consumer can get the full spectrum of the property insurance world. Act now so there will be coverage for your home if and when disaster strikes!</p>
                </div>
    <!-- prev 2 divs added to demo extendability -->
                <h2><a href="#">Get a Property Insurance Quote</a></h2>
            </div><!--end contain div -->
        </div><!-- end body div -->
        <div id="lpfooter"><!-- begin footer div -->
            <form id="emailbox" name="form1" method="post" action="">
                <div>
                    <label for="go">Join the Mailing List!<span></span></label>
                    <input type="text" name="go" id="go" value="your e-mail" onclick="input_focus(this)"  onblur="input_reset(this)"/>
                    <input type="submit" value="Join" />
                </div>
            </form>
        </div><!-- end footer div -->
        <script type="text/javascript" src="../Scripts/emailbox.js"></script>
    </body>
    </html>

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Not sure what you're trying to do here ... I'm not getting any hover effect on the bottom link at all. If that's because you don't want to put the code live while it's buggy, how about putting it up as a demo page so we can see the problem in action?

  4. #4
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I have been able to upload the new files. Now you can see what's going on live. The connection at my office wasn't allowing FileZilla to FTP properly.

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,533
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    The problem has nothing to do with :after, but it DOES have something to do with :hover
    Code:
    h2 a{
        height:44px;
    }
    /* et.al. */
    
    h2 a:hover{
        height:48px;
    }
    /* et.al. */
    #textcontainer extends and #lpfooter "jumps", as designed.

    try making the height of both states the same.

  6. #6
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, this was a pretty silly question.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,533
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by etidd View Post
    Yes, this was a pretty silly question.
    Almost a silly as my code, since h2 a:hover shouldn't really need a height property at all


Tags for this Thread

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
  •