CSS - External Style Sheets And Included Files

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>

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

This is half a PHP problem, but it seems to be more CSS than php, so I'll post it here

With web pages on our (And our clients) site, we are experiencing problems with PHP occasionally dropping the style sheet, resulting in no formatting.

The CSS file itself does nothing fancy, it simply sets heading and general fonts, colours and sizes for TD's , links, DIVs etc.
There appear to be no javascript or other errors when the stylesheet is dropped. It does not happen every time, but is frequent enough to be annoying (Say 1 out of every 10-15 page loads )
The css file is inlcluded in the following manner within the header:

Code:

<LINK REL="stylesheet" HREF="<?=$base_url?>/main.css" type="text/css">

The Apache server is 1.3.29
PHP: 4.3.5
Server: Free BSD 4.7

Any ideas?

Hey all, i have about three different style sheets for the same website, all making the website look differently colour & gradient wise depending on which style sheet i use.. My question is how do i make it so that people can select which style they want to view the website in? like on forums when you get a drop down list of different skins and such... im just curious on how id go about making a drop down list of different styles and once a user selects one it will always be that one on their next visit.. Any help on this would be most appreciated. Would it be hard to do this? where should i begin?

Note: Im extremely new to this CSS Style sheeting so be gentle lol.

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?

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!

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

Hi,

I'm wondering if it is possible to override style settings in an external html document. I'm using the <--#include file command to include a html file. I don't want to modify the html file, because people (here at work) are making documents in word9 and save it to html. The major problem is that the <hr> line is too long and so is the text, so it don't fit on our website, at this point these documents are opened in a new window, but it would be nicer to intergrate them into our site.

thanks

-Dan

Ok, I just started a new website. I have been putting all of the html on every page. So, when I change one small thing on my Nav Bar, I have to go to every single page and change it! There has to be an easier way, right? Isn't it by using external sytle sheets? I tried this code in my homepage, but it isn't working:
Code:

<head>

<STYLE TYPE="text/css" MEDIA="screen, projection">
<!--
  @import url(http://www.freewebs.com/ohhdanggggraphics/BASIC.css);
  -->
</STYLE>

</head>

Basically on my site the only thing I want to change from page to page is the information in the center table. How would I do this? Thanks for your help

My Website

Hi. I've places where a div have style="display: block; float left;" and it's only on 1 or few pages. As I go on it still I'm doing this frequently but if I added to the external style it will grow as well but the reason why I do it inline because there isn't much style for a set of div.

Also when you specify a external style then is that means it will load once and stay in cache when it loads a page that re-use the external?

I'm not expert in CSS and want to know what's the best approach.

Thanks.

Hello

I'm having trouble with displaying a background image in a div.

It worked fine with embedded CSS but when I changed the CSS to external, the text loads but the bg image doesnt.

I'll post some code to explain it...

This is in the external style sheet:

#navbgtop {
position:absolute;
left:38px;
top:185px;
width:194px;
height:18px;
z-index:2;
background-image: url(images/navbartop.jpg);
}








and yes of course I have made the proper link to it in the <head> tag:
<link rel="stylesheet" type="text/css" href="css/nav.css" media="all" />


For some reason the background image wont display. Any ideas?



One more question also, does it matter if I use media="all" for the whole website? Or do I even need to bother using media=xyz ? I heard most browsers don't even read that as of yet.

Is this possible?

Currently onclicking a dynamically created option in my select menu an URL is sent to change the .src of an IFRAME.

The external content in the IFRAME does not match my site (it's a portal) style (bg, alignment, font etc.) I want to make it fit in but ofcourse cannot set attributes to external pages.

Can the URL be loaded in a 0 size frame or hidden IFRAME and it's contents, the source code, be taken on load and put into a new div tag on my own page with the neccessary style additions?

Notably the URL source has it's own style.css, is an alternative to change the href of that style.css onload?

=D

Mark.

I've been involved in building an intranet site with about 1200 pages. Now that it's been launched we've found problems in printing many of the pages - there are blank pages printing before the content, probably because of floated divs being pushed down when the width is restricted to A4. (That's a guess).

Now I know that what we should have done was create a print style sheet which would have solved this problem easily, but if we do that we'll have to place the link to it in every page, which involves quite a lot of signing-out of 1200 pages etc. I'm prepared to do that if there isn't another way but I wondered if there's any way the existing external style sheet can be amended so it loads (imports) the print styles dependent on some statement or other. I'm doubtful, but if anyone knows of a method that involves editing the one stylesheet rather than the 1200 pages I'd love to hear it!

Hi All,

How can i apply style to following table? Class attribute is not working. following is the code.

function links(){
var xmlDoc=new ActiveXObject("Microsoft.xmlDOM")
xmlDoc.async="false";
xmlDoc.load("ticker.xml") ;
xmlObj=xmlDoc.documentElement;
nodes=xmlDoc.documentElement.childNodes;
document.write("<table border=1 align=left >");
for( var count = 0; count<nodes.length; count++){
document.write("<tr>");
document.write("<td>");
document.write("<a href='" + (xmlObj.childNodes(count).getAttribute('URL')) + "'>" + (nodes.item(count).text) + "</a><br>");
document.write("</td>");
document.write("</tr>");
}
document.write("</table>");
}
Please guide me for the same.
Thanks in advance

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