CSS for lunch

Styling select dropdown with Javascript replacement

Brice Lechatellier — Fri, 07 Nov 2008 01:02:34 +0000

My main issue was the lack of control on the look of select dropdown, especially with IE if an option width is wider than the select initial width. Firefox deals with that issue by automatically increasing the list but unfortunately IE cuts off the text.

I’ve been using the Mootools Javascript library to automatically hide the select tag and build list on the fly.

The good thing with that method is that you can style your list, wrap text, define headers, add smooth transitions without compromising accessibility.

You can get an idea on how to implement it by looking at the Fancy Form Class or the elSelect script.

Dreamweaver Fails Conditional Comments

Kevin Cupp — Thu, 16 Oct 2008 00:43:54 +0000

If you create Dreamweaver templates for yourself or clients and have pages in multiple subdirectories, you’ll notice Dreamweaver fails to update the relative path to the IE stylesheets if you use conditional comments for them. Because they’re comments, Dreamweaver ignores them. Luckily, Dreamweaver has a plethora of parameters to get around almost any problem, so here’s how we fix this one:

<!– TemplateParam name=”ie6″ type=”URL” value=”../stylesheets/ie6.css” –>
<!– TemplateParam name=”ie7″ type=”URL” value=”../stylesheets/ie7.css” –>
<!–[if IE 6]><link rel=”stylesheet” href=”@@(ie6)@@” type=”text/css”
charset=”utf-8″ /><![endif]–>
<!–[if IE 7]><link rel=”stylesheet” href=”@@(ie7)@@” type=”text/css”
charset=”utf-8″ /><![endif]–>

Put that into your master template and you should be good to go!

I searched all over Google for a fix to this problem and none was to be found, so I hope people are able to find this one.

Conditional Comments Fix IE Bugs

Kevin Cupp — Sat, 11 Oct 2008 04:26:46 +0000

As pointed out in some earlier comments, there’s a great way to fix IE bugs without hacks or relying on one browser bug to solve another one. I present to you conditional comments.

<!--[if IE 6]><link rel="stylesheet" href="stylesheets/ie6.css" type="text/css" media="all" /><![endif]-->

Yes, you read that correctly. If the browser is IE6, apply these styles. It’s that simple.

Other browsers will just pass this aside as a regular HTML comment, but the IE browsers will recognize the “if” statement and apply your fixes! And as a bonus, it validates! There’s many more ways to configure this that’ll make life easier, so I’ll pass on these links to you. Enjoy, and happy bug-squashing!

P.S. This may also be a good use for conditional comments with IE6:

<!--[if IE 6]>Why on Earth are you still using IE6? <a href="http://getfirefox.com">Get Firefox today!</a><![endif]-->

CSS Specificity

Kevin Cupp — Thu, 09 Oct 2008 01:38:03 +0000

I had never heard of CSS specificity until I started my new job as a web developer, and let me tell you, it’s quite interesting. Now tell me, which style do you think would win if they are printed in this order in the style sheet?

a#a-02 { background-image : url(n.gif); }
a[id="a-02"] { background-image : url(n.png); }

Will you get a PNG or a GIF? The answer is: GIF.

When I thought of cascading style sheets, I always thought it meant that a style will override another if it’s further down in the file. But actually, the cascade is down the class of selector types used. In this case, a standard ID selector wins over an attribute selector. Instead of getting into all the math mumbo jumbo, I’ll turn it over to Andy Clarke who will explain CSS specificity in terms of Star Wars, something we can all understand.

Using an image for a submit button

Andrew Mager — Sun, 07 Sep 2008 22:08:15 +0000

It’s pretty easy, you just have to use type="image" in your tag:

CSS hack for Firefox only

jerang — Wed, 03 Sep 2008 18:27:35 +0000

I have been in a few situations (very few) where I want a page to look different in Firefox. Here’s a little snippet of how you could code it. Please note that this CSS will not validate but will work perfectly fine.

/*"className" is your class or ID*/
/*FireFox 2 */
.className, x:-moz-any-link {font-weight:bold;} 

/*FireFox 3*/
.className, x:-moz-any-link, x:default {font-weight:bold;}

Have you encountered any other hacks for firefox?

Update: Please note that you may have to write a hack for IE7

Styling the horizontal rule

Andrew Mager — Sun, 27 Jul 2008 19:16:04 +0000

It’s never good practice to use HTML elements as presentation elements, but sometimes you gotta use an

color: #000;
background-color: #000;
height: 4px;
border: none;

Note that you have to specify the color and background color so it works in IE.

Quick and easy IE hack for CSS

Nick Moorman — Sat, 26 Jul 2008 15:07:11 +0000

As you probably know, Internet Explorer has a bad habit of butchering CSS. While working on a project the other day, I came across a quick way to fix CSS that looks great in all browsers except for IE. If you weren’t aware (I wasn’t!), the underscore character preceding any property in a CSS declaration marks that line as a comment, and most browsers will ignore it when it renders the page. However, Internet Explorer is blind to this, thus rendering the “commented out” element anyway. This can be used to your advantage. Say you need a div to have a width of 750 pixels in any browser except IE, in which it needs to be 760 pixels instead. Simple! Your code would look like this:

#id {
    width:750px;
    _width:760px;
}

And, voila! Internet Explorer will now render the div’s width differently than other browsers.

Blank XHTML Template

Andrew Mager — Thu, 03 Jul 2008 17:58:01 +0000

You can’t get very far with CSS unless you have some standard HTML. My favorite flavor of hypertext markup is XHTML 1.0 Transitional. Here is a fresh template:



  
    Blank XHTML 1 Transitional Page

Let’s hope the Googlebot indexes this near the top so you don’t have to search around for a standard XHTML template.

Get rid of that dotted border

Andrew Mager — Wed, 18 Jun 2008 21:08:52 +0000

Many times, when you click on someone’s logo, you see that little dotted border around the image when you click it. I think it looks sloppy.

There is an easy CSS fix for this:

a { outline: none; }

Try it.