Bad Opera Ident's

[ehime]

Using this script for browser ident to serve custom CSS
per browser, unfortunetly Opera browser freaks out my
script and returns values of all browser, not one single
browser which I thought was extremely weird. Is there
something that I miffed? http://192.168.168.8/xampp/test.html

<?php
header("Content-type: text/css");
$d = detect();
$b = $d['browser'];
$v = $d['version'];
$o = $d['os'];
function detect()
	{
	$browser = array ("IE","OPERA","MOZILLA","NETSCAPE","FIREFOX","SAFARI");
	$os = array ("WIN","MAC","LINUX");
	$info['browser'] = "OTHER";
	$info['os'] = "OTHER";
	foreach ($browser as $parent)
		{
		$s = strpos(strtoupper($_SERVER['HTTP_USER_AGENT']), $parent);
		$f = $s + strlen($parent);
		$version = substr($_SERVER['HTTP_USER_AGENT'], $f, 5);
		$version = preg_replace('/[^0-9,.]/','',$version);
		if ($s)
			{
			$info['browser'] = $parent;
			$info['version'] = $version;
			}
		}
	foreach ($os as $val)
		{
		if (eregi($val,strtoupper($_SERVER['HTTP_USER_AGENT']))) $info['os'] = $val;
		}
	return $info;
	}
?>

<?php if ($b != "OTHER" && $o != "OTHER" && $d >= 5) { ?>

/* BEGIN CSS RENDERING */

BODY {

background: #FFF;
font-family: kartika;
color: #000;
}

.content {
	font: medium kartika;
	}

IMG.figure {
	float: left;
	margin-bottom: 10px;
	padding: 10px;
	}

.border {
	border: 1px solid #000;
	margin-right: 15px;
	}

.content H3 {
	font: normal bold x-large kartika;
	margin-bottom: -15px;
	}

.horiWrap {
	width: 700px;
}

.vertWrap {
	height: 200px;

}
.content P {
	text-indent: 5px;
	font-size: 1em;
}

.positioner {
	position: absolute;
	float:left;
	top:300px;
	left:5px;
}

.box {
	position: absolute;
	top:215px;
	left:<?php
    if ($o == "WIN" && $b == "IE" && $v < 6) echo "300px;","\n";
    else echo "290px;","\n";
    ?>
	float:left;
	width:407px;
	height:75px; 
	border-color:#333333; 
	border-width:3px; 
	border-style:double; 
	overflow-y:hidden;
	overflow-x:scroll;
}

/*Tech Bar Classes
=====================*/

.barList {
	position: relative;
	z-index: 100;


}

	div.outer {
		float: left;
		margin-bottom:-30px;
		width: 120px; height: 45px;
		background: url( '../images/over.png' ) 0 -50px no-repeat;
		overflow: hidden;
		}

	div.outer a {
		text-align: center;
		display: block;
		margin: 0; padding:5px 0 6px 0;
		width:100%; height:100%;
		overflow:hidden;
		font: regular 9px/Helvetica, serif;
		color:#f20265;
		text-decoration: none;
		background: url( '../images/over.png' ) top left no-repeat;

		}

		div.outer a:hover {
		background-image: none;
		color: #565656;
		}
	div.outer a:active {
		color: black;
		}	


/*Clear Classes
=====================*/
.clear:after
{
	content: ".";
	display: block;
	height: 0;
	font-size: 0; /*[e]0: clear: both*/
	visibility: hidden;
}
.clear
{
	min-height: 1px;
}
* HTML .clear
{
	height: 1px;
}
<?php
echo ($b =="OPERA") ? null : ".opera { display: none; }\n";
echo ($b =="IE") ? null : ".ie { display: none; }\n";
echo ($b =="FIREFOX") ? null : ".firefox { display: none; }\n";
echo ($b =="MOZILLA") ? null : ".mozilla { display: none; }\n";
echo ($b =="NETSCAPE") ? null : ".netscape { display: none; }\n";
echo ($b =="SAFARI") ? null : ".safari { display: none; }\n";
?>

/* END CSS RENDERING */

<?php } ?>

[NogDog]

The USER_AGENT HTTP header is (1) completely optional and (2) completely free-form, as far as the HTTP specifications go. Therefore, anything (or nothing) can be sent in it. As a result, depending upon it for anything other than usage information is risky at best.

