Browser Compatability

Alex B

Member
I have done a few searches on google, but really not found a good solution to the problem. I did find a code once that was written by this guy that others recommend, but can't find it now. I was using firefox and wrote it using this browser, but I was having problem with it so I went to use IE and found that some code wasn't working correctly. Can anyone help. Thanks for reading. :)
 
It may sound absurd to you, but I found that the best way to address browser compatibility issues is the use of previous HTML and CSS versions.

The reason for this is that we are undergoing a "developer war" between those who create browsers and those who create languages for web designers. There is a lot of bureaucracy involved, but, hopefully one day they'll find an agreement...
 
Thanks for the replies guys.:) :)

@Chris: Not to sound a complete newbie but won't that just solve the IE problem not the firefox, chrome and other browsers that will pop up over the years.

@Webian: Sorry you have lost me, I thought I was.....ok at web design, not any more :(
 
@Alex
Hay fella.

X-browser the Jazajay way this will take you 5mins over 5 hours and cover every browser.
Make sure yout html is as clean as poss 99% of the time you may need to fix IE8 and thats it these days if you do, and that may just be a line or 2 in a IE8 conditional.

Right go with conditional comments as Chris says, you may not need to of coarse.
Code it up for Opera first, hardest to fix/technically works the best out of all the browsers so not technically fixing it but hay.

Then write CSS fixes for Firefox and Chrome if need be, conditional comments for IE after.

So

CSS

#someId{margin-left:20px;color:000;padding:20px} //All browsers
#someId,x:-webkit-any-link{margin-left:10px;color:#FFF} //Chrome and Safari rules only. These 2 will have a smaller left margin and the text will be coloured white not black, padding will remain at 20px.
#someId,x:-moz-any-link{margin-left:35px;color:#FFF} //Firefox rules only. Firefox again will have the text changed to white with a wider left margin, padding will remain at 20px.

That way you can just hit the right browser/set of browsers and make them conform to what you want if it is just a incompatability bug or a totally differnet layout and colour scheme. Take out the orange comments when putting them into an actually CSS sheet.

This will always default to the most modern version of that browser as well so you don't have to worry about future problems with this "hack" being removed.

Lifes easy and jobs a goodun. :)

Jaz
 
