Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Why doesn't my internal CSS work?

Status
Not open for further replies.

nminaker

Technical User
Jun 17, 2004
19
I have a page that loads a main external stylesheet and then below that it has a few internal stylesheet definitions as follows:
Code:
<head>
<link href="style2.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="functions.js"></script>
<style type="text/css">
	select  {width: 330px;}
	input	{width: 75px;}
</style>
</head>

But when I use the input and select tags later in the code they're not styled to the internal CSS. Why is this?

The weirdest thing about this (and most frustrating) is that if I have "border: none;" to either/both of the CSS definintions above, the border is removed.

I CAN add these CSS definitions inline and it works, but why should I have to?

Thanks!

Nick
 
It could be a specificity issue. Are the selector rules you have in place in your external style sheets more specific than the 'internal' ones? I.e. do they specify nmore than simply 'select' and 'input' (e.g. '#someId select' or '.someClass input')?

If so, this would be the reason.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Hmm... I don't think that was the reason. My code for select in my external CSS was:

Code:
input, label, select {
	display: block;
	margin: 0 10px 10px 0;
	width: 12em;
	float: left;
}
	
select	{
 	position: -3px;
 	width: auto;
	margin: 0px;	
}

(Yes, I realize that "position: -3" is not correct CSS, but it makes IE render the input boxes the same as in FF. :))

I did fix the problem by adding what you thought might be the problem since those selects and inputs are in div's that have id selectors:

Code:
#master select {
 	width: 295px;
}

#transfer input {
 	width: 30px;
 	border: 0px;
 	background-color: lightblue;
 	color: #3264FA;
}

#transfer input:hover {
 	background-color: #3264FA;
 	color: lightblue;
}

Thanks for your help!

Nicholas
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top