CSS - Creating Custom Stylesheets On The Fly

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.

I'm building a site that will have a style sheet that should be applied site wide (main.css) and then some pages will have styles that should only be applied to them (custom<X>.css).

Should I use multiple <link> tags to import each stylesheet or should I edit custom<X>.css and add @import "main.css"; to the beginning. Doing this would make the code look cleaner, but will the browser still cache the main.css file?

Am I being too persnickety about the look of my code and just use multiple <link>s?

i thought i was pretty well versed in css, but i have come across an annoying problem.

on my website, i have multiple external stylesheets; there is virtually 0 internal and inline styling. this is to make the code as clean and elegant as possible.

the primary stylesheet, full.css , references to two other external stylesheets ( background.css and spacing.css ). background.css ' only purpose is to enable the background scaling feature. spacing.css ' only purpose is to set the margins, padding, etc of the page(s).

i have an alternate stylesheet, bw.css , but it only references spacing.css , since the scaling background feature is not intended to part of how the page looks when styled with bw.css .

i have used (or attempted to use) the * universal selector in bw.css to style every element to use a different background, different font color, and different font than what was used in full.css .

the problem is, the * doesnt seem to work as intended, when combined with @import . only certain css properties seem to work, but i do not know which ones work and which ones dont.

i can rectify the problem by using !important , but id rather not, since its not as elegant as not using it.

my question is, how do i solve this problem without using !important ?

my site: prototism.co.cc

full.css
css Code:
Original - css Code @import url("background.css"); @import url("spacing.css"); * { cursor: default; font-family: "Verdana", sans-serif; } a { color: #ddd; cursor: pointer; text-decoration: none; } a:hover { background-image: url("../img/link-bg.png"); color: white; } #links, #header { font-size: 34pt; letter-spacing: -3px; } #links, #footer { text-transform: lowercase; } #header { color: white; } #footer { font-size: 12pt; } #footer span { color: #ddd; }

  

 @import url("background.css");


 @import url("spacing.css");


  


 * {


 cursor: default;


 font-family: "Verdana", sans-serif;


 }


  


 a {


 color: #ddd;


 cursor: pointer;


 text-decoration: none;


 }


  


 a:hover {


 background-image: url("../img/link-bg.png");


 color: white;


 }


  


 #links, #header {


 font-size: 34pt;


 letter-spacing: -3px;


 }


  


 #links, #footer {


 text-transform: lowercase;


 }


  


 #header {


 color: white;


 }


  


 #footer  {


 font-size: 12pt;


 }


  


 #footer span {


 color: #ddd;


 } 

bw.css
css Code:
Original - css Code @import url("spacing.css"); * { font-family: "Georgia", "Times New Roman", serif; background-image: none; color: black; } a:hover { color: white; background-color: black; } .check { color: #006400; } #links a { margin-left: 30px; } #background { display: none; }

  

 @import url("spacing.css");


  


 * {


 font-family: "Georgia", "Times New Roman", serif;


 background-image: none;


 color: black;


 }


  


 a:hover {


 color: white;


 background-color: black;


 }


  


 .check {


 color: #006400;


 }


  


 #links a {


 margin-left: 30px;


 }


  


 #background {


 display: none;


 } 

I would like to know if anyone has done something like this - I need to have the look and feel of a site totally configurable through a web interface. All data is going to be stored in a database and I would like to know whether I can autogenerate or update a style sheet based on data from a database. Has anyone done this? Or is this the wrong approach to take in such a case?

I also have several clients using the same site, each needing to have their own configurations. I would like to avoid having to have a separate style sheet for each client if possible. Can the properties in a stylesheet be set dynamically on a session per session basis?

Hi all,

I know this info is out there, but I'm having trouble getting a precise answer.

I am a web software developer, and I would like to include one stylesheet that points to x number of other stylesheets. My goal is to give the designers full control over the styles and I won't have to re-cache pages when they want to import another css file.

Will it work to simply link to one main stylesheet, such as @import url('http://www.somewhere.com/css/main.css');, that includes additional @import statements?

Thanks!

Hi, I'm trying to make my own custom CSS for Internet Explorer to load when I visit the www.tv.com site.

How do I go about making it domain specific?

Is there an IE alternative to Firefox's @-moz-document domain("tv.com") method?

I am new to coding so dont make fun of me or anything if this is stupid..

I'm coding my own tumblr right now, and it looks pretty good so far. I just dont know the code to make an image 'static' and stay at the top.

If you take a look (hockey-lax-bro.tumblr.com/) you will see what i mean. The follow button and picture on the right 'follow' you wherever you scroll.
Code:

<div style="position:right;5px:top;25px">
<a href="https;||twitter.***/J_Harris012" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @J_Harris012</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.***/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>

