I am working on getting my site working clean across browsers and have been running into a lot of issues. The one I’m stuck on right now is a h1 element that is overlapping a div on my blog page (using chrome 16.0.912.21 beta). I was using Firefox as a test browser while designing the site and it respects the div element, by placing the h1 text to the right of it. I’m no web design expert and hope that someone could enlighten me as to why chrome does not do the same and lets the h1 text overlap the div. The div is .drop (water droplet) next to my post title. I sized it correctly and put the image in as the div bg. I thought that display: block; might do the trick, but doesn’t seem to change anything. Please take a look if you get a chance:
This reply has been reported for inappropriate content.
I believe the negative top margin on the h1 is creating a new block formatting context in webkit – which then ignores the float. A simple fix is to remove the negative top margin and use relative positioning with a top value of -2px.
I use bootcamp with Win7 and access that with VMware Fusion. I also have a VM of XP for IE6, but rarely use it now.
Much appreciated wolfcry…it worked like a charm. I’m surprised there’s no simpler way to do the ie checks. I used to run bootcamp but was happy to get rid of it when I acquired the software I needed for a mac. Thank you very much!