CSS - Putting Bold In The Style Sheets...look

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?

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?

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>

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

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.

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

I want to do something like: Submit but i dont know how to do it?

i tried doing input value ="<span style="AK">S</span>ubmit" />
but it doesnt work....

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 have been using <b>,<i>,<u> all along, but I was seeing things about strong and em with style sheets. I went to w3c.org and found this commment
Quote:
The following HTML elements specify font information. Although they are not all deprecated, their use is discouraged in favor of style sheets.
What do they mean in favor of style sheets? You still need a tag in the text to make a word bold, why not <b>bold</b>?

Can someone shed some light on this?

The state titles are nice and bold on my mac browsers -- however, pc browsers won't make them bold. Here is a link to a windows xp screenshot: http://www.browsercam.com/projects/199027/3899787.jpg

Any ideas?

The section of my site that this effects is a login area, so I can't provide a link... I can post some code if I need to...

I have a div with this class applied to it.
Code:

.minidaysofweek div{
  width:13.6%;
  float:left;
  font-weight:bold;
}

It was working fine here, but when I put it in my site template, the bold doesn't work. So I added color:blue; just for testing, and it changed the color... what would keep the font-weight from being applied?

The minititle class isn't bolding either like it should...
<edit>FF and IE effected</edit>

Hi everybody

I'm sure many of you have come across the problem where your links jump when you increase font size or bold your text when you hover over them. The reason obviously being that the anchor is pushed bigger because the text content increases in size, thus pushing all following links around.

I've solved this problem before for links on top of each other by defining a line height. My problem is specifically for links next to each other.

I have solved this by placing each anchor inside a div and specifying a specific width for each. Although this works, it is not overly elegant.

I was wondering if someone out there has a better solution to this?

Thanks in advance.

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

I have a menu bar made up of <a href> elements that have a hover style of: PHP Code:
#mainMenu a:hover {
    color:#000000;
    background-color: #66c74c;
    padding: 1px 4px 1px 4px;
    margin: 1px 1px 1px 1px;
} 



This will provide a green colored rollover visual as the user moves their mouse over the menu bar.

I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code:
//--- Simplify setup by creating an array of the menus and hilight ID's ---
    var menus = ["menu1","menu2","menu3","menu4","menu5",
                "menu6","menu7","menu8","menu9","menu10"];
    
    function J_hiliteMenu(menu) {
        //--- first make sure all the menu are hidden and unhilited ---
        for(i=0; i < menus.length; i++) {
            if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position
            var obj = document.getElementById(menus[i]);
            if (obj == null) continue;             // if menu is not available skip it
            obj.style.color = "#ffffff";
            obj.style.backgroundColor = "#234fd7";
        }
        //--- hilite the menu we're interested in ---
        var obj = document.getElementById(menu);
        obj.style.color = "#000000";
        obj.style.backgroundColor = "#f8f400";
    } 



Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript?

Thanks!