conditional stylesheet

[tomzo]

Howdy,

I have some browser issues that I want to get around using php in my stylesheet. I've been following the technique outlined here, http://www.stylegala.com/articles/no_more_css_hacks.htm. I put this line into my html_header.php file:

<link rel="stylesheet" type="text/css" href="includes/templates/my_template/css/stylesheet.php" />

and renamed the stylesheet.css file so it isn't found. In the stylesheet.php file I dumped my stylesheet between these comments /* BEGIN CSS RENDERING */ and /* END CSS RENDERING */. But when I view the site no styles are being applied though the link is in the source.

Can anyone tell me if I'm missing something.

Here's the stylesheet.php file with cut down css to save scrolling, there's no php in the css as yet as I want to get it displaying first.

<?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" && $v >= 5) { ?>

/* BEGIN CSS RENDERING */

...my css with no php currently

/* END CSS RENDERING */

<?php } ?>

Thanks for any help, I'm stuck on this.

[Kim]

What are the specific problems you are trying to fix?

[tomzo]

The problem is that the stylesheet does not seem to be detected. So when I go to the site there are no styles rendered, just a white background and the unstyled content. When I view source the stylesheet is linked and is stored at the correct location!!

[DrByte]

The /includes/.htaccess file distributed with Zen Cart specifically blocks *.php files from being accessed directly ... because that typically presents a security risk. (And changing that adjusts the risks ...)

You'll need to add another .htaccess file in your css folder to allow *.php file access or remove the restriction from the /includes/.htaccess ..... or a combination of both.

[DrByte]

I believe Kuroi posted some ideas recently about how to use conditional stylesheets with Zen Cart.

Might be worth the read, as the solution was quite simple to implement and accomplishes similar results to what you were targetting, although in a slightly different way.

[tomzo]

DrByte thanks. thats exactly what I wanted to know. I'll read kuroi article also, sounds like it will be very helpful.

[kuroi]

Hi tomzo.

Like you I hate hacks and David Hellsing's approach is an innovative, interesting, well-written and well-documented solution. However, it is also, I believe, destined to rest on the periphery of web development. It's an approach that is integrated into the core of some of the more user-friendly CMS, but is not really appropriate for everyday web development. I'd better explain.

The W3C has gone to great lengths to create standards that support the separation of content from presentation on web sites. In the PHP world, content is usually produced by developers using PHP & SQL. Presentation is done by designers using CSS. Although for many web sites the same person fulfills both roles, requiring a developer's skills (albeit at a low level) to maintain presentational information compromises this separation. And it's unnecessary. I'd better explain that too!

Rather than embedding the logic for determining which styles are used into the stylesheets, better practice is to wrap that logic around the stylesheets and take advantage of CSS's override capabilities. There is an example of this in the downloads section which deals with far and away the most common reason for needing browser specific stylesheets - Internet Explorer.

If your problem isn't specifically IE-related, then you could insert the OS/browser detection code into your html_header file to target other browsers (better still would be to set it up as a proper function in the extra_functions directory and inert a call to it instead). But this rather brings us back to Kim's question as to what specific problems you are trying to fix. (She means with your site rather than the specific solution you are trying to implement.)

[tomzo]

Hi Kuroi,

As you guessed it's an IE7 problem I'm having or rather I put in a hack to fix IE6 but since ms have jumped on the standards bandwagon, at last, my hack doesn't work in IE7. Basically without it my nav bar gets upset in lower versions of IE. If you have IE7 check it out, http://www.healingharvest.ie . Maybe theres a different work around? I haven't had a lot of time to sit down and work it out.

The hack:

/* IE hack!! */
html>body #navCatTabs ul {
position:relative;
top:4px;
}

Thanks
T

[kuroi]

I suspect that your problem is rather more basic and probably doesn't need a hack at all. I've looked at your site across a range of browsers and the nav bar is in slightly varying positions on all of them.

The reason for this is most likely that standards specs don't define absolutely everything and when they don't the browser manufacturers fill in the gaps. Sometimes they do the same things, sometimes they do radically different things.

One of the things that do differently is work out how much margin to apply to unordered list (i.e. <ul> tags). So a big part of your problem here appears to be that your menu starts in a different place in each browser. Rather than trying to hack them into alignment, I recommend applying a margin-top value to #navCatTabs ul so that they all start in the same place.

A second problem is that the tabs appear to be slightly different heights across the browsers. The problem here would seem to be that you have defined the height of the div that contains them (#navCatTabsWrapper) in pixels (36px) but have then defined their font-size first as a % (in #navCatTabsWrapper) and then in ems (1.2em) in the anchor tag (<a>) definition. As each of the browsers seems to produce slightly different results when they calculate non-px denominated font sizes, mixing the units is producing small but significant variations between browsers. I recommend using a consistent set of units across all the elements that make up your menu bar.

[tomzo]

Thanks for the help, I was able to clean up the css a lot and avoid using any hacks.