I am feel SO out of my leauge it is so scarey, and not funny :(

Looked at IE site. Getting very confused, you know when you know something and others don't and it is "so" simple to understand and they don't get it, thats how I feel now. I am sure it is so simple and frustrating for others that do "know". I feel lame asking these questions!!

Would this fix the IE problem?
<!--[if IE]><link rel="stylesheet" type="text/css" href="all-ie-only.css" /><![endif]-->

And this
#someId{margin-left:20px;color:000;padding:20px}
#someId,x:-webkit-any-link{margin-left:10px;color:#FFF}
#someId,x:-moz-any-link{margin-left:35px;color:#FFF}
..fix most of the other browser prblems?

@Jazajay "Code it up", I assume this means write code for?

As I said headache! Sorry!!!!! :(
 
@Alex :lol:
First off there are never any stupid questions, just stupid answers, so do not worry, ask away. :D
At the end of the day if its something you don't understand its something millions of others also don't know so you are never alone, even if you think its stupid and other people are thinking jease, trust me they really are not.

I once asked what an A tag does and how you link two pages together when someone clicks some text, I learnt how to by that question. :)

Right, lets give you a proper working example of a custom PHP template which with a small learning curve and maybe a few questions, you can pick up and take to other projects. If you need any more clarification fire away with what you need and could do with understanding the process better. But in the end this will get you into a far better approach to coding websites and maintaining them in the future.

The aim of below is to give you a working understanding of your own template system where all your separate areas are separated. That way you only need to change the actual "page" content by opening the file for that page, everything else is in its own files, titles in this case but you can get really creative.

So with have our main logic:

Index.php
<?php
define("PAGE","home"); // Change home to a new name if you create a new page,
require_once"inc/header.php";//All our header html and logic is in here
?>

<div id="main-body-content">
Main Home page content goes in here
</div>

<?php require_once"inc/footer.php";//Footer content in here
?>


header.php (Located in a directory called inc off your root/main directory, normally public_html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="en" dir="ltr">
<head>

<?php require_once"inc/title.php";?>
<link href="css/main.css" rel="stylesheet" type="text/css" screen="print" />
<!--[if IE]><link href="css/allIEStyles.css" rel="stylesheet" type="text/css" screen="print" /><![endif]-->
<!--[if IE 8]><link href="css/ie8styles.css" rel="stylesheet" type="text/css" screen="print" /><![endif]-->
</head>
<body>
<div id="wrap">
<div id="head">
Header goes in here
</div>


Footer.php (Located in a directory called inc off your root/main directory, normally public_html)
<div id="foot">
Footer goes in here
</div>
</div>

<?php //End of wrap tag?>
</body>
</html>


Title.php (Located in a directory called inc off your root/main directory, normally public_html)
<?php
if(isset(PAGE)){
/*Test to see if the page to our new template system has a page name, if it has test it to see which page we are on and then which title and metas to output.
*/

switch(PAGE){
case "home":
?>
<title>Home page</title>
<meta name="description" content="Home page meta description" />

<?php
break;
case "about":
?>
<title>About us page</title>
<meta name="description" content="about us meta description" />

<?php
break;
case "contact":
?>
<title>Contact us page</title>
<meta name="description" content="Contact us meta description" />

<?php
}
}
?>


Lets say our header is out to the left by 5px in Chrome and Safari, 10px in Opera, 20px in Firefox, 5px in Ie9, 30px in Ie8. So to correct it x-browser we would write the following into the style sheets.

style.css
body{font-family:80% Tahoma}
#wrap{width:990px;margin:0 auto}
#head{margin-left:-10px} /*Sorts it in Opera*/
#head,x:-webkit-any-link{margin-left:-5px} /*Sorts it in Chrome and Safari*/
#head,x:-moz-any-link{margin-left:-20px}
/*Sorts it out in Firefox*/


allIEStyles.css (Located in a directory called css off your root/main directory, normally public_html)
#head{margin-left:-5px}

ie8styles.css (Located in a directory called css off your root/main directory, normally public_html)
#head{margin-left:-30px}

Then the about us page would be simply:

about-us.php
<?php
define("PAGE","about"); // Change home to a new name if you create a new page,
require_once"inc/header.php";//All our header html and logic is in here
?>

<div id="main-body-content">
About us page content goes in here
</div>

<?php require_once"inc/footer.php";//Footer content in here
?>


Then any other pages would be the same, change the PAGE defined variable and add a new case to the switch in the title.php file to give it a custom title element, and meta if you think it needs it.

If you do get any PHP errors, when you get your PHP environment working, let me know as I just wrote that off the cuff.

It may look dauting, but its really easy to get your head around and when you do makes your life so much easier, sheds time of development and adds years to your life. :D

If you get stuck, or any one else give us a shout.

Any other different questions just start a new thread and I'm sure someone on here will stop by and let you know the answer/help you resolve it.

If its a code problem be specific with code examples, not the entire lot though, just where you think the problem is. :)
 
Alex B said:
Thanks for the replies guys.:) :)

@Chris: Not to sound a complete newbie but won't that just solve the IE problem not the firefox, chrome and other browsers that will pop up over the years.

@Webian: Sorry you have lost me, I thought I was.....ok at web design, not any more :(

Unfortunately it's the way it is. If it gets fixed, hopefully soon, we won't have to compensate for it.
 
It may look dauting

..you think!!! haha

Wow that is alot to take in. I see the code and I am trying to link each part up. Its 23:23 at the moment and I have just finished a 12hr shift so nothing will happen just yet put with this and the PHP problem fixed (another thread, again thanks) I can start to build a cleaner coded site and without so many grey hairs. :)
 
Remember with your stupid server configuration to put a hard break in between all the tags. Unreal. :lol:

But if you run into any problems let us know and I'm sure someone or myself will help you out
 
Ooooo don't get me started, way, way too much utterly useless code for so little reward in todays browsers IMHO as these days you only really need 3 or 4 fixes tops. :)
 
Back
Top