Solved

CSS Cross browser issues

Posted on 2015-02-11
10
139 Views
Last Modified: 2015-02-12
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.
0
Comment
Question by:petewinter
  • 5
  • 5
10 Comments
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 500 total points
ID: 40603919
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
 

Author Comment

by:petewinter
ID: 40604010
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
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 500 total points
ID: 40604124
>>>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
 

Author Comment

by:petewinter
ID: 40604167
So how. Suggestions please????
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40604190
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

Author Comment

by:petewinter
ID: 40604255
I thought you might suggest some code suggestions. I.e IF IE use this code, etc.

Anyway thanks for you advice and information
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 500 total points
ID: 40604317
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
 

Author Comment

by:petewinter
ID: 40605286
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
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 40606093
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
 

Author Closing Comment

by:petewinter
ID: 40606453
Thanks did you time and advice. The page is still in development so the SEO, etc still needs to be corrected.
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now