CSS Cross browser issues

I have a few issues with the middle section of this website. i.e. The "Our Areas of Specialisation" and "Our Cloud Services" sections.

http://ft.petewinter.com/

In Chrome this section view correctly. However I have the issues below in other browsers...

1) In Firefox I am getting a white line on the left of the images. See screenshot below.
Q1 Firefox Issue
2) In IE there are two issues. See screenshot below.
a) Image size is changing showing some content below which is not correct.
b) Looks like some sort or rendering issue with a border radius.
Q2 IS Issues
Can you please help resolve.
petewinterAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

 
COBOLdinosaurCommented:
Actually Firefox has it correct and to the standard.  When you say it is correct in Chrome I suspect that you use Chrome first. The issue is that the calculations for the rounded corners can slightly alter the width that the renderingObject uses for the paint and any subsequent re-paint steps.  The difference between Chrome and Firefox is very minor, but IE has bigger issues because it does not paint correctly at all.  It too IE a long time to even adopt CSS for round corners and they still don't have the code right.

There is no real solution.  It is the kind of difference between manufacturers that can drive you crazy so you can either live with it, or spend a lot of time trying to get different versions of the layout right for each browser by doing user agent detection and delivering alternative content.  You might be able to get them closer with very tiny adjustment to widths.

However, I don't know of any user who visit sites with multiple browsers so they can see if they match; generally they are going for content, not developer art.

Cd&
0
 
petewinterAuthor Commented:
There is no real solution! I can't just leave it how it is so I need to find a solution especially for IE site. There must be a work around?
0
 
COBOLdinosaurCommented:
>>>There must be a work around?

Yes there is... it is called trial and error experimentation to come up with multiple pages that match exactly.  For IE; good luck.  Once you have a perfect page for each browser you will just need to add scripting to detect user agent and present the appropriate page.  Then you will need to start on browsers like Opera, Safari, and if if you are also supporting mobile you will need to fix it up for Android, and 7 or 8 others.  Bt the time you get that done; a new browser release will change the waay it renders and you will be back to where you started.  A Ford does not look or perform, like a Jeep, or Honda.  Each manufacturer has their own design and priorities and the same is true of browser manufacturers.  Sometimes there are difference by design because they think it gives them a competitive edge. Sometimes it is just an accident.  If you are doing web development you learn to live with it; or you go crazy; or you become a drunk.  

In the end if looking identical is really important then screen save the perfect image and send that for all browsers.  Mind you it still won't be identical, but only around the edges of the image.

Cd&
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
petewinterAuthor Commented:
So how. Suggestions please????
0
 
COBOLdinosaurCommented:
So how; what?

We both seem to be speaking the same version of English.

There is no solution except what I already said.  Do a separate page for ech browser you support and when a request come to the server it can look at the user agent in the header of the request (and hope that the user is not spoofing) and then return the page that is best suited for that browser.

Sorry you don't like the universe the way it is ordered; but there is nothing I, or anyone else, can do to force all browser manufacturers to use the same codebase.

Cd&
0
 
petewinterAuthor Commented:
I thought you might suggest some code suggestions. I.e IF IE use this code, etc.

Anyway thanks for you advice and information
0
 
COBOLdinosaurCommented:
Markup and CSS are not programming languages, they are meta data that gets parsed into objects used by the rendering engines (Trident for IE, Gecko for Firefox, and Webkit or Blink for Chrome)  The architecture of the three is very different. They are optimized for three very different philosophies.  Chrome is intended to load fast and maximize search efficiency.  Firefox is optimized to provide a secure shell that is easy for third party addons. IE is optimized to work well with Office, .net,  and other Microsoft products.

I am using Firefox 35.0.1, When version 36 becomes available later this month some things may change in pages I have done.  Nothing serious hopefully, perhaps a couple of pixels difference in position or differences in gradient transitions. No big deal.  It has always been this way in web development.  You optimize for the browser most of your users are visiting with and you do your best to look good on the other browser;  Or you go nuts trying to keep up with changes that affect rendering happening in OS, browsers, devices, user settings, and standards about once a week.  If you insist on making them look the same, you are not going to have time for any other development.

Cd&
0
 
petewinterAuthor Commented:
Thanks for the information, but I was looking for the below which I have found elsewhere...

The main issue with screenshot on IE is the overflow-y style does not work. However you can you overflow:hidden , then use a IF IE command below...

<!--[if IE]>
<style type="text/css">
.Home_Spec .shortcode-teaser-img {
overflow:hidden;
}
.Home_Cloud .shortcode-teaser-img {
overflow:hidden;
}
</style>
<![endif]-->
<style type="text/css">
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.Home_Spec .shortcode-teaser-img {
overflow:hidden;
}
.Home_Cloud .shortcode-teaser-img {
overflow:hidden;
}
}
</style>

Open in new window


i.e. There is a solution or work around!
0
 
COBOLdinosaurCommented:
There are a couple of hacks that will stop working at some point, and you will be explaining why the page is suddenly broken.  The if IE is 100% non-standard and will only work until MS drops support for it.  The hyphen hacks are a standards compromise allowed by W3C to allow manufacturers to use non-standard internal code in browsers when they cannot yet meet the standards specification.

Those are subject to change with or without notice, and at some point MS will be able to comply an the hack will no longer be necessary.

So if you want to spend your time digging up hacks to make square pegs fit in round holes go right ahead.  If you are getting paid by the hour then it does not really matter how much time you spend on trivial rendering issues.

I expect I would be more concerned with fixing the validation errors:
http://validator.w3.org/check?uri=http%3A%2F%2Fft.petewinter.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

and doing something about the really poor SEO.  The site looks to be a commercial enterprise, and I guarantee you in the end proper SEO is far more important to profitability then a bunch of graphics above the fold and no attempt to do anything to enhance SE rankings.

Cd&
0

Experts Exchange Solution brought to you by ConnectWise

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
 
petewinterAuthor Commented:
Thanks did you time and advice. The page is still in development so the SEO, etc still needs to be corrected.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.