css

What is an elegant way to force browsers to reload cached CSS/JS files?

I have noticed that some browsers (in particular, Firefox and Opera) are very zealous in using cached copies of .css and .js files, even between browser sessions. This leads to a problem when you update one of these files but the user's browser keeps on using the cached copy. The question is: what is the most elegant way of forcing the...

Select tag's size attribute through css?

Normally you can do this: <select size="3"> <option>blah</option> <option>blah</option> <option>blah</option> </select> And it would render as a selectionbox where all three options are visible (without dropping down) I'm looking for a way to set this size attribute from css. ...

How to chain pseudo selectors in SASS

I'm trying to put together a selector in SASS that will operate on the visted, hovered state of a link, but I can't quite seem to get the markup right, can someone enlighten me? I was writing it like this: &:visited:hover attribute: foo ...

How to change CSS class of a HTML page element using ASP.NET?

I have several <li> elements with different id's on ASP.NET page: <li id="li1" class="class1"> <li id="li2" class="class1"> <li id="li3" class="class1"> and can change their class using JavaScript like this: li1.className="class2" But is there a way to change <li> element class using ASP.NET? It could be something like: WebControl...

Handling a colon in an element ID in a CSS selector

JSF is setting the ID of an input field to search_form:expression. I need to specify some styling on that element, but that colon looks like the beginning of a pseudo-element to the browser so it gets marked invalid and ignored. Is there anyway to escape the colon or something? input#search_form:expression { ///... } ...

Floated Divs Obeying/Not Obeying Vertical-Align

Within a table cell that is vertical-align:bottom, I have one or two divs. Each div is floated right. Supposedly, the divs should not align to the bottom, but they do (which I don't understand, but is good). However, when I have two floated divs in the cell, they align themselves to the same top line. I want the first, smaller, div to s...

Z-index issue?

I have a div with a z-index of 0 on the default page of a site and this default page contains a iframe. One of the pages in this iframe has a popup with a z-index of 1000. However, the div still overshadows the popup in IE but works fine in Firefox Does anyone know what I can do? ...

How to line up items of varied length in a resizable space in CSS?

I'd like to line up items approximately like this: item1 item2 i3 longitemname i4 longitemname2 anotheritem i5 Basically items of varying length arranged in a table like structure. The tricky part is the container for these can vary in size and I'd like to fit as many as I can in each row - in other...

Fixed TD height property in HTML

I can't make td "Date" to have fixed height. If there is less in Body section td Date element is bigger than it should be - even if I set Date height to 10% and Body height to 90%. Any suggestions? <tr> <td class="Author" rowspan="2"> <a href="#">Claude</a><br /> <a href="#"><img src="Users/4/Avatar.jpeg" style="border-width:0...

How do I place HTML content above a Flash movie?

A site I'm working on has Flash headers (using swfobject to embed them). Now I'm required to code in a bit of HTML that's supposed to overlap the Flash movie. I've tried setting z-index on the Flash element's container and the (absolutely positioned) div but it keeps "vanishing" behind the Flash movie. I'm hoping for a CSS solution, b...

Make a <div> fade away nicely after a given amount of time

What is the best way to make a fade away after a given amount of time (without using some of the javascript libraries available). I'm looking for a very lightweight solution here not requiring a huge javascript library to be send to the browser. ...

Rounded corners, is this Mozilla specific?

I was looking at how some site implemented rounded corners, and the CSS had these odd tags that I've never really seen before. -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; I googled it, and they seem to be Firefox specific tags? ...

How do I apply css to second level menu items?

I have a menu running off of a sitemap which one of the SiteMapNode looks like this: <siteMapNode title="Gear" description="" url=""> <siteMapNode title="Armor" description="" url="~/Armor.aspx" /> <siteMapNode title="Weapons" description="" url="~/Weapons.aspx" /> </siteMapNode> I also have a Skin applied to the asp:menu which ...

Any way to remove IEs black border around submit button in active forms?

I am implementing a design that uses custom styled submit-buttons. They are quite simply light grey buttons with a slightly darker outer border: input.button { background: #eee; border: 1px solid #ccc; } This looks just right in Firefox, Safari and Opera. The problem is with Internet Explorer, both 6 and 7. Since the form is...

Why does Firefox 2 display fonts larger than specified in CSS?

I have a webpage where Firefox 2 displays the font certain, really specific elements, larger than than what I specified in the CSS. When I look at the affected element (mostly td elements as far as I can tell) with Firebug, I see that the font size is inherited from the body (11px, so its not a relative size). No styles overwrite this f...

Seeking CSS Browser compatibility information for setting width using left and right

Here's a question that's been haunting me for a year now. The root question is how do I set the size of an element relative to its parent so that it is inset by N pixels from every edge? Setting the width would be nice, but you don't know the width of the parent, and you want the elements to resize with the window. (You don't want to use...

Why is there a gap between my image and its containing box?

When my browser renders the following test case, there's a gap below the image. From my understanding of CSS, the bottom of the blue box should touch the bottom of the red box. But that's not the case. Why? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; <html xml...

How do I keep a DIV from expanding to take up all available width?

In the following HTML, I'd like the frame around the image to be snug -- not to stretch out and take up all the available width in the parent container. I know there are a couple of ways to do this (including horrible things like manually setting its width to a particular number of pixels), but what is the right way? Edit: One answer su...

IE6 issues with transparent PNGs

I've gotten used to the idea that if I want/need to use alpha-trans PNGs in a cross-browser manner, that I use a background image on a div and then, in IE6-only CSS, mark the background as "none" and include the proper "filter" argument. Is there another way? A better way? Is there a way to do this with the img tag and not with backgrou...

I need my html table's body to scroll and its head to stay put

I am writing a page where I need an html table to maintain a set size. I need the headers at the top of the table to stay there at all times but I also need the body of the table to scroll no matter how many rows are added to the table. Think a mini version of excel. This seems like a simple task but almost every solution I have found on...