Search bar clickable issues

HTML & CSS
1

Hi there,

I’m creating a prototype of my new portfolio page and I have never seen this problem before. Not to sure why it’s happening though I’m sure someone has come across it before.

http://www.jasoncorbett.com.au/v2

If you see the search bar on the right sidebar it is hard to click into it, only clickable if you hover around the bottom of the bar.

I’m guessing it’s something to do with margin/padding.

Thanks in advance.

Jason

2

Ah I see!

Thanks buddy :slight_smile:

3

Hi Jason,
The problem is with the .author and .date <p>s’ to the left of your input.
They have been relative positioned and they are layering on top of the input thus hiding access to it.

<div>[COLOR=DarkGreen]<h1 class="blogtitle">This is a blog post</h1>[/COLOR]
<p class=[COLOR=Red]"author"[/COLOR]>by <a href="#">Jason Corbett</a>[COLOR=Red][B]</p>[/B][/COLOR]
<p class=[COLOR=Red]"date"[/COLOR]>Monday 24th June, 2010</p>
</div>


p.author {
    font-size: 10px;
    color: #fff;
[COLOR=Red]    position: relative;
    left: 340px;[/COLOR]
    top: 5px;
}

p.date {
    font-size: 10px;
    color: #999;
[COLOR=Red]    position: relative;
    left: 300px;[/COLOR]
    top: 5px;
}

Even though they are in the left column they are shifted out with the p tag retaining 100% width. The relative positioning automatically layers them above non-positioned elements. If you were to put a background color on them you would see what is going on.

Just float the h1 to the left and then float the "p"s to the right. You will need to use clear:right; on the p.date to drop it below the p.author

You could just wrap them both in one div and float it to the right. Depending on your CMS you might be able to just use one p tag and then nest the date in a span to style it.

You did not close the p on any of the p.author classes in the left column. I closed it in the code above (bold red text </p>)