CSS - Ext-sheets Won't Work...

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?

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?

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!

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 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.

I'm going mad with this, I tested the CSS a:hover function over FF 1.0.7 and IE6, and the style file is simple:
PHP Code:
 h3 {
    margin:10px;
    color:#636500;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
}
p {
    margin:10px;
    color:#636500;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
}
a {
    text-decoration: none;
}
a:hover {
    color:#636500;
}
a:visited {
    color:#cecf9c;
}
a:link {
    color:#cecf9c;
} 





searched through the forum but seems nobody has got this problem... I just want the link to change color, I imported the css file to my html and it worked for the first time. I clicked on the link and then use brower's "Back" button to test it again, but the hover feature is not working anymore.

I think it may be affected by the a:visited style, but how do I make a:hover work all the time?

Thanks for helping.

Well my fiance and I are starting a website for our photography and I designed what I wanted the layout to look like using Adobe Photoshop however now it's become a headache to get it to work.

i18.photobucket.com/albums/b117/Nagoshiffxi/help.jpg

this is what we want it to look like pretty much centered on a black background, each of those navigation images being individual pictures... the background being the box with the 3 images floating over it...

At the moment I have part of it working he
www. pollard-exposures.com/v1/

If someone can view the source and tell me a better way to make it work and how I may be able to add in the individual navigation pictures along the left side like I have it in the picture I would really really appreciate it... I am not sure how to even begin...

Im not good at all with CSS and need some help getting this to work in IE8 or older/newer versions. Works great in Firefox though.

<div style="width:90%;height:150px;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;border:4px solid #F4F4F4;background-color:#FFFFFF;-webkit-box-shadow: #B3B3B3 15px 15px 15px;-moz-box-shadow: #B3B3B3 15px 15px 15px; box-shadow: #B3B3B3 15px 15px 15px; padding-top:2%;
padding-left:2%;">

Any help making this work in IE8 would be great.

Hi Guys, I have a pretty specific page here, work fantastically in Firefox, but not in IE6/7 (or Safari/Opera etc ). Any ideas?! Thanks!

(URL address blocked: See forum rules)


Darren.

Hi all

Another stupid annoyance relating Internet Explorer: it seems IE6 does not recognize the following CSS selector rule:

tag#id.class

e.g.

div#content.active

One has to split it into

div#content .active

Is that right? Do we just have to live with this?

Greetings,
Josh

Hi

I have the code below but i cant get it to work in IE, it works perfectly in mozilla but when in ie it messes up, i tried to re create it a different way but i keep having problems aligning the footer,

if anyone can help or can edit it so it just works in IE and not mozilla it would be a great help as i can then do a browser check and load the apropriate stlye sheet.

cheers

CSS
body { /*sets properties for the body of the document*/
background-color:#ffffff;
margin:0px 0px 0px 0px;
}
#container { /*sets the properties for the container that all the elements are placed in.*/
margin-top: 50px; /*distance from top of browser window*/
margin-left: 50px; /*discance from left of browser window*/
margin-right: 50px; /*distance from right of browser window*/
margin-bottom: 50px; /*distance from bottom of browser window*/
padding: 0px; /*padding for the edges of the container*/
background-color: #66ccff; /*sets the background colour to blue*/
width: 80%; /*sets the width of the container*/
min-width: 241px; /*sets the minimum width of the container*/
}

#footer { /*sets the properties of the footer container*/
padding: 0px; /*sets the padding*/
position: relative; /*sets the position so it is relative to the container its in*/
background-color: #FFFFFF; /*sets background colour to white*/
width: 100%; /*sets width to 100% of the container*/
clear:both; /*clears around the container....vital dont remove it.*/
}

#content { /*sets the properties for the content*/
margin-left: 180px; /*margin from the left of the container...leaves space for leftnav*/
height: *%; /* sets height of content to fill all availble space*/
background-color: #66ccff; /* sets background colour to blue*/
align: right; /*aligns content frame to right of the container*/
min-height: 250px; /*sets the minimum height for the window...same as bg image for left nav*/
padding-left: 5px; /*sets the content padding to 5px so there is some space between txt and edge of frame*/
/*overflow:hidden; can also be set to visible this causes some silly problems*/
border-left: 2px solid; /* sets the left border.. needed so when the content stretches the border stretches with it*/
border-color: #663300; /*sets border colour to brown*/
}

#leftnav { /*sets properties for the left nav bar*/

