Alignment problem in IE7

[SteveMT]

On the site I am currently working on:

 

http://smtdesigns.co.uk/rideonmowers/index2.html

 

The credit cards image sits above "PRODUCTS" in Firefox, Safari and Opera, which is where I want it. However, in IE7, it shifts to the right so it is above "HOME" which then interferes with the phone number.

 

Does anyone know how to resolve this?

 

Link to css:

http://smtdesigns.co.uk/rideonmowers/rom3.css

 

[SuperBlue]

Quick fix, change #cards To:

#cards {
position: absolute;
top: -55px;
left: 0;
}

 

And change #main-holder to:

#main-holder {
float: left;
width: 602px;
padding: 10px;
text-align: left;
}

 

Don't forget, that you can take full advantage of css position, by applying position: relative; to the basement div, this way its much easier to place your elements, and it has the advantage, that it doesn't matter which order you type in the elements in the document, and as result the document will be more search-engine friendly.

 

I toke advantage of it, in my BorderTechnique.

[SuperBlue]

See now we are effected by this un-justified time limit of edits. 

 

What i ment was, change #leftnav-holder to:

#leftnav-holder {
    position: relative;
width:178px;
float:left;
}

 

forget about #main-holder.

[SteveMT]

Excellent, thanks BlueBoden.  I'm still relatively new to layouts with css so I will remember that one for the future.

 

Cheers,

Steve