CSS - Multiple Style Sheets For The Same Site

Hey guys, how do i put the bold command into a css sheet?

I want to have bold consistantly throughout a page.
-------


body {
font-family: Arial;
font-size: 13.5px;
}

td {
font-family: Arial;
font-size: 13.5px;
}

th {
font-family: Arial;
font-size: 13.5px;
}

.bodystyle {
font-family: Arial;
font-size: 13.5px;
}

.small {
font-family: Arial;
font-size: 9px;
}

.medium {
font-family: Arial;
font-size: 12px;
}

.big {
font-family: Arial;
font-size: 16px;
}

.xbig {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
}

.expanded {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
letter-spacing: 2px;
}

.justified {
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
}

.footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #999999;
}

.box1 {
padding: 3px;
border-width: medium;
border-style: solid;
border-color: #CCCCCC #666666 #666666 #CCCCCC;
}

.box2 {
font-style: italic;
word-spacing: 2pt;
padding: 3px;
border: 1px solid;
}

i have a main page with an iframe.. my iframe contain most of my data.. there are 4 types of css for the user to choose.. i have create 4 css.. 1.css, 2.css, 3.css and 4.css...

when they user clicks on the first link, the iframe will load 1.css.. if the user clicks on the 2nd link, the iframe will load 2.css..

what shld i do to attain that?

Is there anyway to make GoLive automatically apply styles to external style sheets rather than internal?

The application I'm writing currently uses a Custom tag to generate a table of images and input images to represent tabs. It is working just fine. After implementing a liquid layout on the application the tabs still work, but do not grow larger based on the size of the screen. Also there are always only 7 tabs max per row.

I'm looking to try to change this so that the tabs will fit to the space provided. I'm hoping to come up with a style sheet solution that can be applied to code that my custom tag would generate.

Here is an example of what my custom tag would generate currently. It is all tables, but could easily be modified to divs or such.

I realize this is going to take a bit of work, so I'm just hoping someone may have a suggestion on the direction I could take this. Something that might change the number of tabs on a row as the browser is expanded or contracted....

Code:

