CSS - Including 2 Css Files?

Hi folks-
This may be a bit off the wall, but what the heck...

Is it possible to set up a portion of a document, a "region", if you will, that acts like an external file?

I have an E-mailed news service page that's set up using CSS to look and act like a three-column frameset. All three windows can scroll and load independently. I'd like the user to be able to click on an icon in the left column and load data into the column next to it. The hitch is that since this is an E-mailed document, it would be good to have all necessary data self-contained, if possible, rather than accessible remotely via absolute URLs (to avoid having to make the subscriber go to a web site and enter a user name and password). I know that I can load external files into a given "column" by referincing an absolute URL, but does anyone know if it's possible to load only a portion of the current document? (as opposed to simply jumping within the document to a specific point, as with a "name" anchor?

Thanks in advance.

- Tom Tedeschi

I'm looking to make a semi-elastic layout using max- and min-width to keep the main container from dropping below about 750px or stretching above about 950px.

I'm hoping that this would allow the layout to work nicely for those with 800x600 displays (I really wish people would stop using 800x600!), stretch out a bit for those with 1024x768 displays and then not stretch out more so as to maintain a decent line length.

I know that IE for Windows doesn't support max- and min-width and if these are the only browsers that don't I can use a suitable workaround.

However, if there are other browsers that don't support max- and min-width, I'll run into some problems.

If anyone knows of any modern browser (i.e. not NS 4.7!) that doesn't support these CSS properties, I'd really appreciate knowing about it.

I'd also really appreciate it if people could comment either way - i.e. please also mention if you believe it is only IE that doesn't support these properties.

Thanks in advance for any comments!

Hi, anyone an idea how to change both text color AND table cell bgcolor on rollover (using style sheets) ?

thx
Gerhard

I know that there have been a few posts on this in the past but none seem to specifically cover what I am after.

I am currently creating a CMS for a few sites that I run. Now don't get me wrong this is nothing flashy, it's just a personal project, however, when designing pages I can get everything to display in FF, Opera and IE perfectly well, however, as I add new elementes to the page things seem to get a little.. out of place.

My pages always display perfectly well in FF and Opera, however, IE 6 & IE 7 usually have small problems to do with margins and such, nothing life changing but I am very critical of my own work.

My question is whether or not I should create seperate style sheets for IE6 & IE7 that overwrite certain bits of the CSS that IE doesnt like and replace it with code that works well in IE, whilst hiding it from other browsers.

I would also be interested if people have other suggestions with regard to this as I am always up for learning new skills and ways of doing things.

Thanks for reading!

Regards, Matt.

Im trying to figure out the best way to do this. Im running Wordpress with a CSS themed template, but Im running into a problem. Im posting little examples of menus/layouts that require a different CSS file to display correctly. I tried just adding the new bits to the main CSS file, but there is some overlap of some part and it changes it from whatd it look like on a page of its own. How can I post something into a page but still have its own style?

How can I fit the following into a CSS file (external stylesheet)?

Code:

<div id=Canterbury style="position:absolute; width: 200px; height: 52px; z-index: 1; visibility: hidden"><table 

border="0" cellspacing="0" cellpadding="0"><tr><td bgcolor="#FFB928"><!-- border colour --><table border=0 

cellpadding=1 cellspacing=1>

<tr id="Canterbury1" bgcolor="#FFD784"><td><a class=menu href="#" onMouseOut="menuOut('rollimg2'),setBgColor(

'Canterbury1','#FFD784')" onMouseOver="menuOver('rollimg2'),setBgColor('Canterbury1','#990000')" target=

_top><img src="rp.gif" border="0"> BBC Radio Kent</a></td></tr>

<tr id="Canterbury2" bgcolor="#FFD784"><td><a class=menu href="mms://ms1.capitalinteractive.co.uk/invicta_low" 

onMouseOut="
menuOut('rollimg2'),setBgColor('Canterbury2','#FFD784')" onMouseOver="menuOver('rollimg2'),setBgColor(

'Canterbury2','#990000')" target=_top><img src="wmp.gif" border="0"> Invicta FM</a></td></tr>

</table></td></tr></table></div>

I have a few other placenames as well, as you can see from www.radiofeeds.co.uk/maptest/csstest.html, but there are a few ids where I'd like to exclude these settings from.

I know I can set the whole of the Canterbury block with:

div#Canterbury,div#<any other placeneames>
{
position:absolute; width: 200px; height: 52px; z-index: 1; visibility: hidden
}

But how can I also have the border colour (<td bgcolor="#FFB928">), bgcolor, onMouseOut and onMouseOver properties put into the CSS file?

