don’t mess up the shorthand font property!
|
May 8, 2009 – 1:53 pm
|
By Carl Harris
Normally I use verbose font property declarations, where you have a number of discrete property/value pairs for each attribute of the piece of text you’re formatting:
font-family
font-size
font-weight
font-style
The benefit to this is that you can override one property, like font-size, while leaving the other properties untouched to inherit whatever the parent styles are.
Sometimes, however, it’s fun just to use the shorthand font property and set everything in one go, like this:
font:.92em/1.4 Helvetica,sans-serif;
…but beware! The shorthand font property takes line-height as one of its values, which is retarded. So if you have a line-height set for a container, and you want everything inside to inherit that line-height, and you need to override the font properties for a particular block, you have to explicitly re-declare that line-height if you use the font shorthand, otherwise your new block is going to revert to line-height:normal.
The correct basic syntax for using the shorthand font declaration is:
font:.SIZE/LINE-HEIGHT FONT-FAMILY;
… or …
font:.92em/1.4 Helvetica,sans-serif;
Styling select dropdown with Javascript replacement
|
November 6, 2008 – 5:02 pm
|
By Brice Lechatellier
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.
Categories Hack, Presentation
Tagged CSS, form, Hack, ie, javascript, mootools
Conditional Comments Fix IE Bugs
|
October 10, 2008 – 8:26 pm
|
By Kevin Cupp
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="./a><![endif]-->
Categories HTML, Hack, Presentation
Tagged ie6
CSS Specificity
|
October 8, 2008 – 5:38 pm
|
By Kevin Cupp
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.
Categories CSS-3
Tagged CSS, specificity
Using an image for a submit button
|
September 7, 2008 – 2:08 pm
|
By Andrew Mager
It’s pretty easy, you just have to use type="image" in your <input /> tag:
<input type="image" src="./images/200806/btn-submit-CAST-182x24.gif" />
Categories HTML
Tagged img input submit type image
CSS hack for Firefox only
|
September 3, 2008 – 10:27 am
|
By jerang
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
Categories CSS-3, HTML, Hack
Tagged CSS, css hack, hacks
Styling the horizontal rule
|
July 27, 2008 – 11:16 am
|
By Andrew Mager
It’s never good practice to use HTML elements as presentation elements, but sometimes you gotta use an <hr />.
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.
Categories HTML Elements, Presentation
Tagged hr, not standard
Quick and easy IE hack for CSS
|
July 26, 2008 – 7:07 am
|
By Nick Moorman
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.
Categories Hack, Presentation, Standards
Tagged Hack, ie
Blank XHTML Template
|
July 3, 2008 – 9:58 am
|
By Andrew Mager
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:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Blank XHTML 1 Transitional Page</title>
</head>
<body>
</body>
</html>
Let’s hope the Googlebot indexes this near the top so you don’t have to search around for a standard XHTML template.
Categories HTML, Standards
Tagged HTML, template
Dreamweaver Fails Conditional Comments
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.