Bottom Graphic Not Fully Appearing

Hi all,

Oddly enough, on one landing page here, the large h2 link near the bottom appears properly with the beginning and end piece, but at another landing page [URL=“http://www.atlantareviewgroup.com/insurance/healthinsurance1.html”]here, the bottom h2 link appears aligned to the left, missing its beginning part… and the code appears to be the same!

What’s going on here? :shifty:

It’s appearing to the right on the first page because the <a> is floated, and it’s hooking on the image on that page, whereas it is floating fully to the left in the second page, as there’s nothing to hook on.

The left graphic is hidden on the second page because it’s positioned absolutely, and the container has overflow: hidden set on it, meaning that the left graphic is visually cut off. You could stop that with something like this:

h2 a {
position: relative;
margin: 30px 0 20px 0;
padding: 1px 1px 0 1px;
[COLOR="#FF0000"]left: 20px;[/COLOR]
}

etidd,

Just for fun, give these a try. You might like them.


@charset "utf-8";
/* ///filename: lp2.css \\\\\\ */

/* DELETE the lines commented "LAYOUT TESTING" before publishing */

* {        /* probably not a great idea */
    font-family:Verdana, Geneva, sans-serif;
    padding:0;
    margin:0 auto;
}
body {
    background-image:url("lpbg.gif");
    background-position:50% 0;
    background-attachment:fixed;
    margin-top:15px;
}
#bgtop {
    background-image:url("lpheader.gif");
    background-repeat:no-repeat;
    width:960px;
    height:60px;
}
#bgmid {
    background-image:url("lpbody.gif");
    background-repeat:repeat-y;
    width:960px;
    padding:1px 0;
}
#bgbotm {
    background-image:url("lpfooter.gif");
    background-repeat:no-repeat;
    width:960px;
    height:90px;
}

/* lpcontent is the content area.  The negative top and bottom margins extend #lpcontent over #bgtop and #bgbotm. */
#lpcontent {
    outline:1px solid magenta;      /* LAYOUT TESTING */
/*    background-color:#fdf;          /* LAYOUT TESTING */
    width:796px;
    padding:0px;
    margin:-31px auto -70px;
/*    position:relative;              /* LAYOUT TESTING required for lpcontent bg color to reach footer */
}

/* lptitle contains the section icon and header title */
#lptitle {
    height:60px;
    overflow:hidden;
}
.sectionicon {
    height:60px;
    width:60px;
    float:left;
    margin:0px;
}

h1 {
    position:relative;
    margin:8px 0 0 20px;
    padding:0 3px 0 3px;
}
h1 {
    float:left;
    text-align:left;
    font-size:25px;
    background:url("lpheaderbody.gif") repeat-x scroll 0 0;
    width:auto;
    height:35px;
    text-shadow:1px 1px 1px #030;
    letter-spacing:1px;
}
h1:after {
    content:" ";
    background:url("lpheaderend.gif") no-repeat 100% 0;
    height:35px;
    right:-14px;
    position:absolute;
    top:0;
    width:14px;
    z-index:1;
}
h1:before {
    content:" ";
    background:url("lpheaderstart.gif") no-repeat 0 0;
    height:35px;
    left:-14px;
    position:absolute;
    top:0;
    width:14px;
    z-index:1;
}

.headtitle {
    padding-top:4px;        /* add space above the "Lowest ... Costs Here" line. */
    padding-bottom:2px;     /* add space below the "Lowest ... Costs Here" line. */
    margin:0px;
}
.headtitle span {           /* text says "Find the Lowest ... Costs Here" */
    border-bottom:2px groove #000;
    font-style:italic;
    font-size:14pt;
    line-height:1;
    font-family:"Lucida Console", Monaco, monospace;
}

.floatRight,
.floatLeft {
    overflow:hidden;
    margin:8px 0;       /* vertical margin between content sections, if desired */
}
.floatRight img {
    float:right;
    margin-left:4px;
}
.floatLeft img {
    float:left;
    margin-right:8px;
}

p {
    padding:0;
    margin:0;
}
p + p {margin-top:4px;}

/* getquotes contains the "Get Quotes" link */
#getquotes {
    overflow:hidden;
    padding-top:16px;
    padding-left:130px;
}