Please can I have the code for the CSS file and for the replacement code that goes back into the page.
I'd like this to be efficient as possible.

I cant work out how to comment my css files

Can anyone tell me? Also - anyone got any views on the best way to structure a CSS file?

I am trying to use the IE workaround for PNG transparency (using the alpha filter).

The trouble is it only seems to work on a fixed size image. Is there any way to successfully apply it to a repeating background? I can't seem to find any info on that so I am guessing it can't be done

Does Tomcat server supports CSS (Cascading Style Sheets) files.
In my application on JSP, Tomcat does not support it.
wainting for your responses.
thanx in advance

I finally got the alpha loader to work.. and, my transparent PNG files work great as a background in IE - I even have a page that loads many links for using Lightbox.. and, it works great.

But.. now.. in Firefox and Safari.. I don't have a background.. it is crystal clear.. *Gulp*

Can anybody help me?

Dear sir
I have faced one problem, actually before uploading any file there should be scanning, but how to do that scanning? is there any special packages or api is there.

Pls find solution for this one in Java application.

Thanks
Balu

Hello! Newbie back again. I'm rolling along on using CSS for the first time (hooray!) including that wonderful bit of coding in order to center a #Container. The threads here have been *very* helpful.

Due to printing problems with having everything centered at a fixed width (text on the right getting chopped off), I've created a style for media="screen" AND media="print" which works just fine in Netscape and IE.

Question: When I pull the style out of the page so that I can reference it as an external css, do I need to create TWO files?

Also, I would appreciate any/all comments about my first attempt so far. Is there a better way I should be designating font-family and margins for my elements?

<style type="text/css" media="screen">

h1 {color:#003366; font-family:sans-serif; font-size:100%; font-weight:bold; margin:0.4cm 0.4cm}
p {font-family:sans-serif; font-size:85%; margin:0.4cm 0.4cm}
ul {list-style-image: url("redarrow.gif"); font-family:sans-serif; font-size:85%; margin:1cm 1cm}
a:link {color:#003366} a:visited {color:#003366} a:hover {background:#ccccff; text-decoration:none}
html, body {margin: 0; padding: 0; text-align: center; /*for IE stupidity*/}

#container
{
position: relative; /*The container must be positioned
/*in order to contain positioned
/*elements*/
margin: 0 auto; /*This is the proper way to center an element*/
width: 700px;
border: 1px solid gray;
text-align: left; /*corrects for IE hack*/
padding: 0px;
}
</style>

<style type="text/css" media="print">

h1 {color:#003366; font-family:sans-serif; font-size:100%; font-weight:bold}
p {font-family:sans-serif; font-size:85%}
ul {list-style-image: url("redarrow.gif"); font-family:sans-serif; font-size:85%}
a:link {color:#003366} a:visited {color:#003366} a:hover {background:#ccccff; text-decoration:none}
</style>

And here's the page I'm working with so far:

http://www.accd.edu/sac/lrc/librns/celita/design/linktest.htm

Thanks so much for all your help.

Hi all,

I'm using this code for separate CSS style sheets for screen, handheld and print.

<link rel="StyleSheet" href="css/style.css" type="text/css" media="screen" />
<link rel="StyleSheet" href="css/style_handheld.css" type="text/css" media="handheld" />
<link rel="StyleSheet" href="css/style_print.css" type="text/css" media="handheld" />

I'm trying to view these using the Firefox Developer Toolbar and 'Display CSS by media type' options, but it's not working. However, when I do a print preview or actually print the document, it does work. Can anybody tell me why this is and how I can get it working?

Cheers.

I swear I've done some searching on this but I haven't been able to find a satisfactory answer.

I have a style sheet in the root of my site with this declairation in it:
Code:

#nav
{
	float: left; 
	width: 190px; 
	height: 600px; 
	min-height: 600px; 
	margin-right: 10px; 
	background-image: url(images/gradientBg.jpg); 
	background-repeat: repeat-x;
}

The file the id="nav" is in is being included in the index.php page that's being called from the root also. So we have a structure that looks like this:
Code:

/root
  styles.css
  index.php

/includes
  nav.php

/images
  gradientBg.jpg

The stylesheet is being included like this
Code:

<link rel="stylesheet" type="text/css" href="/styles.css" />

Now for my problem...

The styles and backgrounds all show as expected in Firefox. However, in IE any of the styles that apply to files from the /include directory like nav.php are not followed at all.

I find it hard to believe that my only option is to make the styles inline but I'm not sure what else to do at this point.

Thanks for staying with me this far and for any advice.

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!