blog@tomauger.com

Development news, browser quirks, design factoids. Good stuff.

Archive for category CSS

SELECT Tag Cuts Off Text in Firefox (2.0)

Dec 18

Posted by admin in CSS, HTML, Tips and Tricks, Web Development | No Comments

Well, I’ve been delinquent again with my regular posts here. Partially because I’m starting a new blog over at blog.zeitguys.com along with my other co-conspirators. But that’s no excuse.

Partially due to the encouragement of people who’ve stumbled upon some of my other tips and tricks, here’s a quickie that had me stumped for quite some time. I hope it’s of help.

The Issue:

When styling a SELECT tag using CSS and increasing the font size, in Explorer (7) the visual display area of the drop-down menu increases correspondingly. In Firefox, the form SELECT tag does not scale correctly – it cuts off some of the text. The larger the font size, the more the text gets cut off. This is the case regardless of whether you’re using pixels, points or ems. Line-height also has no bearing on it.

It turns out after some experimentation, and a completely random Google hit to some obscure Java CSS reference pages that gave me the idea, that in Firefox you also need to set the same font size in your OPTION tags.

So…

select, option {
	font-size:1.4em;
}

Will do the trick…

So remember, if you’re setting font-size in a SELECT tag, set the same font-size in your OPTIONs as well (unless you’re using a fixed width for the tag, in which case it doesn’t matter).

CSS Horizontal Menu: Firefox whitespace bug

Jun 22

Posted by admin in CSS, Tips and Tricks, Web Development, XHTML | 3 Comments

So I came across the most baffling bug the other day that locked me up for a good three hours. I thought maybe I’d just put down what I discovered here on the outer reaches of the blogosphere in case anyone else happens to hit that magical combination of Google keywords and a link to this page comes up.

To describe the problem succinctly: when you’re trying to create a horizontal menu using unordered lists (<ul> and inline <li>), for some reason, in Firefox (2 – I don’t know about 3 which just came out last week), if there is any whitespace between a closing </li> tag and the opening <li> tag of the next item, that whitespace actually displays. At first it looks like a margin spacing issue, but after some tests it’s clearly not. In fact, what baffles me is that ANY text between the closing </li> and the opening <li>, that text actually gets displayed inline! Which makes no sense, because I didn’t think that the <ul> element could have a text node as a direct child. Apparently it can, in Firefox at any rate.

The solution, as I have discovered is to set your <ul>’s display attribute to “table”. I don’t believe IE7 and certainly not IE6 understand display:table, so this is a non-IE fix, but then again, IE wasn’t exhibiting the whitespace behaviour. Here’s some sample code.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style type="text/css">
    *    { margin:0; padding:0; }
    ul {
        list-style-type:none;
        list-style-position:inside;
        margin:0px; padding:0px;
        display:table; /* This is used for firefox */
	/* to avoid the horizontal whitespace bug */
    }


    li {


        border:1px solid black;


        display:inline;


        margin:0px; padding:0px;


        border-collapse:collapse;


    }




    a {




    }




</style>




</head>


<body>


    <ul>


        <li><a href="#">Line 1</a></li>


        <li><a href="#">Line 2</a></li>


        <li><a href="#">Line 3</a></li>


    </ul>


    <p>Other stuff....</p>


</body>


</html>