List style images

Hi there.
Take a look please:
http://www.articlecon.com/digiben/next.html

The list on the right bar is not showing any list style images (disc/circle/decimal etc.). Why?

Well what do you need DOM detection for?

If you mean like you mentioned earlier:

Could you still use the document.all and document.layers for DOM support with javascript?

I tend to use the terms “object detection” or “feature detection” which actually is kinda what the * html #element hacks do anyway. Yes, all browsers load the code, but only those who understand it execute it. This should also be true for Javascript: everyone reads and loads the document.all vs other code, and is evaluated to see if anything can be done with it, but only what could work is executed.

It is easy to go down to hell; Night and Day the Gates of Dark Death stand wide; But to climb back up again, to retrace ones steps to the open air, there lies the problem, the difficult task.

[ot]I have changed all my user strings to make me giggle :slight_smile:
Firefox=firefux
Opera=Oprah
IE=Internet Exploder
Chrome=Crum
Safari=Saffy

[/ot]

[ot]Oh…I had such a funny one for netscape but I can’t post it here :stuck_out_tongue:

Yes that’s a nice script, however just the size of that makes me not wnat to use it, considering browser detection isn’t needed (except to just freak out the user by telling them that they know what you are using ;))[/ot]

Regardless how in-depth some of you go I still stand by my claim to avoid hacks if u can

Everyone’s goal is to avoid hacks if you can, but I see adding a whole separate stylesheet for IE6 just because it can’t understand someone’s 3 instances of min-height as bloat. And double the work looking around in multiple sheets when changing a style. To me, both are hacks. <!–[if IE]> isn’t HTML, it’s proprietary IE garbage that we are forced to use, so if I can have a more coherent, single stylesheet where all styles for an element are together, then * html has clear preference for me.

However this is my opinion/coding style, and there are plenty of developers who prefer the IE stylesheet called by CC’s because they like “keeping the main stylesheet clean”.

That is the what I used wayback when for Netscape 4 for javascript.

As you can I see my tactics are very dated because I haven’t used hacks in a couple of years.

Regardless how in-depth some of you go I still stand by my claim to avoid hacks if u can

Ryan,

I know it can be manipulated and it’s from the Netscape 3,4 days but I still like the use of lazy loading css and scripts. That way it only loads when you need it. :slight_smile:

Stomme,
If you use them everywhere you’re doing fine my friend. :slight_smile:

Could you still use the document.all and document.layers for DOM support with javascript?

here’s a nice commented php version for detecting the browser. It uses user agent as well as phrase.


<?php
function browser_info($agent=null) {
  // Declare known browsers to look for
  $known = array('msie', 'firefox', 'safari', 'webkit', 'opera', 'netscape',
    'konqueror', 'gecko');

  // Clean up agent and build regex that matches phrases for known browsers
  // (e.g. "Firefox/2.0" or "MSIE 6.0" (This only matches the major and minor
  // version numbers.  E.g. "2.0.0.6" is parsed as simply "2.0"
  $agent = strtolower($agent ? $agent : $_SERVER['HTTP_USER_AGENT']);
  $pattern = '#(?<browser>' . join('|', $known) .
    ')[/ ]+(?<version>[0-9]+(?:\\.[0-9]+)?)#';

  // Find all phrases (or return empty array if none found)
  if (!preg_match_all($pattern, $agent, $matches)) return array();

  // Since some UAs have more than one phrase (e.g Firefox has a Gecko phrase,
  // Opera 7,8 have a MSIE phrase), use the last one found (the right-most one
  // in the UA).  That's usually the most correct.
  $i = count($matches['browser'])-1;
  return array($matches['browser'][$i] => $matches['version'][$i]);
}
?>
This returns an array with the detected browser as the key, and the version as
the value, and also sets 'browser' and 'version' keys.  For example on Firefox
3.5:
<?php
$ua = browser_info();
print_r($ua);
/* Yields ...
Array
(
    [firefox] => 3.5
    [browser] => firefox
    [version] => 3.5
)
*/

// Various browser tests you can do with the returned array ...
if ($ua['firefox']) ... // true
if ($ua['firefox'] > 3) ... // true
if ($ua['firefox'] > 4) ... // false
if ($ua['browser'] == 'firefox') ... // true
if ($ua['version'] > 3.5) ... // true
if ($ua['msie']) ... // false ('msie' key not defined)
if ($ua['opera'] > 3) ... // false ('opera' key not defined)
if ($ua['safari'] < 3) ... // false also ('safari' key not defined)
?>

