CSS - Css File Caching? Is It Automatic?

Can you cache external css files (to make pages that use the same css file load faster)? If so, how?

BTW, here is how I currently load my css (from zen garden):
Code:

<STYLE type=text/css media=all>@import url(/main.css);

In what order are CSS/html files loaded? Concurrently? What about browser rendering? Must all CSS be loaded before any html is rendered?

Also aside from serverside compression / css whitespace (file) compression, removing redundant classes, and using relative paths, is there any other ways to speed loading of CSS?

Would it be of benefit splitting my css file into smaller chunk files - would they all load concurrently and therefore faster?

Does anyone have a good solution for forcing the cache of css files, but not the html calling the css?

Thanks in advance!

Ross

Whenever I roll out a new feature (including new layout) to the production version of a website I am working on, I know that it won't properly work until a user downloads a new version of the relevant CSS files. For new users this happens automatically, but existing users have to wait or hit refresh. The result is that the pages look bad for some users when I make changes.

I would fix this problem by renaming the CSS files whenever I make changes, but this can get a bit unwieldy since I use SVN for source code management. I would have to make a revision to other source code files solely to reflect a change in the CSS file.

Another idea is to control the name of the CSS file from a constant or from my database, but each has its downsides (complexity, performance in the case of the db calls).

Is there any easy way to have caching of CSS files, but somehow break through that cache when I make changes? I am guessing not since the cache is based on expiration settings set by Apache, which to be meaningful need to be long. But if you have encountered this issue before, I'd love to hear what you did!

How would I go about making the width of a <div> element as big as it needs to be depending on the amount of text.

I've got, div.note {width: auto;} but it doesn't seem to be doing anything.

(The site in question)

Sorry for being so dumb

I was wondering if there was a way with CSS, to create a box, where the text within automatically scrolls.

For example, I have a box that has a date, and then the latest news. Say that there are about 20 lines worth of text, but the box itself, is only 10, I wanted the text to scroll from bottom to top automatically. I know I could probably do something like this in flash, and I'm guessing javascript as well. But don't want to use javascript.

Any help would be appreciated. Thanks.

I would like to do automatic resizing textfield depending of resize browser. I know one solution with css style code.
for example :<input type="text" style="position:absolute;width:50%">, but it don't accommodate me. Please, exist other solution for this problem?

Is there a way to define a text style where a dash and a space is automatically inserted after the text?

If I want this:

Subtitle and then content

To look like this:

Subtitle - and then content

How can I do that?

Thanks

HTML

<div class="unitWide">
<div class="labelRight" id="appt"> Reaction</div>
<div class="widget"><input type="text" name="Name" size="30"/></div>
</div>

<div class="unitAutoHeight">
<div class="labelRight">Description</div>
<div class="widget"> <textarea name="comments"class="wideComment" rows="6" cols="28"></textarea></div>

</div>

CSS

.unitSmall, .unitWide, .unitSmaller, .unitAutoHeight, .unitPair, .unitCal {
float: left;
z-index:1;
width: 100%;
height: 2.4em;
padding-bottom: 6px;
}

.unitAutoHeight {
height: auto;
}

input, .wideComment {
font-size: 16px;
padding: 3px;
background: transparent;
background-image: url(../images/inputbackground.png);
border: none;
color: #3f3f3f;
font-weight: bold;
width: 23.6em;
}


Hi y'all, Ive got form elements (here called 'units') stacked vertically and left floated to ensure alignment in a fixed-width form.

Im trying to get the comment input box to stretch vertically, and add rows as the user inputs longer text. Basically I want to save space on the form by not specifying a predetermined number of rows (which is not the case right now, theres 6 rows), but to let it expand and not hide the overflow or worse, display a sidebar. Ive tried everything, looked in javascript forums, cant find it! Ideally it would behave like the new facebook message or wall post text box.

Thanks

I was quite proud of that title, especially at 4 minutes past monday. Anyway - I digress.

I am trying to create a scrolling news-type box using a div which is clipped so it looks like it scrolls up and down inside a 'window'. I have not declared what height i want the scrolling div to be as i never know how much text will be in it.

When you scroll all the way to the bottom, I want there to be a way so that it stops scrolling - and for this i need the height of the div.

Is there anyway of finding the height at all, or will i have to use a fixed height div.

If my explanation is a touch wooly, the prototype page is here

please see following code. (i want myHeight becomes dynamis, that mean when user resize the browser, it will be changed automatic w/o refresh the page). thank you. waitting online for the answer.
<html>
<head>
</head>
<body >

<table>
<tr><td>tasd</td></tr>
<tr><td>
<script type="text/javascript">
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}

//var height = myHeight *.8;
document.writeln("<div style='HEIGHT:" + myHeight *.8 + "; WIDTH:100%; OVERFLOW:auto'>");
//return height;
</script>
<table>
<tr><td>

msg
</td></tr>
</table>
</div>
<td>
msg
</td>
</table>
</body>
</html>

I'm trying to create a box with rounded corners. This in itself is fine - there are plenty of tutorials around for this.

They all either seem to require four divs nested in the corners of the container div. eg:

<div id="container">
<div id="topleft"></div>
<div id="topright"></div>
<div id="bottomleft"></div>
<div id="bottomright"></div>
blah blah blah
</div>

Or the alternative works in a similar way, but uses existing tags to "hook" onto, like <h2> or <p>.

I want to reuse the round-corner boxes throughout the site. However, I don't want to be required to use my hook tags, and I'd like to avoid specifying each nested corner div each time.

I want to say, "This is the Container style. Whenever you see the container style, include these nested corner divs as well." Is there a way to do this?

If I include url(images/blah.gif) in a CSS file in my webroot, and i then load that into a file in a html dir off my roor and run the html from the html folder, is the image supposed to be relative to my css file or my html file? It seems like its relative to the HTM which doesnt seem correct.

I know It would just make sense to move things around but it has to do with robohelp and I think I'm stuck doing it this way for now.

Many of my web pages (CGI) have css styles which have a user defined color present throughout the site. How can i get that varible data back to my site if I refer to it in my css style?

for example, i get a hex color from the user and store it in a global variable C1$=#000000 in my web app.

then in my css definition i assign border color based on the user defined variable like

Code:

.table { border: solid 1pt $C1 }

when i copy that into my css file, the color thing in my tables is no worky. putting it back into my cgi file, it works fine of course. What to do?

thanks,
JOhn

am creating a website and when I swap between pages the page is shifting to right around 5px, I need to fix it. you can find the files in that link: http://www.designmasr.com/assets/source_files.zip