Realistically, though, this should be a non-issue. Any reasonably current version of any of the major browsers should be able to render the page OK if you aren't trying to do really obscure things with your CSS/styling. And if the sometimes problematic IE gives you troubles, you can use IE conditional comments on the client side to tweak it, avoiding any browser-guessing on the server side.

[ehime]

unfortunetly what I'm doing is almost completely browser specific, so
obscure CSS'ing is pretty much on the nail. It unfortunetly is a serious
issue since I'm coding seperatley for IE, Moz, Opera, FF, and Safari.
The way each browser handles my coding is off in different directions
and I need to be fairly exact (within pixels). It sucks, really bad, but
its the best I can manage.

[nrg_alpha]

Out of curiosity, why are you doing this almost completely browser specific?
Can you not code something that is tested and refined to work on all major browsers?

One point to mention.. I noticed you are using ereg.. my advice: Use preg instead, as support for POSIX is going to be dropped as of PHP 6.

Oh, and welcome to PHPBuilder.

Cheers,

NRG

[Weedpacket]

ehime wrote:

IE, Moz, Opera, FF, and Safari.

You're missing Chrome from that list (it uses basically the same rendering engine as Safari). Oh, and Netscape is dead (and even when it was alive it was Mozilla); and Firefox is a Mozilla application.

One point to mention.. I noticed you are using ereg.. my advice: Use preg instead, as support for POSIX is going to be dropped as of PHP 6.

Actually, for this task I'd recommend [man]get_browser[/man].

[nrg_alpha]

Weedpacket;10888945 wrote:

Actually, for this task I'd recommend [man]get_browser[/man].

nice little function. I'll be sure to 'integrate that into my repertoire'. 🙂

Of course, without the browsercap ini directive set, this function won't do much good.

My point being though was to stop using ereg in the event of regex.

[ehime]

nrg_alpha;10888911 wrote:

Out of curiosity, why are you doing this almost completely browser specific?
Can you not code something that is tested and refined to work on all major browsers?

there just doesn't seem like a middle ground with the browsers, otherwise I
would, everything shifts depending on pixel placement and I'm using position
absolute on a lot of my stuff, so pixel count, browser, and such just throw
everything out the window. Which isn't any fun since I have to code things
three times instead of once, but on the otherhand its forcing me to learn PHP5
so it can't be all that bad. Besides, this lets me circumvent so many browser
hacks that in the end it truly seems like a good system.

Weedpacket;10888945 wrote:

You're missing Chrome from that list (it uses basically the same rendering engine as Safari). Oh, and Netscape is dead (and even when it was alive it was Mozilla); and Firefox is a Mozilla application.

I'm using Safari in place of chrome, though I'm testing it from googles chrome
browser, there is yet to be one instance of netscape in my code, and I guess
that it's there just for completion. Would you recommend that I replace NN &
Moz with just the FF tag and call it good then?

[nrg_alpha]

ehime;10889000 wrote:

there just doesn't seem like a middle ground with the browsers, otherwise I
would, everything shifts depending on pixel placement and I'm using position
absolute on a lot of my stuff, so pixel count, browser, and such just throw
everything out the window. Which isn't any fun since I have to code things
three times instead of once, but on the otherhand its forcing me to learn PHP5
so it can't be all that bad. Besides, this lets me circumvent so many browser
hacks that in the end it truly seems like a good system.

Well, all browsers interprets CSS slightly differently.. but this in no way should effect an overall design if done properly. I have managed to get my site working across all major up-to-date browsers without resorting to making multiple css files.. You're just making much more work for yourself than needed. Besides.. if you need to update your css, you'll need to do this multiple times.. not the most efficient setup IMO.

[ehime]

if you know a better way, don't hold out :glare: I'm dying trying to get this
together. You can see a local sample of what I'm doing here it's a template
http://192.168.168.8/xampp/test.html
that will take the place of over 1k products so I really need it right and
unbreakable. Which is were my little css cross browser quirks are kicking
my ass.

How do I use the get_browser function to return something usable to my
script. This is quickly getting over my head as far as my php skills go.

[nrg_alpha]

ehime;10889006 wrote:

if you know a better way, don't hold out :glare: I'm dying trying to get this
together. You can see a local sample of what I'm doing here it's a template
http://192.168.168.8/xampp/test.html

The way I do it is simly using some common valid CSS 2.1 code with valid (x)html.

In case you are unaware, you can check this using the W3C html validator as well as the W3C CSS validator.
There has been instances in my site development where the css and xhtml is correct, yet say IE doesn't quite display something like all the other browsers.. so I experimented with putting that portion that is 'misbehaving' into a div on its own and this did the trick.. it boils down to trouble shooting and experimentation. There is no magical formula for this unfortunately.

Also, I cannot access http://192.168.168.8/xampp/test.html.

[Weedpacket]

ehime wrote:

Would you recommend that I replace NN &
Moz with just the FF tag and call it good then?

The Mozilla rendering engine is called Gecko, the one used by Safari and Chrome is called Webkit, and both strings appear in the user agent (as appropriate). Since you're doing this to try and customise your CSS you need to keep in mind, too, that IE5.5, IE6, IE7, and IE8 all handle CSS differently so you'd need to take version numbers into account as well. Better just to have one CSS file that works.

nrg_alpha wrote:

Also, I cannot access http://192.168.168.8/xampp/test.html

You'd be able to if you were on the same local network 🙂

[Weedpacket]

ehime wrote:

Would you recommend that I replace NN &
Moz with just the FF tag and call it good then?

The Mozilla rendering engine is called Gecko, the one used by Safari and Chrome is called Webkit, and both strings appear in the user agent (as appropriate). Since you're doing this to try and customise your CSS you need to keep in mind, too, that IE5.5, IE6, IE7, and IE8 all handle CSS differently so you'd need to take version numbers into account as well. Better just to have one CSS file that works.

nrg_alpha wrote:

Also, I cannot access http://192.168.168.8/xampp/test.html

You'd be able to if you were on the same local network 🙂

[ehime]

Well I got it leaned out (the code that I'm using at this moment). It pops back IE
( all flavours as one IE ver, which needs to be remedied still 😉 ), Safari which has
been rendering my chrome browser, and Firefox, since I was having so many small
problems getting Opera to render my else statement is hijacking Opera and which
default other browsers into an Opera environ (which is bad and needs to be fixed).
I still need a lot of coding in there but I have it off the ground atleast.

PHP Coding

<?php
header("Content-type: text/css");
$d = detect();
$b = $d['browser'];

function detect()
	{
	$browser = array ("IE","MOZILLA","FIREFOX","SAFARI");
	$info['browser'] = "OTHER";
	foreach ($browser as $parent)
		{
		$s = strpos(strtoupper($_SERVER['HTTP_USER_AGENT']), $parent);
		$f = $s + strlen($parent);

	if ($s)
		{
		$info['browser'] = $parent;

		}
	}

return $info;
}
?>

<?php { ?>


/* BEGIN CSS RENDERING */

#outerDisplay {
	width: 200px;
	}

/*   	Body and Wrappers
=====================================*/

BODY {

background: #FFF;
font-family: sans-serif;
font-size: 10px;
color: #000;
}

#outerDisplay {
	width: 700px;
	}


.border {
	border: 1px solid #000000;
	margin-right: <?php
    if ($b == "SAFARI" ) { echo "15px;\n"; }
    elseif ($b == "IE") { echo "0px;\n"; }
	elseif ($b == "FIREFOX") { echo "15px;\n"; }
	else echo "15px;\n"; 
    ?>
	}

.horiWrap {
	width: 710px;
	}

.vertWrap {
	height: 350px;
	}

IMG.figure {
	float: left;
	padding: 10px;
	}

/*   	Content
=====================================*/

.content {
	font-family: sans-serif;
	font-size: 16px;
	}


.content H3 {
	font-family: sans-serif;
	font-size: 24px;
	font-style: bold;
	margin-bottom: -15px;
	<?php 
	if ($b == "IE")  echo ";\n"; 
	?>	}

.content P {
	text-indent: 5px;
	font-size: 0.9em;
}

/*   	Image Box
=====================================*/

<?php if ($b == "IE")  echo 

