Call to action button too low

HTML & CSS
1

For some reason, my call to action button “Get the story now!” is too low on the page. I want there to be less of a gap between the text above. What am I missing?

2

It’s better to set up columns in a situation like this, one floated right and one left, to avoid problems like this. One possible hacky fix is to add overflow: hidden; to the containing <p>, but that’s not a very nice solution. As I say, wrap each column in a div and float them:


<p [COLOR="#FF0000"]style="overflow:hidden;"[/COLOR]>
<a href="http://www.clickbasics.com/increase-revenue-online-the-story/"><img class="size-full wp-image-5462 alignright" title="increase_revenue_get_the_story_now" src="http://www.clickbasics.com/wp-content/uploads/2012/06/increase_revenue_get_the_story_now.jpg" alt="Increase Revenue: Get the Story Now" width="304" height="59"></a>
</p>

That inline style is for demo only. I’ve only tested it in Chrome, so don’t know if it would work in other browsers.

3

Your call to action button is too low because an image is floated on the left.
As I was looking into your markup, I guess you could at least create a better markup.
The more complex the markup is, the harder it is to make it compatible on other browsers especially in IE.

So as an option, here’s a better markup for you:

THE MARKUP:
<div id=“content-wrap”>
<div class=“content-left”>
<!-- place the left content here i.e. the image –>
</div>
<div class=“content-right”>
<!-- place the right content here, i.e. texts and call to action button –>
</div>
</div>

THE CSS:
#content-wrap {
overflow:hidden; /* just for clearing floats rather than creating another element for clearing floats. It’s a common mistake for front-end developers /designers to create an element for just clearing float (your code would look sloppy and non-semantic) */
}

#content-wrap .content-left {
width: 560px;
float:left;
}

#content-wrap .content-right {
width:400px;
float:right;
}

/* I am assuming a 960px standard webpage here so the content-left’s width + content-right’s width = 960px*/

It’s not the end if you will change your markup bro rather than having headaches in doing browser compatibility tests.

4

So as an option, here’s a better markup for you:

I tried that, but the button is still too low in FF. In IE, the right column does not wrap right. What am I missing?

5

The main problem is here:


#content-wrap .content-left {
[COLOR="#FF0000"]width: 560px;[/COLOR]
float: left;
}

You’ll still need a bit more tweaking, but that gets you much closer. :slight_smile:

6

I changed the left div to a width of 500. Now the button is higher, but the right column does not wrap in FF or IE.

7

OK. I’ve fiddled with the image size and the left div width, and it seems to work fine in
FF 13.01, IE8, & Google Chrome. Can anyone check in Safari?

Also, can anyone recommend a free online browser checker?

8

It’s fine in Safari (which is usually the same as Chrome, anyway). As for online checkers, there is quite a range, but nothing beats the real browsers, of course. You can download Safari for free on Windows, so you might as well have that handy. And you can set up virtual machines for testing various versions of IE, or use ietester etc. Also, in IE9, you can choose to render the page in IE8 or IE7 mode, which is pretty accurate.