Css positioning issue, objects appear in different locations depending on browser

Get Started
1

IE7+8 display different… safari/chrome displays the same, and firefox is the only one that displays correctly…

I am trying to resolve this page which was developed by another programmer… and it has me stumped…

Webspage: http://www.iscoot.com/

The issues are:

  1. The logo and green arrow to the left, display at different vertical positions depending on which browser you use as stated above.

  2. The image at the top that says “Experience the thrill of a brand new iscoot” … if the image is made taller, it causes all the content below to be properly pushed down but the logo stays in one spot and doesn’t push down correctly.

I was able to resolve the logo issue by using the “bottom” property instead of the “top” property…

However because of issue #1, this solution will not work unless I am able to get both images to appear correctly…

=====

Does anyone know the proper route I should go or css code I should utilize to make sure that if the header image has its height increased, all the page content properly moves down the page + the logo and green arrow display correctly in all browsers back to IE7 even if it means a seperate css for IE.

I am trying to accomplish this without needing to remake the page from scratch, but understand a lot of code may need to be modified.

Thank you in advance!

2

You need to find a way to make get the logo to be properly positioned using the relative position attribute as opposed to the absolute position. Absolute positioning is almost always the cause for an object to not move when surrounding objects move or change.

3

Thank you for taking the time to reply :).

I found the issue and solution from a post on another website.

  1. The green arrow showed different across browsers because i was using the “bottom” position and each browser had the bottom of the wrapper at slightly different locations.

  2. I kept the logo and green arrow as an absolute position but placed them inside the proper containers and the containers had a relative position. Doing this and change the position from “bottom” to “top” fixed my issue and now everything looks the way it should.

I personally wasn’t aware that the container needed a relative position and still not sure as to why… but doing so worked perfectly!

4

In order to position a element it’s parent need a position. So as soon as you gave the parent a position your problem was fixed.

Absolute Positioning