Absolute Position Not Moving

HTML & CSS
1

Hi,

Our order form https://secure.1tm.com/cart.php has an image of a girl on top in the header image and its set for absolute position but its not moving its staying on the left side of the header image. We would like it moved over next to the Visa card image and also moved down a little. Any ideas?

Code:

<img src=“templates/default/images/live_person.png” style=“position:absolute; right:100; top:15; z-index: 50;” width=“173” height=“108” alt=“We Are Here To Help”>

Thanks

2

Hi,

The problem with the inline styles you posted is that your offset values are missing the units (px)

It’s not the same as the width or height image attributes whereas they do not need the px units.

style="position:absolute; right:[COLOR=Red]100[/COLOR]; top:[COLOR=Red]15[/COLOR]; z-index: [COLOR=Red]50[/COLOR];"

You should be setting a class on that image and styling it through the CSS anyways.

You will also need to establish your .wrapper div as the “containing block” for that AP image. You will do that by setting position:relative; on the wrapper

3

What is a .wrapper div and how do we set it up? Will it work cross browser?

Thanks!

4

It’s already in your page, it is the parent of that image you are trying to position. The wrapper div is opening right above that image.


<div class="[COLOR=Blue]wrapper[/COLOR]">

<img [COLOR=Blue]class="help"[/COLOR] src="templates/default/images/live_person.png" width="173" height="108" alt="We Are Here To Help">

I just set a class on that image so you can move the styles to your css.

Like so -

[B].wrapper[/B] {
[COLOR=Blue]position:relative;[/COLOR]
}

[B].help[/B] {
position:absolute;
top:15[COLOR=Blue]px[/COLOR];
right:100[COLOR=Blue]px[/COLOR];
z-index: 50;
}
5

Yeah that did it :slight_smile:

One last question on our main page we had the same image setup do we just do the same thing and with the px? Its not showing up correctly in IE.

Thanks!

6

Well that main page is loaded with inline styles, the whole page really needs to be reworked. Like I just said above, you should be setting classes and ID’s on your divs so you can get all styles moved to your CSS. That is the whole purpose of CSS, separating your content from your styles.

But yes, the same concept would apply to the person image on the home page.

You also need to remove those inline styles from the image you just fixed, you left them in there after you added the class. That may be having an effect on IE.