<div id="content" class="ParentDivBrowse">
<div id="subContent" class="ChildDiv">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
	<td>
		<table border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td nowrap='nowrap'>
					<table border='0' cellspacing='0' cellpadding='0'>
						<tr>
							<td nowrap='nowrap'>
								<img src="/AppName/images/leftExtreme_off.gif" />
								<input type="image" src="/AppName/images/Properties_0_en_US_off.jpg" alt=" Properties" name="Properties" value="15" onClick="buttonClick(this)">
								<img src="/AppName/images/offOff.gif" />
							</td>
							<td nowrap='nowrap' colspan="6">
								<input type="image" src="/AppName/images/Fields_0_en_US_off.jpg" alt=" Fields" name="Fields" value="14" onClick="buttonClick(this)">
								<img src="/AppName/images/rightExtreme_off.gif" />
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap='nowrap'>
					<table border='0' cellspacing='0' cellpadding='0'>
						<tr>
							<td nowrap='nowrap'>
								<img src="/AppName/images/leftExtreme_off.gif" />
								<input type="image" src="/AppName/images/DLG_FEOV_0_en_US_off.jpg" alt=" DLG_FEOV" name="DLG_FEOV" value="7" onClick="buttonClick(this)">
							</td>
							<td nowrap='nowrap'>
								<img src="/AppName/images/offOff.gif" />
								<input type="image" src="/AppName/images/DLG_FLST_0_en_US_off.jpg" alt=" DLG_FLST" name="DLG_FLST" value="10" onClick="buttonClick(this)">
							</td>
							<td nowrap='nowrap'>
								<img src="/AppName/images/offOff.gif" />
								<input type="image" src="/AppName/images/DLG_SHOV_0_en_US_off.jpg" alt=" DLG_SHOV" name="DLG_SHOV" value="8" onClick="buttonClick(this)">
							</td>
							<td nowrap='nowrap'>
								<img src="/AppName/images/offOff.gif" />
								<input type="image" src="/AppName/images/DLG_TLOV_0_en_US_off.jpg" alt=" DLG_TLOV" name="DLG_TLOV" value="9" onClick="buttonClick(this)">
							</td>
							<td nowrap='nowrap'>
								<img src="/AppName/images/offOff.gif" />
								<input type="image" src="/AppName/images/DLG_OCUR_0_en_US_off.jpg" alt=" DLG_OCUR" name="DLG_OCUR" value="11" onClick="buttonClick(this)">
							</td>
							<td nowrap='nowrap'>
								<img src="/AppName/images/offOff.gif" />
								<input type="image" src="/AppName/images/DLG_NOTE_0_en_US_off.jpg" alt=" DLG_NOTE" name="DLG_NOTE" value="12" onClick="buttonClick(this)">
							</td>
							<td nowrap='nowrap' colspan="1">
								<img src="/AppName/images/offOff.gif" />
								<input type="image" src="/AppName/images/DLG_FILT_0_en_US_off.jpg" alt=" DLG_FILT" name="DLG_FILT" value="13" onClick="buttonClick(this)">
								<img src="/AppName/images/rightExtreme_off.gif" />
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap='nowrap'>
					<table border='0' cellspacing='0' cellpadding='0'>
						<tr>
							<td nowrap='nowrap'>
								<img src="/AppName/images/leftExtreme_on.gif" />
								<input type="image" src="/AppName/images/DLG1_T381_FUND1_0_en_US_on.jpg" alt=" DLG1_T381_FUND1" name="DLG1_T381_FUND1" value="0" onClick="buttonClick(this)">
							</td>
							<td nowrap='nowrap'>
								<img src="/AppName/images/onOff.gif" />
								<input type="image" src="/AppName/images/DLG3_T381_FUND2_0_en_US_off.jpg" alt=" DLG3_T381_FUND2" name="DLG3_T381_FUND2" value="1" onClick="buttonClick(this)">
							</td>
							<td nowrap='nowrap'>
								<img src="/AppName/images/offOff.gif" />
								<input type="image" src="/AppName/images/DLG6_T381_TO_FROM_0_en_US_off.jpg" alt=" DLG6_T381_TO_FROM" name="DLG6_T381_TO_FROM" value="2" onClick="buttonClick(this)">
							</td>
							<td nowrap='nowrap'>
								<img src="/AppName/images/offOff.gif" />
								<input type="image" src="/AppName/images/DLG7_T381_MISC_0_en_US_off.jpg" alt=" DLG7_T381_MISC" name="DLG7_T381_MISC" value="3" onClick="buttonClick(this)">
							</td>
							<td nowrap='nowrap'>
								<img src="/AppName/images/offOff.gif" />
								<input type="image" src="/AppName/images/DLG_ADER_0_en_US_off.jpg" alt=" DLG_ADER" name="DLG_ADER" value="4" onClick="buttonClick(this)">
							</td>
							<td nowrap='nowrap'>
								<img src="/AppName/images/offOff.gif" />
								<input type="image" src="/AppName/images/DLG_PTDE_0_en_US_off.jpg" alt=" DLG_PTDE" name="DLG_PTDE" value="5" onClick="buttonClick(this)">
							</td>
							<td nowrap='nowrap' colspan="1">
								<img src="/AppName/images/offOff.gif" />
								<input type="image" src="/AppName/images/DLG_COOV_0_en_US_off.jpg" alt=" DLG_COOV" name="DLG_COOV" value="6" onClick="buttonClick(this)">
								<img src="/AppName/images/rightExtreme_off.gif" />
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td nowrap='nowrap' colspan='2'>
					<img width='100%' style='min-width:837px;' src='/AppName/images/strip_on.gif'>
				</td>
			</tr>
		</table>
	</td>
</tr>
</table></div></div>

One of the most common problems i am sure most of us are having it different browsers rendering css in different. What is the best or good way to detect what browser the visitor is using and then give them the right style sheet for their browser?
I am unable to use any real server side script like php or .asp
Thanks!

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.

Hi,

I have a style shete which contains multiple styles for differnet devices - however i am habing problems with the "handheld" media type - it wil lonly display the 1st style of the sheet (if you know what i mean).

I have enclosed my code
Code:

@media handheld
{

	.frmInput
	{
		width: 1em;
		height: 1.3em;
		border: 0.1em solid #00004F;	
		background-color: #F2F2FF;
		color:#000000;
	}
		body
	{
		font-family: Arial, Helvetica, sans-serif;
		font-size: 0.2em;
		font-weight:bold;
		background-color: #000033;
		color:#000000;
	}

} 

If testing it using visual studio.net 2005's pocket pc 2003 emulator.

Can anybody help ??

thanks in advance

Andy

If anyone can help I am trying to attach an external style sheet in to my site with dreamweaver 8. It is not being recognised as a css file. How do I overcome this problem

Andy

Hi,

At my site webpage http://www.pt2fansite.com/demo/monsters.pl there is a list on the middle where after the name of monster the colors changes that table has Code:

style="margin-left: 6; padding-top: 2px;"

but once i putted it all together it stoped working and is no longer giving the space to it....

What could be possible making it not work ? i have tried to put it into my style.css file and out of it and both ways it does not work.

thanks for any help

I need to modify an external style sheet so that background images on each page can be changed. Please help

Im just playing around with CSS and Photoshop and made this so far:-
http://www.o0matte0o.myby.co.uk/windows-vista/
Lazy Link

It look as its ment to in IE7, Vista IE and IE6 (apart from the PNG Transparancy in IE6) but when I view the site in Firefox there are spaces between each of the sub titles and the Title on the Transparent part is not in the correct place can any one help to see where Im going wrong please?

I have tested the CSS and XHTML and bouth complie to the standard so I cant see what Im doing wrong :S

Code:

body { color:#565656; font-family: "Segoe UI", "Trebuchet MS", sans-serif; font-size: 80%; }
hr { display:none; }
img { border:none; }
body { padding:12px 0 25px; background-image:url(../images/background.png); }
h1 { padding:3px; font-size: 165%; padding-left:40px; }
h2 { font-size: 100%; padding-left:110px; line-height:8px; }
h3 { padding-left:225px; }
.p1, .p2, .p3, .p4, .p5 { padding-left: 230px; padding-right:15px;}
a { color:#6666FF; }
a:hover,a:active { background-color:#9999FF; color: #565656; }

#container { margin-left:10%; }
#pageHeader { width:822px; height:80px; overflow:hidden; background-image:url(../images/header-test.png); text-shadow:#333333;}
#quickSummary { width:822px; background-image:url(../images/content.png);}
#preamble { width:822px; background-image:url(../images/content.png); }
#explanation { width:822px; background-image:url(../images/content.png); }
#participation { width:822px; background-image:url(../images/content.png); }
#benefits { width:822px; background-image:url(../images/content.png); }
#requirements { width:822px; background-image:url(../images/content.png); }
#footer { width:822px; height:27px; text-align:center; background-image:url(../images/footer-test.png); }
#linkList { position:absolute; float:left; top:100px; } 
#linkList h3 { padding-left:30px; padding-top:1px }
#linkList h3, li, ul { list-style:none; display:list-item; }

Any other idears people comment (noting that the XHTML file should not be changed as Im trying to only do every thing with CSS like the name of the site HTML page is from.)

I have a website/application that I want to give the users the option to select from multiple CSS's on their browser. How do I go about letting the user change the style sheet?

-Dynasty

I'm trying to use suckerfish style drop downs, based on CSS with javascript only for an Internet Explorer hack. It's working fine for a single horizontal row of menus, however I wanted to setup a few rows of other menus underneath the first row. The problem is that the dropdown goes underneath the menus under it and I can't figure out how to fix it.

This is an example of the problem.

Any suggestions?

Friends,

I've got two files I'm working with - index.php and main.css

Code:

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

Is printed to load my stylesheet (the directory is correct).
The following is in main.css

Code:

<STYLE type="text/css">
#dateTime {font-family: verdana; font-size: 10px; color: #FFFFFF;}
</STYLE>

and on index.php I have a td (the following):

Code:

<td ID="dateTime">Date: Sunday, Nov. 5th</td>

But, when I view index.php - my styles don't carry over and I can't see my CSS. Any help?

Regards,
Jonathan

I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule:
Code:

 .textarea-box {
	color: #990000;
	background-color: #fff;
	width: 375px;
	height: 200px;
	border: #000 solid 1px;
	} 

...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule?
Thanks for help with this.
j9