h2 a {
    position:relative;
    margin:0px 0 0px 20px;
    padding:1px 1px 0 1px;
}
h2 a {
    color:#009;
    text-shadow:1px 1px 1px #000;
}
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:before {
    content:" ";
    background:url("lplinkstart.gif") no-repeat 0 0;
    height:44px;
    left:-14px;
    position:absolute;
    top:0;
    width:26px;
    z-index:99;
}
h2 a:after {
    content:" ";
    background:url("lplinkend.gif") no-repeat 100% 0;
    height:44px;
    right:-14px;
    position:absolute;
    top:0;
    width:26px;
    z-index:99;
}
h2 a:hover {color:#FFF; text-decoration:none;}
h2 a:hover:before {
    content:" ";
    background:url("lplinkstartafter.gif") no-repeat 0 0;
    height:44px;
    left:-14px;
    position:absolute;
    top:0;
    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:44px;
    background:url("lplinkbodyafter.gif") repeat-x scroll 0 0 transparent;
}
h2 a:hover:after {
    content:" ";
    background:url("lplinkendafter.gif") no-repeat 100% 0;
    height:44px;
    right:-14px;
    position:absolute;
    top:0;
    width:26px;
    z-index:99;
}

/* lpfoot contains the Mailing List box and the Back To nav links */
#lpfoot {
    overflow:hidden;
    padding-top:20px;      /* set space beneath the Quotes link here */
}
#emailbox {
    float:left;
    height:54px;
    width:216px;
    position:relative;
    overflow:hidden;
    margin:0px 0 0 60px;
}
#emailbox label,
#emailbox label span {
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    height:54px;
    width:216px;
    text-align:center;
    font-size:20px;
}
#emailbox label span {
    background:url("sectionemailbox.gif") no-repeat 0 0;
}
#go {
    width:130px;
    margin:30px 0 0 19px;
}
#emailbox input {
    position:relative;
    z-index:1;
}
.submit {
    overflow:hidden;
    margin:26px 0 0;
}

h3 {
    line-height:1em;
    text-align:right;
    margin:9px 60px 0px;
}
h3 a {
    color:#f60;
    font-size:14px;
}
h3 a:hover,
h3 a:active,
h3 a:focus {
    color:#f90;
    text-decoration:none;
}

/* "World Review Group" line */
h4 {
    font-size:8px;
    text-align:center;
    padding-top:4px;
    margin:0;
}

