Question

TL;DR: I use PHP inside an external stylesheet, but it doesn’t recognize the ‘/’ as a PHP divider operator, this messes up my CSS. Any help is appreciated

I’m working on a simple website which loads the menu items dynamically from a page table in the database. with a recursive algorithm I get all the pages, and the child pages at the right place.

In this function I count the amount of main menu items.

I do this because I need to make every <li> in the main menu <ul> such a width that it covers the whole width of the menu bar. I want this to be done dynamically so that if more pages are added as a main menu item, nothing has to change, only an insert to the database.

Now my question: I read right here that it’s possible to configure Apache so that it reads CSS as PHP files. Works as a charm, nothing wrong. Now I have

<link rel="Stylesheet" type="text/css" href="<?php echo base_url().'css/css-reset.css'.'?item_count='.$menu_count; ?>" />

in my header (as you can see I pass the menu item count as a post variable). This also works. My CSS:

<?php Header ("Content-type: text/css");?>
<?php
$wrapper_width = 900;
$menu_item_count = (int)$_REQUEST['item_count'];
$menu_item_width = $wrapper_width / $menu_item_count;
?>

/*lots more boring CSS */

div#wrapper
{
text-align:left;
width:<?php echo $wrapper_width.'px'; ?>;
}

div#menu a
{
display:block;
height:1.7em;
width:<?php echo $menu_item_width.'px'; ?>;
}

And this is where a weird thing comes up. If I set the $menu_item_count to be just an int (ex: $menu_item_count=150) it works as it should. But as soon as I use the divider operator between the two variables the CSS gets messed up. other operators work.

The way I see it, the divider operator is special to CSS (because of the comments?) and it doesn’t read it as a PHP divider operator but as a CSS symbol.

I’ve tried putting it in a function, the function works, but the divider operator messes it up again.

So my questions are: Anyone ever worked with PHP in external stylesheets? If so, can you help me figure out this problem?

Answer 1

This is what went wrong: I added the query string to the wrong CSS file. Nothing wrong with the division operator or anything, just my stupid mind not working too well from staring at my monitor too long.