View Full Version : Chrome Making Ap Element Act in Normal Doc flow?

03-26-2011, 03:31 PM
Having a problem with my layout. I have an AP element over lapping a main container. As this is an AP element it should be removed from the document flow meaning any float or other elements inside the container should not be affected by this. It is not the case. Firefox is displaying it as it should be but chrome is reacting as if the ap element is in the normal document flow.

I have provided a link to the test page. The ap element is the box with the button and map. Its the images below in the image-holder div that has the margin.

Does anyone know whats going on?


Site link (http://www.swbdesigns.co.uk/clients/connections/courier-surrey.html)

03-26-2011, 03:46 PM
Can't duplicate your gripe. I've looked at it in 3 browsers and they all work the same.

03-26-2011, 04:04 PM
hmm i have looked through my code and cant see what the problem is? I am using a mac, is it Chrome mac thing. I am really stumped on this!

Have you looked at my link in chrome on a windows machine?

03-26-2011, 04:58 PM
I see your issue in Chrome but it appears to be unrelated to the absolutely positioned element. Try removing the absolute positioning and you'll see it doesn't affect the layout.

In your html try moving the .image-holder tag AFTER the <h2>Why Use Us As Your Courier</h2> and then remove the margin-top property from the .image-holder style rule.

03-26-2011, 05:01 PM
Hunter86... Please, don't double post! I've deleted your other post in the HTML & CSS forum about the same subject.

03-26-2011, 06:36 PM
Thanks DWcourse. I thought that Ap elements are removed from the normal document flow, and in Chrome the margin was being added from the bottom of the AP. Which it should not be doing as all other elements should act as if it is not there, if it is rendering correctly. Am I right in what I am saying there? Your solution worked which is great would like to understand why it was acting this way though?

03-26-2011, 06:36 PM
Sorry did try and remove the first one but didnt see how. Sorry

03-26-2011, 07:24 PM
You are right that AP elements are removed from the normal flow but that wasn't at play here. For some reason Chrome was using the bottom of "25th Year…" image for the top of .image-holder and the other browsers were using the top of the .wrapper holding it as the top of .image-holder.

By moving the image-holder below the h2, you "reset" the top of image-holder to a spot that all browsers "agreed upon."

Why Chrome had the problem at all, I don't know. But it just goes to show you that you don't really have to know the reason behind every issue to fix it.