4 replies to this topic

[jonbey]

I created a little header strip to hold breadcrumbs and search that stays fixed to the top of the page.

html:

<div id="tophat">

</div>


css:

#tophat{
background: #fff;
float: left;
width: 100%;
height: 30px;
position:fixed;
z-index:1000;
top: 0 !important;
left: 0 !important;
border-bottom: 2px solid #0A5784;
padding-bottom: 5px;
}


It looks OK in all browsers I have checked (that is what the zindex stuff is all about) but on Google search cache it obscures the top of the page, covering the cache information.

Any ideas if there is a way to fix?

[AbleReach]

Yes! This is cool, it you're into this sort of thing.

Change the container of your absolutely positioned element to position: relative.

If your #page container is position: relative, an absolutely positioned element directly inside the #page will treat the top of #page as top: 0.

I didn't need to know this until WordPress came out with the admin bar and messed up my themes. Now I've been going through and making sure elements with absolute positioning have something to keep them from going to top:0 and ending up under the admin bar.

[jonbey]

Tried that but now it just moves with the rest of the page.

In case you are not seeing the same thing as I am, attached is a screen shot.  top_div_overlaps_google_cache.jpg   15.64K   22 downloads

Edited by jonbey, 31 July 2011 - 04:49 PM.

[AbleReach]

Hmmm... I see what you mean.

If I were you I would just hide it when looking at the cache. Who else is going to care?

[jonbey]

Any idea how it can be hidden?