Haven’t had a chance to play around with it but I’d like to see how it works.

Stomme,

I agree that if there are only 1 or 2 hacks it can be managed in a single style sheet.

Not sure what you mean by this:

that’s a lot of CSS sitting in every single HTML file (since those Conditional Comments are HTML and cannot belong in a css file). The one time I did I use CC’s in the HTML, I did to call another stylesheet because I had so many hacks for IE that it did warrent a separate stylesheet.

you could reference a <link ref=“”> inside the CC.

The best thing you could do is lazy load the css through php and user agent. (Although there may be a better one to use.) That way you only load the necessary styles that are used on that particular page.

I’ve learned over the years to balance out my code without the use of hacks as much as I can. If I find myself including more than 7 or 8 for IE, I go back and review code to make it more browser friendly without having to add any CC’s.

And yes the lte 7 was just a cut and paste example. :slight_smile:

You should never use server side detection to detect what browser the visitor is using, the user agent string can always be manipulated :slight_smile:

It’s best to just code without hacks and then if IE6/7 need a helping hand (normally just IE6) you can either use the * html hack in your stylesheet (if you don’t care about validity) or just use a regular CC to have IE6 load the fixes :slight_smile:

I tried to use the list-style-type property, but it did not show any style. You can see in the code.

you want to use list-style-type

http://www.w3schools.com/css/pr_list-style-type.asp

I would also clean up your Word formatted text. It’s showing the smart quotes as ? in diamonds. Do a quick search and replace in your editor.

And try to remove the IE * hacks and place them in a conditional statement. (Be sure to set your if to the browser(s) you are targeting.


* html #container{height:100&#37;}

to


<!--[if lte IE 7]>
<style type="text/css">
#container{height:100%}
</style>
<![endif]-->

you could reference a <link ref=“”> inside the CC.

I don’t understand? I’m doing this:


    <link rel="stylesheet" type="text/css" href="default.css" media="screen, projection" />
    <!--[if lte IE 7]>
      <link rel="stylesheet" type="text/css" href="iesux.css" media="screen" />
    <![endif]-->
  </head>

That is what you mean, right? That’s what I’m doing. I wouldn’t want to have a <style> tag listing all the styles on every single page. Bloat. And my limit is more than 2 hacks… more like, it should be under 10. In the case above, I had enough display: table and inline stuff that also was hitting IE7, so that helped convince me to make a separate sheet. Otherwise, I like this:
#container {
min-height: 100%;
other styles;
}

  • html #container{height: 100%;}

If I ever change that container, all styles for all browsers is right there, just a /cont away. Right now, when I changed the height of my min-height #footer (who’s a sticky footer), I had forgotten to update that in teh iesux.css file. Arg. Later saw it looking funny in IE6. Maybe a good thing, means I’ll be forced to actually check in IE6 more often.

The best thing you could do is lazy load the css through php and user agent. (Although there may be a better one to use.) That way you only load the necessary styles that are used on that particular page.

These are pretty much basic styles all pages use, though in general I like the idea of content negotiation. In a language like Perl or Python : ) Not sure about the user-agent thing though. Browsers lie. Ryan Reese has, I believe, a browser who identifies itself as Oprah and another as Internet Exploder : )

I may have been wrong to make such generous use of the styles I mentioned, but they were just too damn useful : )

so what about DOM detection?

Thank you.

Mistaya:

you have left padding set on those li’s, but move the padding instead over to the ul itself. You’ll see your bullets then.

AtSea:

The reason I don’t do what you recommended:
that’s a lot of CSS sitting in every single HTML file (since those Conditional Comments are HTML and cannot belong in a css file). The one time I did I use CC’s in the HTML, I did to call another stylesheet because I had so many hacks for IE that it did warrent a separate stylesheet.

However I did that because I was using so much non-IE stuff: display: table, inline-block on blocks with block children, min and max widths and heights (so mostly IE6 hacks). The reason I normally like to leave a few scattered IE6 hacks directly in my main (sole) css file just as mistaya has is because I use search (ctrl-f or / in vi) to find a box I’ve styled… for everyone, all in one place. And right now I’m switching between updating two stylesheets in this one site where I have an IE-only stylesheet. This is hitting my inherent laziness very hard.

You may have a different, more managed setup than I do, though.

Off Topic:

<!–[if lte IE 7]>
<style type=“text/css”>
#container{height:100%}

You meant 6? You don’t want IE7 to set 100% height, just 6 and under.