Positioning not the same in IE, Safari, Chrome browsers

Style positions not the same in all browsers

[Cowgirl]

I am using <div> statements in my html code. For example see code below...

<div id="hometext16" style="position:absolute; width:100px; height:10px;z-index:5; left: 350px; top: 360px;"><img src="/firewear.gif"></div>


The positions in this code (left:350px; top: 360px;) displays correctly in IE, but shifts to the right and up in Safari, Chrome, and FF. What is the reason for this? Should I be using some other type of code to do this with instead of the style positions?

You may look at the website in the different browsers to see what I mean if you would like.

www.riversidefr.com

Thanks!
Mandy

[Shado]

Hallo there

I would suggest using different style sheets for different browsers as they all interpreted code differently and some of them have bugs so read up on browser bugs. The browser that has the most serious bugs related to CSS is Internet Explorer.

Have a look at this article [dave-woods.co.uk ]

I have viewed your site in FF and would suggest you have a look at the middle column's width as it's intruding on the right side bar. In IE the problem is not present.

I don't know much about frame sets and websites build in JS but on both my browsers the page loads very slow and patchy.

Hope this helps

[Hoople]

This method you are using has it's perils in cross browser behavior unless one delves deeply into the issues of margin, padding and Box model true width. Floats behave much better IMHO. Which version of IE are you checking with? IE6 has a lot of known issues regarding positioning.

Consideration should be made for all common screen resolutions. My Firefox 3.6.8 on Ubuntu at 1024x768 shows a horizontal scroll bar. In your navigation menu "Products and services" wraps to 2 lines. On Opera 10.65 it does not. Make allowances for different fonts and their widths in your navigation as it overlaps "...should you buy your..." of your call to action statement!

The line "Riverside is a distributor for:" is hidden behind the row of icons in Firefox and visible in Opera. The firms icons and rules of your middle section are overlapping the right column.

I further suggest narrowing the left column slightly and in the center column shrinking frphoto2a.jpg (man in tan shirt) significantly. This would reduce scroll overall and bring more product line icons above the fold.

Personally I would design the site to look good in Firefox 3.x and make small adjustments to fix minor issues in IE 7/8, Chrome, Opera & Safari (your MAC viewers).

[Cowgirl]

I am using IE 8. And you're right,that probably a big problem. I have been designing for IE, but it seems to ignore minor errors and treat code differently. I do think I need to start designing for FF, but if I get this to look right in FF, how can I change something so that it looks right in IE. The icons that you refer to under "Riverside is a distributor for:" are my biggest problems. That's the main reason for me to try to fix this right now. That is where I'm using the <div> statements like I showed in the code above. I'm not familiar with the floats that you speak of. Is that used in the image properties?

Thanks for the help!

[Shado]

Try making the logos slightly smaller - it's possible that their size + margins ect are more than the space allocated to the div containing it.

I design and test in FF first, most of the time when testing in IE I only need to insert display:inline to my IE stylesheet to sort out the problem but then again I mostly work in CSS/HTML