<div style="position:right;30px:top;55px">
<a href="http;||i42.tinypic.***/2ai0etj.***" target="_blank">
<img class="normal" src="http;||i46.tinypic.***/15o8nj9.***" alt="install theme" />
</a>
</div>

Thats the coding that i have right now ^^ (i had to change a few things because new members are not allowed to post links)

what do i need to change to make the buttons stay at the top?

Ive seen some sites using fonts i dont have on my computer how is this done and whats it called ? any help would be great.

Can I use custom fields in IE or not?
This is the complete example page I'm working with:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  
<head>
<base href="http://localhost:9080/garage68/">
<title>TestCSS</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<style type="text/css">
<!--
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
	color: #00FF00;
	background-color: black;
}
.content {
	position:absolute;
	width:75%;
	margin:5px 0px 0px 165px;
	border:0px;
	line-height: 20px;
	z-index:3;
}
fieldset {
	border: #26a solid 1px;
	width: 85%;
	margin-bottom: 5px;
}

header {
	font-weight: bolder;
	color: blue;
}

date {
	font-weight: bolder;
	color: red;
}

-->
</style>
</head>
	<body>
	<version>version: 3.1.0</version>
	<div class="content">
		<fieldset>
			<date>2004-05-04</date>	
			<hr />
			<header>Title1</header>
			And Entry
		</fieldset>
				
		<fieldset>
			<date>2004-01-21</date>	
			<hr />
			<header>Title 2</header>
			A Second Entry
		</fieldset>
	</div>
  </body>
</html>

You'll see the difference taking a look at it in IE versus Firefox. It seems like it's picking up some things (even from the custom tags) but leaves off other things. How can I get these two pages to look the same (as in both look like the firefox version)?

Hello, I'm working on converting my current table layout into strictly a CSS Layout . I've managed to get everything (layout wise at least...) displaying properly except for my right border. This is a small 30px x 1px drop shadow. I've been working with it for a few hours now, and I can't seem to get the image to even show up.

Here is my CSS code:
Code:

	#container {
		background-color: #726554; 
		width: 791px;
		text-align: left;
		margin: 0 auto;			
	} 
	#top {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 791px;
		height: 145px;
		vertical-align: top;
	}
	#content {
		background: #726554 url(PHP/img/right.jpg) right repeat-y;
		margin-top: 30px;
		width: 496px;
		text-align: left;
		vertical-align: top;
		float: left;
	}
		
		#content p {
			color: #f1f1f1; 
			font-family: Tahoma; 
			font-size: 13px; 
			margin: 0 0 10px 12px;
		}
		#content .date {
			display: block;
			color: #ff9100; 
			font-family: Tahoma; 
			font-size: 13px; 
			font-weight: bold;	
		}
		
	#left {
		vertical-align: top;
		float: left;
		width: 265px;
		height: 671px;
	}
	#contact {
		clear: both;
		background: #726554 url(PHP/img/right.jpg) right repeat-y;
		font-size: 13px;
		font-family: Tahoma;
		text-align: center;
	}

I don't think you'll need any HTML code for this problem, but let me know if you do!

Thanks in advance,

Jason

I was wondering if there was a way to have a chapter listing in a OL or UL. I want to be able to have "Chapter <i>:" as the list style where <i> is the increment.

is this possible. I thought I saw that somewhere floating around, but i can't seem to find it.

thanks in advance.

I have a question.
If i create a custom class :

p.q {color: black !important;}

and a user has a css with the fallowing code:

p {color: red !important;}

will my text <p class="q">My text</p> be red or black
and how can i prevent the user css from overriding my css

I'm making a site, and the guy I'm making it for says he wanted a more 'tough' font. So I downloaded a, 'tough' but still readable of course, font. The main page has an iframe, and the content in the iframe is where the text goes that has the tough font. Everything works when it's offline. But when I try uploading it, it's the old font. I even check the source and it's all old. The server is running extremely slow right now, so that might be the problem and it just hasn't uploaded yet or something. Because I also deleted the content files and refreshed the page and it was still old. So, I'll wait a little longer and check or something.

I also know that viewers can't see custom fonts if they don't have them on their pc. So this is kind of seeming pretty pointless. But is there ANYWAY I Can make it viewable to everyone that views the site. So they can see the font even if they don't have it on their pc. Like, make them have it temporarily or something. My friend told me it had something to do with CSS, but I don't really know. Anything I can do to make it work? Is there maybe a Java Script I can use?

hello,

i'm placing a custom cursor on a stylesheet like so:

body { cursor: url(normal.cur), default; }

and a weird effect appeared on internet explorer... when the cursor is over any layers or images (i guess, over any actual elements), the custom cursor appears. but when it's on an empty area, say the page background, the default cursor appears instead. how can i fix this (while trying to maintain the default cursors for every other browser)?

thanks for any help!