.hazard {color:#F00; font-size:12pt; font-weight:bold;}
.hazard:hover {text-decoration:blink;}
.articletext {font-size:11pt;}
.articletext a {color:#06C;}
.articletext a:hover {color:#0CF; text-decoration:none;}
.italic {font-style:italic;}
.bold {font-weight:bold;}
.ib {font-weight:bold; font-style:italic;}


<!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">
<!--
http://www.sitepoint.com/forums/showthread.php?885559-Hover-Effect-on-H2-Bottom-Link-is-Weird
Sep 14, 2012 10:02
Thread: Hover Effect on H2 Bottom Link is Weird
etidd

-->
<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="home insurance quotes online, home insurance quotes, best home insurance rates, best home insurance policy, home insurance rate quotes, home insurance rate quotes online" />
    <meta http-equiv="Content-Language" content="en" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link href="../style/lp2.css" rel="stylesheet" type="text/css" media="screen,projection,tv" />
    <title>Get Home Insurance Rate Quotes from All Carriers</title>
</head>
<body>
    <div id="bgtop"></div>
    <div id="bgmid">  <!-- begin body div -->
        <div id="lpcontent">  <!-- begin lpcontent div -->
            <div id="lptitle">
                <img src="homeinsurance.gif" class="sectionicon" id="homeinsurance" alt=" " title="homeinsurancesection" />
                <h1>home &amp; property insurance</h1>
            </div>
            <p class="headtitle"><span>Protect Your Home's Investment with Home Insurance Rate Quotes!</span></p>
<!-- alternating text and images go BELOW this line -->
            <div class="floatRight">
                <img src="homeinsurancerates1.jpg" title="Protect your #1 investment!" alt="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="floatLeft">
                <img src="homeinsurancerates2.jpg" title="Keep your home looking like this after a storm." alt="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>
<!-- alternating text and images go ABOVE this line -->
            <div id="getquotes">
                <h2><a href="#">Get a Property Insurance Quote</a></h2>
            </div>
            <div id="lpfoot">
                <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>
                <h3>
                    <a href="../index.html">Back to the Home Page &ndash;&ndash;></a><br />
                    <a href="../insurance.html">Back to the Insurance Section &ndash;&ndash;></a>
                </h3>
            </div>
            <h4>&copy;World Review Group</h4>
        </div>
    </div>
    <div id="bgbotm"></div>
    <script type="text/javascript" src="../Scripts/emailbox.js"></script>  
</body>
</html>


<!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">
<!--
http://www.sitepoint.com/forums/showthread.php?901107-Bottom-Graphic-Not-Fully-Appearing&p=5215481&viewfull=1#post5215481
Thread: Bottom Graphic Not Fully Appearing
etidd

In etidd's version, the images were stagger-floated in a common div without obvious separation between text.  Interesting effect.
-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Description" content="This page contains information on how to get health insurance quotes online, so you can find the best policy for your needs." />
    <meta name="Keywords" content="health insurance quotes online, health insurance quotes, best health insurance rates, best health insurance policy, health insurance rate quotes, health insurance rate quotes online" />
    <meta http-equiv="Content-Language" content="en" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link href="../style/lp2.css" rel="stylesheet" type="text/css" media="screen,projection,tv" />
    <title>Get Health Insurance Rate Quotes from All Carriers</title>
</head>
<body>
    <div id="bgtop"></div>
    <div id="bgmid">  <!-- begin body div -->
        <div id="lpcontent">  <!-- begin lpcontent div -->
            <div id="lptitle">
                <img src="healthinsurance.gif" class="sectionicon" alt="" title="healthinsurancesection" />
                <h1>health insurance</h1>
            </div>
            <p class="headtitle"><span>Find the Lowest Out-of-Pocket Health Insurance Costs Here</span></p>
<!-- alternating text and images go BELOW this line -->
            <div class="floatLeft">
                <img src="healthinsurancerates1.jpg" title="Select the healthcare plan best for your needs." alt="Select the healthcare plan best for your needs."/>
                <p class="hazard">Attention! You run the risk of being liable for all healthcare costs if you are not covered by an insurace policy.</p>
                <p class="articletext">Paying out-of-pocket for health insurance usually results in the insured does not get benefits from one's employer and is otherwise an irritating, yet necessary, expense. Injuries, illnesses, and other ailments can occur to anyone at any unexpected time, though, and having no coverage leaves one at great risk of crippling expenses to get the required healthcare at the time of emergency. So, given its essential value, how can you be covered in the most cost-efficient way? Getting quotes from a large number of health insurance providers is one of the only known options available to minimize the cost of healthcare premium. Here you can find tools to evaluate available policy options and achieve peace of mind when you discover the rates you found possible with these online health insurance quote tools.</p>
            </div>
            <div class="floatRight">
                <img src="healthinsurancerates2.jpg" title="Keep your home looking like this after a storm." alt="Keep your home looking like this after a storm." />
                <p class="articletext">Take advantage of the opportunity to weigh in on out-of-pocket health insurance costs. <!-- aff link needed --> <a href="#">This health insurance site</a>, Health Quote Insider, offers effective quotes from a plethora of carriers, but there are <!-- aff link needed --> <a href="#">other quotes available</a> with COBRA alternatives if you qualify. Check out the other <!-- aff link needed --> <a href="#">health insurance quote website</a> at BestQuotes.com, and one of the most thorough healthcare insurance quote tools we know of is brought to you by <!-- aff link needed --> <a href="#">Quote It 4 Me</a>. The last healthcare solutions provider we know of is <!-- aff link needed --> <a href="#">US Insurance Online</a>, and they provide all types of insurance solutions to people within the fifty states.</p>
            </div>
<!-- alternating text and images go ABOVE this line -->
            <div id="getquotes">
                <h2><a href="#">Get Health Insurance Quotes</a></h2>
            </div>
            <div id="lpfoot">
                <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>
                <h3>
                    <a href="../index.html">Back to the Home Page &ndash;&ndash;></a><br />
                    <a href="../insurance.html">Back to the Insurance Section &ndash;&ndash;></a>
                </h3>
            </div>
            <h4>&copy;World Review Group</h4>
        </div>  <!-- /lpcontent -->
    </div>  <!-- /bgmid -->
    <div id="bgbotm"></div>
    <script type="text/javascript" src="../Scripts/emailbox.js"></script>  
</body>
</html>

Hopefully these new files will fix this layout issue. I can’t use the first fix without affecting each and every landing page that uses this style sheet.

How many landing pages are you talking about? It only took about 5 minutes to modify the second html page, and it came up looking fine to me. The divvy boxes serve to modularize the various elements which keeps them from interfering with each other and results in a framework that is easily replicated or modified without breaking. You’ll have to decide if it’s worth your trouble, of course. Whatever you decide, feedback is appreciated. Thanks.

Okay,

So after buying a new computer/ doing my dayjob stuff and back to designing my website:

I tried your new markup. In IE9 and Firefox 16.0.2, both had the top parts in the right spot, but the rest was far off to the right.
The bottom image is still cut off.

Hopefully I can figure this out.

Now I got the bottom image to show fully. All that was that the h2 element it’s placed as a background on had no left margin to get it away from the very side of #textcontainer.

The problem now is the textcontainer is not fitting on this screen over the background, and i’m wondering if it is a background image issue, but something doesn’t look right.

Actually, I forgot to do your CSS styles along with it. It looks much better now. Thanks for your help!

Yes, the css is the hand within the glove, so to speak <smile>.
Glad to hear it’s working for you. Thanks for the feedback.