CSS - Css Caching, Compression And Load Order

I'm writing an application that uses stylesheets to display certain items. The user can alter the positioning etc. of these items (which then rewrites the stylesheet for future use), and then reloads the page. Unfortunately the old coordinates are still apllied to the elements in question until I manually hit the browser's reload button, then the new values are used.

I'm guessing the style is being cached somewhere?

If so can anyone advise how to stop this?

thanks

p.s. Its just a basic refresh that sorts it out, not a *hard* refresh.


==================

I've come up with a fix of sorts.

If I write the style out dynamically within the div itself each time then my problem is solved.

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);

i have

<meta http-equiv="cache-control" content="no-cache" />

in my head, but i DO want people to cache my .css file because that means less loading time for them. HOWEVER, only if it is not new. is that possible?

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!

Were in the middle of re-writing our tools and alowing our users (who put our tools in their website) much more controll over the css of the page. One of the things were touting is that the user can change the order of the fields in the forms to suit what ever is more important to them.

While this may work well positionally , the tab orders are all f'd up. Is there any way to set these in CSS?.. All of the inputs and labels are each in their own divs with a unique ID.

I'm thinking this isn't possible but I thought id ask

I'm having trouble with the CSS on this page: http://www.mediamogulsweb.com/...

You'll notice that in IE the CSS drop down menu is partially hidden by the center graphic on the page...In FF, this is not a problem....

I'm almost entirely sure that this is a z-index issue, but I've checked the z-index, and everything seems fine....the drop down menu elements have a higher z-index than the center graphic elements, yet it still doesn;t work in IE...

Any ideas why? Thanks.

Thanks for taking the time to read my question.

Just wondering. Does the order of appearance of items in a CSS file impact how a page is displayed?

I'm trying to make a page, and it works in IE, but not in Firefox.

Thanks,

Brad

Hi

So I am setting up a portfolio website and I have been focusing mainly on the highslide portion which I got working great (with this forums help, thank you!). Now I have gotten rid of all the tables and garbage like that and am trying to make the images the backgrounds so they will be locked but now the image links spill out of the column and don't line up anymore.

this is what it SHOULD look like:

http://kdpatton.com/index01.htm

but this is what does look like:

http://kdpatton.com/portfolio02.htm

I can't figure out why.

Any help would be great. Love this forum!

is there a specific order in which to put the css selectors in a style sheet, eg
a:link
a:hover
a:active
a:visited

my problem is that the hover state isn't activated for links i have already visited.

thank you

I have an absolutely positioned <div> that is intended to over some content directly below it. This content is contained within a relatively-positioned <div> which seems to be causing it to display in front of the absolutely-positioned <div> regardless of what the z-index is set to.

Here is a simplified example of my problem:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stacking Order Test</title>
</head>

<body>

    <div style="position:relative;">
        &nbsp;
        <div style="position:absolute;background:green;height:55px;top:5px;left:5px;z-index:100;">I should be at the top of the stacking order.</div>
    </div>
    <div>
        <div style="position:relative;background:red;height:300px;">
            If you can read this, I am higher in the stacking order than the green <div>
        </div>
    </div>
    
    

</body>
</html>

The only way that I can get the absolutely-positioned <div> to display at the top of the stacking order as it should is to remove the relative positioning from the other <div>. Unfortunately, for several reasons, this is not an option.

This is only happening in IE6 and 7. Anyone have any any ideas?

I am trying to get the footer DIV to appear directly below the content div on the page. Cant get it to work. CSS and DIV code is below if anyone can offer some advice? Thanks.

Code:

#page_footer {
	background-color: #ff0000;
	width: 729px;
	height: 30px;
	position:relative;	
	bottom: 0px;
	left: 35px;
	font-family: arial, tahoma, times new roman;
	font-size: 11px;
	font-weight: normal;
	color: #5A5A5A;
}

	<!-- // MANDATORY PAGE CONTENT HOLDER // -->

	<div id="page_content_holder_sizing">

		<div id="page_content_section_name"><?=str_replace("::", "-", $page_title)?></div>
		<div id="page_content_top_stroke"><img src="/site_images/pre_load/spacer.gif" width="729" height="4"></div>
		<div id="page_content_bottom_stroke"><img src="/site_images/pre_load/spacer.gif" width="729" height="4"></div>

		<!-- // CONTENT TEMPLATE // -->



		<!-- // END CONTENT TEMPLATE // -->

	</div>

	<!-- // MANDATORY PAGE FOOTER // -->

	<div id="page_footer">

	 footer goes here

	</div>

	<!-- // END MANDATORY PAGE FOOTER // -->

	<!-- // END MANDATORY PAGE CONTENT HOLDER // -->

Hello everyone,

I am currently trying to find a solution in css that would allow me to alter the design of the following html structu
Code:

<body>

<div id="header">
Website Title Here
</div> <!-- header -->

<div id="content">

<div id="article">
Article goes in here
</div> <!-- article -->

<div id="menu">
Menu goes in here
</div> <!-- menu -->

</div> <!-- content -->

</body>

What I want to do is keep that structure intact so that when someone visits the page from a text browser or something else that does not support css, the article appears before the menu. But I want the menu to appear before the article when someone has css enabled (not to the left or right of the article, but above it altogether).

I tried using the "position: absolute; top: 0; left: 0;" tag on #menu, and while it does move the menu right under the header, it doesn't bump the article under the menu, it leaves them both overlaying each other. The first solution that comes to mind would be to add the same css tags to #article and move it down by the height of the menu, but the problem is that the menu will always vary in height.

Is there a way to make the article align itself with the bottom of the menu div without using fixed values?

Thanks!

Jerome

Hi again!

I'm concerned with a warning I keep receiving in the validator. I have a short page which is translated to 20+ western european languages. I need them all to display right so I used UTF-8 right?

Using NOTEPAD - I took the english version and replaced the text with (for example Finnish). Then when i wanted to save it Notepad warned me to save it as unicode or I lose all the specific letters.

I did save as UTF-8, but then I get this message when validating. (though I pass validation)


"Byte-Order Mark found in UTF-8 File.

The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files is known to cause problems for some text editors and older browsers. You may want to consider avoiding its use until it is better supported."

What can I do ?

Thanks

Hello there

I cannot get the following css to give me a reverse order on navigation items floatet right. Can anyone help please?

.nav-container { background:#40391d;}
#nav {width:950px; margin:0; padding:0px; background:#7f7a60; }

#nav li { position:relative; float: right; border-left: 1px solid #fff;}
#nav a {padding:5px 12px 6px 12px; color:#fff; font-weight:bold; background: #7f7a60; border: 1px solid #7f7a60; }
#nav a:hover {color: #000; background: #fff4c0;}

Hi,

I'm curious as to whether anybody knows of any in which to preload a specific - or all of them - background image that's set in CSS.

For example, I might have several background images in place as borders or graphics:

Code:

background: #333333 url(display_bg1.jpg) no-repeat center 30px;
}
{
background: #000000 url(display_bg2.jpg) no-repeat center 30px;
}
{
background: #999999 url(display_bg3.jpg) no-repeat center 30px;

How, perhaps using javascript or php, would I force "display_bg3.jpg" to load before any other image?

Thanks,
DB