Category: CSS and Stylesheeting

Into the world of using css to layout pages

CSS Vertical Overlapping of floating divs

I thought this involved some trickiness. I needed to have a row of floating divs have the content underneath it pulled up over it, just a little bit, so that some body tabs appeared to the right of one of the floating images in the header.

After much testing and trial and error I figured out that the content below overlaps the content above depending on the dimensions of the div above it. The content below will STOP overlapping when it hits the image above UNLESS you make the height of the above div (that contains the image/content) to be smaller than the image/content itself. It appears by default, the height of the div containing the image is the same as the image (makes sense).

So the trickiness is in fooling the div below to overlap the div above, when the div below sees the above div as smaller in height than the image it contains.

I’ll post my html in the off-chance that someone can find and use this info.

Cursor not showing up on Firefox form inputs (no cursor in earlier versions of Firefox)

THIS FIX DIDN’T WORK FOR FF ON A MAC. I’m still baffled about how to fix this. I think put a link for a firefox update may be the best solution.

When you select an input in FF <= 2, the blinking cursor wasn’t showing up on a form that was buried in a few layers of divs. No cursor was showing up at all, though some inputs had a half cursor (like it was pushed up off the input).

Looks like FF 3 is okay, but the older versions were acting funny. I guess this is a bug in firefox. I don’t know exactly how the bug works, or what the fixes are, are even what the different causes of the bugs are. There are tons of variations on those 3 items. All I know for me is that by doing the following it fixed the problem:

Wrap each input in <div style=”overflow:auto”></div>.

That fixed it for me. overflow:visible also worked. Overflow hidden has been mentioned as working too, but that broke it again for me. Not sure what the implications of these stylings are on how the inputs display, but they seemed to work fine for me.