"	
	div#ieborderfix {
		float: left; 
		width: 250px;
		height: 250px;
		text-align: center; 
		background: white;
		color: black;
		border: solid black 1px;
		border-width: 1px 1px 1px 1px; 
		padding: 10px 9px 2px 8px;
		margin-right:10px;
		}

div#ieborderfix img {
	height: 250px; width: 250px;
	}
";
?>
#box {
	position: absolute;
	top:<?php
    if ($b == "SAFARI" ) { echo "200px;\n"; }
    elseif ($b == "IE") { echo "216px;\n"; }
	elseif ($b == "FIREFOX") { echo "216px;\n"; }
	else echo "199px;\n"; 
    ?>
	left:<?php
	if ($b =="IE" ) { echo "298px;\n" ; }
	elseif ($b == "SAFARI") { echo "290px;\n"; }
	elseif ($b == "FIREFOX") { echo "292px;\n"; }
	else echo "290px;\n" ;
	?>
	float:left;
	width:<?php
    if ($b == "SAFARI" ) { echo "409px;\n"; }
    elseif ($b == "IE") { echo "408px;\n"; }
	elseif ($b == "FIREFOX") { echo "407px;\n"; }
	else echo "410px;\n"; 
    ?>
	height:75px; 
	border-color:#333333; 
	border-width:3px; 
	background-color:#fff;
	border-style:double; 
	overflow-x:scroll;
	overflow-y:hidden;
	white-space: nowrap 
}

/* 		Tech Bar Classes
=====================================*/

.positioner {
	position: absolute;
	float:left;
	top:<?php
    if ($b == "SAFARI" ) { echo "288px;\n"; }
    elseif ($b == "IE") { echo "300px;\n"; }
	elseif ($b == "FIREFOX") { echo "305px;\n"; }
	else echo "290px;\n"; 
    ?>
	left:7px;
}

#barList {
	position: relative;

}

	div.outer {
		float: left;
		margin-bottom:-30px;
		width: 120px; height: 45px;
		background: url( '../images/over.png' ) 0 -50px no-repeat;
		overflow: hidden;
		}

	div.outer a {
		text-align: center;
		display: block;
		margin: 0; padding:7px 0 6px 0;
		width:100%; height:100%;
		overflow:hidden;
		font: regular 9px/Helvetica, serif;
		color:#f20265;
		text-decoration: none;
		background: url( '../images/over.png' ) top left no-repeat;

		}

	div.outer a:hover {
		background-image: none;
		color: #565656;
		}

	div.outer a:active {
		color: black;
		}	


/* 		Clear Classes
=====================================*/
.clear:after {
	content: ".";
	display: block;
	height: 0;
	font-size: 0; /*[e]0: clear: both*/
	visibility: hidden;
	}

.clear {
	min-height: 1px;
	}

* HTML .clear {
	height: 1px;
	}


/* END CSS RENDERING */

<?php } ?>

HTML Coding

<html>

<head>
		<link rel="stylesheet" href="css/lytebox.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="css/styles.php" type="text/css" media="screen" /> 

		<script type="text/javascript" language="javascript" src="js/lytebox.js"></script>
		<script type="text/javascript" language="javascript" src="js/swaplayers.js"></script>