float:left; /* floats the navigation panel on the left of container*/
background-color : #66ccff; /* sets bg colour to blue*/
width: 180px; /*sets withd of the left nav*/
padding-top: 30px; /*sets padding from top of container*/
border-right: 2px solid; /*sets border so that when nav is extended border continues*/
border-color: #663300; /*sets border colour to brown*/
}


#topleftspace { /*sets properties for the top left space where the rounded corner will go*/
position: absolute; /*sets positioning for element*/
background-color: #66ccff; /*sets bg colour to blue*/
width: 180px; /*sets witdh of element*/
height: 20px; /*sets height of element*/
}

#toprightspace { /*sets propertiese for the top right space where the rounded corner goes.*/
margin-left: 180px; /*sets positioning for element*/
background-color: #66ccff; /*sets bg colour to blue*/
height: 20px; /*sets witdh of element*/
padding-left:5 px; /*sets height of element*/
}

#topleftcorner { /*sets properties for the top left corner...where the gif goes*/
text-align: left; /*aligns the rounded corner gif*/
}

#toprightcorner { /*sets properties for the top left corner...where the gif goes*/
text-align: right; /*aligns the rounded corner gif*/
}

#topleftwhite { /*sets the top white space where text could possibly go*/
position: absolute; /*sets position*/
background-color: #FFFFFF; /*sets bg colour to white*/
width: 180px; /*sets width*/
height: 30px; /*sets height*/
border-right: 2px solid; /*sets border*/
border-color: #663300;/*sets border colour to brown*/
}

#toprightwhite { /*sets the top white space where text could possibly go*/
margin-left: 180px; /*sets margin from the left of the page to cope with topleftwhite*/
background-color: #FFFFFF; /*sets bg colour to white*/
height:30px; /*sets height*/
padding-left:5px; /*sets padding*/
}

#bottomleftspace { /*sets the space where the bottom rounded corner goes*/
position: absolute; /*sets position*/
background-color: #66ccff; /*sets colour*/
width: 180px; /*sets width*/
height :20px; /*sets height*/
border-right: 2px solid; /*sets border*/
border-color: #663300; /*sets border colour*/
}

#bottomrightspace {/*sets space where rounded corner will go*/
margin-left: 180px; /*sets left margin to cope with left spaces*/
background-color: #66ccff; /*sets bg colour*/
height: 20px; /*sets height*/
padding-left: 5px; /*sets padding*/
}

#bottomleftcorner { /*sets properties for the bottom corner gif*/
text-align: left; /*aligns the gif*/
}

#bottomrightcorner { /*sets properties for the bottom corner gif*/
text-align: right; /*aligns the gif*/
}

#bottomleftwhite { /*sets the white space for the bottom*/
position: absolute;/*sets position*/
background-color: #FFFFFF; /*sets the bg colour*/
width: 180px; /*sets width*/
height: 30px; /*sets height*/
border-right: 2px solid; /* sets border*/
border-color: #663300; /*sets border colour*/
}

#bottomrightwhite {/*sets the white space for the bottom*/
margin-left: 180px; /*sets margin width to cope with left space*/
background-color: #FFFFFF; /*sets bg colour*/
height: 30px; /*sets height*/
padding-left: 5px; /*sets padding*/
}

#heading1 { /* sets the main heading properties*/
font-size: 22px ; /* font size*/
font-weight: bold; /* font weight*/
color: black; /* font colour*/
}

#contenttext {/*sets content text style*/
font-size: 12px; /*font size*/
color: #663300; /*font colour*/
}

HTML

<div id="container">
<div id="topleftwhite"></div>
<div id="toprightwhite"></div>

<div id="topleftspace">
<div id="topleftcorner"><img src="images/t-left-corner.gif" width="20" height="20"</div>
</div>


<div id="leftnav"><img src="images/home-menu.gif" width="179" height="251"> </div>

<div id="toprightspace"><div id="toprightcorner"><img src="images/t-right-corner.gif" width="20" height="20"</div></div>
<div id="content"><div id="heading1">Heading 1</div><div id="contenttext"> This is where the content would go This is where the content would go This is where the content would go
This is where the content would go This is where the content would go This is where the content would go
This is where the content would go This is where the content would go This is where the content would go
This is where the content would go This is where the content would go This is where the content would go </div></div>

<div id="footer">
<div id="bottomleftspace">
<div id="bottomleftcorner"><img src="images/b-left-corner.gif" width="20" height="20"</div>
</div>
<div id="bottomrightspace">
<div id="bottomrightcorner"><img src="images/b-right-corner.gif" width="20" height="20"</div>
</div>
<div id="bottomleftwhite"></div>
<div id="bottomrightwhite"></div>
</div>