Browser Compatibility Issue: h1 overlap with div
# November 4, 2011 at 5:26 pm
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:
PS- What are the best tools to use to test your site across browsers? I use a mac and the whole ie compatibility is driving me crazy.
Sean# November 4, 2011 at 8:29 pm
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.
You must be logged in to reply to this topic.