</head>

	<body>

	<div class="horiWrap vertWrap">

	<div id="ieborderfix">
	<img class="figure border" src="images/aurora001.jpg" width="250px" height="250px" />
	</div>
			  <div class="content"><h3>Aurora</h3>

				<!-- "<p> indent new lines" -->

				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla iaculis diam quis orci. Morbi sagittis iaculis quam. Nunc 
				malesuada dolor a tellus. Nam ligula dolor, faucibus eu, hendrerit eget, facilisis vitae, magna. Fusce molestie arcu non dui. 
				Donec non augue vitae felis fermentum scelerisque. Praesent iaculis fringilla lorem. Suspendisse nibh. Phasellus pretium 
				consectetuer ligula. Aenean erat. Integer quam quam, ornare ut, fermentum vitae, eleifend eu, massa. Suspendisse potenti. 
				Suspendisse scelerisque.



			</div>

				<div id="box">

					<!-- Insert IMG Here -->

					<a href="images/aurora001.jpg" rel="lytebox[product]" title=""><img src="images/aurora001-ico.jpg" height="50px" width="50px" style="border:1px solid; margin: 3px;"></a>
					<a href="images/" rel="lytebox[product]" title=""><img src="images/yata.png" height="50px" width="50px" style="border:1px solid; margin: 3px;"></a>
					<a href="images/" rel="lytebox[product]" title=""><img src="images/yata.png" height="50px" width="50px" style="border:1px solid; margin: 3px;"></a>
					<a href="images/" rel="lytebox[product]" title=""><img src="images/yata.png" height="50px" width="50px" style="border:1px solid; margin: 3px;"></a>
					<a href="images/" rel="lytebox[product]" title=""><img src="images/yata.png" height="50px" width="50px" style="border:1px solid; margin: 3px;"></a>
					<a href="images/" rel="lytebox[product]" title=""><img src="images/" height="50px" width="50px" style="border:1px solid; margin: 3px;"></a>
					<a href="images/" rel="lytebox[product]" title=""><img src="images/" height="50px" width="50px" style="border:1px solid; margin: 3px;"></a>
					<a href="images/" rel="lytebox[product]" title=""><img src="images/" height="50px" width="50px" style="border:1px solid; margin: 3px;"></a>
					<a href="images/" rel="lytebox[product]" title=""><img src="images/" height="50px" width="50px" style="border:1px solid; margin: 3px;"></a>
					<a href="images/" rel="lytebox[product]" title=""><img src="images/" height="50px" width="50px" style="border:1px solid; margin: 3px;"></a>
					<a href="images/" rel="lytebox[product]" title=""><img src="images/" height="50px" width="50px" style="border:1px solid; margin: 3px;"></a>
					<a href="images/" rel="lytebox[product]" title=""><img src="images/" height="50px" width="50px" style="border:1px solid; margin: 3px;"></a>
					<a href="images/" rel="lytebox[product]" title=""><img src="images/" height="50px" width="50px" style="border:1px solid; margin: 3px;"></a>
					<a href="images/" rel="lytebox[product]" title=""><img src="images/" height="50px" width="50px" style="border:1px solid; margin: 3px;"></a>

				</div>	

	</div><!-- "wrapper" -->
	<div class="positioner vertwrap">

		<div style="clear: both;">
		<img style="border: none;" src="images/tbarBG00.jpg" /></div>

			<div id="barList" style="margin:-31px 0 0 30px;padding-bottom:50px;">
			<div class="outer"><a onClick="loadOuter('layers/lorem.html')" href="#">Specifications</a></div>
			<div class="outer"><a onClick="loadOuter('layers/lorem.html')" href="#">Information</a></div>
			<div class="outer"><a onClick="loadOuter('layers/lorem.html')" href="#">Maintenance</a></div>
			<div class="outer"><a onClick="loadOuter('layers/lorem.html')" href="#">Safety</a></div>
			<div class="outer"><a onClick="loadOuter('layers/lorem.html')" href="#">Troubleshooting</a></div>	  

			</div>


		<div id="outerDisplay">
		<iframe id="hiddenContent" style="position:absolute;top:31px;left:0px;visibility:hidden;width:auto;height:auto;" ></iframe>		
		</div>

	</div><!-- "wrapper" -->




	</body>

</html>

SwapLayers.js

var srcFrame;

$(document).ready(function(){
  loadOuter('layers/main.html'); // ...
});

//External content into a layer
function loadOuter(doc) {
 srcFrame = document.getElementById("hiddenContent");
 srcFrame.src = doc;

 // workaround for missing onLoad event in IFRAME for NN6
 if (!srcFrame.onload) {
  setTimeout("transferHTML()", 200)
 }
}

function transferHTML(){
 srcContent='';
 if (srcFrame.contentDocument){
  srcContent=srcFrame.contentDocument.getElementsByTagName("*")[0].innerHTML;
 }
 else if (srcFrame.contentWindow){
  srcContent=srcFrame.contentWindow.document.body.innerHTML;
 }
 document.getElementById("outerDisplay").innerHTML = srcContent
}



var DocAry=new Array('');

function SelectList(v){
 if (v>0){
  loadOuter(DocAry[v-1]);
 }



}

If anyone wants to try compiling this local tell me and I'll rar all the files for you.