Question

For a school assignment I was required to redesign a website for a buisness.

I had only ever mucked around with css/html before and this is the first time I had written it for a full website.

The issue I am facing is the positioning of 3 divs is correct in google chrome, but in IE and firefox the divs are incorrectly positioned.

http://letsmine.info/mnpctech/index.html they are the twitter, facebook and checkout symbols on the right of the menu bar.

As this is the first time I have written CSS and HTML I presume this is a silly mistake and I am hoping that you can guide me into the right direction.

Also on the store page I need to layout the products with a picture and name like they are here http://www.mnpctech.com/MnpctechBilletFanGrill.html . Should I create a table and just put the images and title in there? just looking for some advice.

Answer 1

You need to add the following properties to #checkout, #facebook and #twitter:

display: inline-block;
float: right;

and remove the following properties from each one:

position: relative;
left: 980px;
top: -49px;

The page should then display properly in all browsers.

Make sure that you use floats and know your way around the “display” property well for positioning, I always try to stay away from relative positioning as it’s a bit unreliable.