Spacing issues in different browsers.

I created my product layout page in mozzila, it wasnt untill i checked it in Internet explorer to see if it was alright that i discoverd there was a big spacing error.

if you view this link in mozzila and IE http://www.orcharddirect.co.uk/store/index.php?main_page=product_info&products_id=162
you will see that #productwrapper2 (the add to cart module) is perfectly positioned in mozzila and has a unwanted space in IE. How can i fix this? Any help appreciated.

Elliot

This is largely because MSIE refuses to adopt global convention regarding some key aspects of CSS.

(If you see what you want appearing correctly in firefox, know that your CSS is accurate and correct. The problem is MSIE browser...)

Trouble is, creating separate css for MSIE is complex.

Im fairly competent with css, so if u could point me in the right direction. ive exausted all my ideas, its doing my head in! cheers.

Best I can suggest is that you do a google search for things like:-

"css problems with MSIE" and
"internet explorer css compliance"

...etc

There is the <!--if IE--> conditional comment that can be used to load a supplemental stylesheet for IE. You can make it version-specific, too. Search on that for more info.

Ill have a look, if there is quicker way u can think of in the mean time be sure to let me know :frusty: cheers!

PS - I would prefere to have it working in IE over mozzila just due to the fact that most people dont use BETTER browsers, so if there is anyway i can edit my existing style sheet to work, could u let me know. thanks again

Try going **HERE**

schoolboy:

Try going **HERE**

Is there anything on their that applies to my problem? I cant find anything will help fix my problem :huh: however it points out some useful tips.

thanks once again

IE is behaving correctly in this case:

To have what you want, you have to float the image to the left, and then float the add-to-cart group to the right.

yellow1912:

IE is behaving correctly in this case:

To have what you want, you have to float the image to the left, and then float the add-to-cart group to the right.

Unfortunatly that does not work, in mozzila it puts the text above the add to cart module and in IE it does absolutely nothing, ne other ideas?
cheers

You have to put the item title inside the div of the add-to-cart as well.

This didnt work, in IE it did nothing once again, and in IE i just moved the content over the add to cart module. any ideas? cheers

i floated the content as well, this made everything move down in mozzila like it did in IE, once again IE did nothing, so i then added a -em margin at the top of wrapper2, this doesnt rly work as it has differnt size gaps on different images across both browsers?
e.g http://www.orcharddirect.co.uk/store/index.php?main_page=product_info&cPath=69_73_74&products_id=281
http://www.orcharddirect.co.uk/store/index.php?main_page=product_info&cPath=69_73_74&products_id=280
any suggestions would be great cheers.

It appears to be to do with the height of the image... when an image has a greater height the add to cart module moves down?

There are several issues needed to be addressed:

1. You have some minor html errors on the page, fix them (validate the page thru w3c to see the errors)
2. When I look at the layout of the page, I come up with a structure like this:
   2 columns, the product image in the left column, the description and add to cart on the right one. (float left - right)
   If you look at your code you will see that your current structure is a bit weird, however.
   (you have productGroupWrapper, productGroupWrapper2 and productGroupWrapper3)

I would suggest you put the image inside productGroupWrapper, and then the description inside productGroupWrapper2 (and you dont need productGroupWrapper3 anymore)

The idea behind the 3rd wrapper was so that the content was not on a gray BG, i only wanted the add to cart module to have a bg so that it stood out. is there anyway i can do this with 3 wrappers? cheers for ur quick reply

You can easily set the description background color to white.

Also, if i just moved the content into the 3rd wrapper it would not solve the problem of the 2nd wrapper moving up/down on different pages due to the image being a different height. is there a different way of setting my divs in order to get the same effect but be correct across all browsers? Im off to work now but will look at this thread when im back. many thanks!

That problem can be solved easily. First try to make the changes I suggested, then if that problem is still there we will move on to fix it.

I have changed it like you said, by eliminating the 3rd wrapper, spacing issue has not changed. Any ideas? cheers

Can you specify the problems now, along with screenshots if possible? Since the page displays just fine on my ie7