css

Overflow to left instead of right

I have a div with overflow:hidden, inside which I show a phone number as the user types it. The text inside the div is aligned to right and incoming characters are added to right as the text grows to left. But once the text is big enough not to fit in the div, last characters of the number is automatically cropped and the user cannot se...

Styling horizontal rules

Is there a nicer way of styling a <hr /> tag using CSS, that is cross-browser consistent and doesn't involve wrapping a div around it? I'm struggling to find one. The best way I have found, is as follows: .hr { height:20px; background: #fff url(nice-image.gif) no-repeat scroll center; } hr { display:none; } <div cla...

How Would You Recommend a Novice Get Started Using CSS?

As web based designer who has designed web sites using tables but never with css, how can a novice get started with css? Related SO posts SO - Css Book & website for CSS SO - Css blog ...

Embedding extra styles with noscript

I have an XHTML strict page that has an invisible div that is controlled by Javascript. The div is set to transparent and visible by the script and a mouseover event to make the div opaque on hover. When someone using a browser (or firefox with noscript) without javascript the div simply remains invisible. The problem with this is that ...

How do you keep parents of floated elements from collapsing?

Although elements like <div>s normally grow to fit their contents, using the float property can cause a startling problem for CSS newbies: if floated elements have non-floated parent elements, the parent will collapse. For example: <div> <div style="float: left;">Div 1</div> <div style="float: left;">Div 2</div> </div> The pa...

HTML Links and Usability

Should links on a web page ALWAYS be underlined? I do not believe this should be a hard and fast RULE! I wrote a comment on my blog awhile back about this after another developer complained that I was not following web standards. It is coming up again, and I want to know what you think. Her argument was that for consistance and usabilit...

How to change a span to look like a pre with CSS?

Is it possible to to change a <span> tag (or <div>) to preformat its contents like a <pre> tag would using only CSS? ...

JQuery Rounded Corners in Internet Explorer (IE) messed up

Hi All, I'm using JQuery's jquery.corner.js to create rounded corners on some td tags, and they look fine in IE EXCEPT if you open a new tab and then come back to the page if you go to another tab, click a link, then come back to the page if you hover over a javascript-executing div / menu (I think). The rounded corners are replace...

CSS positioning div above another div when not in that order in the HTML

Given a template where the HTML cannot be modified because of other requirements, how is it possible to display a div above another div when they are not in that order in the HTML and both divs contain data that could produce a varying height and width. HTML: <div id="wrapper">     <div id="firstDiv">         Content to be b...

Complex height in CSS

Before I explain what I'm trying to do, note that I have the good fortune of only having to target Webkit (meaning, I can use lots of neat CSS). So, basically, I want to have a block with a flexible height, position fixed, maximum height being that of the available window height, with some elements at the top and bottom of the block tha...

Width of an element accounting for quirks mode in javascript?

I've been scanning through all the popular js libraries, but I can't find one that has a width function for a DOM element that actually accounts for quirks mode in Internet Explorer. The issue is that padding and borders don't get counted in the the width when quirks mode is engaged. As far as I can tell this happens when the doctype is ...

Save CSS Related To Dreamweaver Document

I find this incredibly annoying with Dreamweaver, everytime I go to save my document I have to tab into each css file and save them individually. Not a problem with one css file, but when you have 3 or 4 it is a pain in the ass. Is there anyway to save your dreamweaver document and all related css files in one hot key? ...

How far should you break up stylesheets?

I'm building a new site for my company, and I'm at the stage where I've created the html mockup of the first page. I'm going to use this as a basis for the rest of the site. I'm thinking of organising my stylesheet better now I've got the design looking consistent cross-browser, but I'm wondering how far to go when I'm breaking it up. O...

Python script for minifying CSS?

I'm looking for a simple Python script that can minify CSS as part of a web-site deployment process. (Python is the only scripting language supported on the server and full-blown parsers like CSS Utils are overkill for this project). Basically I'd like jsmin.py for CSS. A single script with no dependencies. Any ideas? ...

How do I keep Numbered Lists indented in html/css?

How do you keep numbered lists indented using HTML/CSS? I have a page where the digits are not indented and it does not look good. Here is a sample page: http://php.wmsgroup.com/eofd6.org/volunteer.html CSS is at: http://php.wmsgroup.com/eofd6.org/in.css Thanks! ...

Website Layout: DIV Positioning and Placement

Here is the html code to a home page I am working on: Freese Custom Homes homes under construction homes completed development information contact us Floorplans A list of our current floorplans, both rambler and 2-story. You can download a pdf of each ...

@import in @media not working in Firefox 3.0.3

This is what I have, which works in IE7, but not in Firefox: @media screen { @import 'screen.css'; } It works outside of the @media block in Firefox: @import 'screen.css'; UPDATE: This works: @media screen { .yui-d3f { border: 1px solid #999; height: 250px; } } What am I missing? ...

How to print only parts of a page?

I am trying to hide some divs before the user prints this giant form, then display the divs again afterward. Thus I want to ignore the rest of the page, and only print the form itself. Sure I could open a separate page when the user clicks the print button. The only thing is that the form is really long and it would be quite tedious to ...

Why does a floated <input> control in a floated element slide over too far to the right in IE7, but not in Firefox?

Hopefully a picture is worth a thousand lines of code because I don't want to have to strip down all of the ASP.Net code, HTML, JavaScript, and CSS to provide an example (but I'll supply what I can upon request if someone doesn't say "Oh, I've seen that before! Try this...") [Actually, I did post some code and CSS - see bottom of questio...

How do you make <div>s display inline?

Given this HTML: <div>foo</div><div>bar</div><div>baz</div> How do you make them display inline like this: foo bar baz not like this: foo bar baz ...