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.
Msg#: 4194030 posted 6:29 pm on Aug 30, 2010 (gmt 0)
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.
Msg#: 4194030 posted 10:40 pm on Aug 30, 2010 (gmt 0)
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).
Msg#: 4194030 posted 11:58 am on Aug 31, 2010 (gmt 0)
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?