Grow your CSS skills. Land your dream job.

Browser Compatibility Issue: h1 overlap with div

  • # November 4, 2011 at 5:26 pm

    Hi,

    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:

    http://adechonduras.org/category/news/

    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.

    Thank You,

    Sean

    # November 4, 2011 at 7:00 pm

    Have you tried:

    #primary h1 {margin-left: –px;}

    # November 4, 2011 at 8:29 pm

    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.

    # November 5, 2011 at 2:15 pm

    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!

    # November 29, 2011 at 3:04 pm

    Hey,
    I’m sorry to bug you again, but the problem seems to have resurfaced and I don’t understand why this might be happening (because it was working after I had changed the CSS). Any ideas?
    Thanks,

    Sean

    # November 29, 2011 at 3:33 pm

    the negative top margin is still there (style.css line 301)

    # November 30, 2011 at 11:05 am

    Thanks Again!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".