CSS - Css Not Overriding Prior Code

I have one css file
which is linked to all my html pages

That css file defines a style for all my
<a> tags

ie - a:link, a:visited, a:hover etc.

Theres one html file
where i need a different style for some of the <a> tags
ive set a sepecific class on these tags ie:
<a class="set1" etc

and in my css file ive tried the following

.set1 a:link
{
etc
}

but for some reason this doesnt override the style on the generic a tags
ie it seems to keep using
a:link {

}

ignoring the

.set1 a:link
{
etc
}

help!

so...
having this problem where i have some css styles applied to form inut boxes, and one of them asks for the user to input his/her email address. IE, thinking it's being helpful, is overriding my nice green background with an ugly yellow background.

I've done some testing, and if i put the word "email", "e_mail", "e-mail", or even "mail_e" in either the html text NEXT to the blank, or in the name of the INPUT tag, IE assumes i want it to be yellow.

any way of overriding this?

CSS:
Code:

.inputBox {
	border: 1 solid black;
	background-color: #bcdd4a;
	font-size: 12;
	width: 200;
	height: 16;
	color: #145e16;
	font-weight: bold;
}

HTML:
Code:

<td valign=top>E-mail:</td>
<td valign=top><input type="text" class="inputBox" name="emailAddress" size=20></td>

IE Version: 6.0.2800.1106
LINK: http://www.t-2.biz/contact.php

please help, frustration setting in.

cheers \\ kfancy

please delete

I have this tag in an external css file

Code:

td {
   text-align:left;  //and yes i know that its left by default
}

Inside my html file I have a td with alignment set to right, which according to my understanding should override the external css file, however it doesn't. The content is still left aligned. Why is that?

Thanks

I am working in Drupal and have a menu with secondary levels. I have coded css on the menu a tag with borders and no background.

.primary-menu-inner ul.sf-menu a {
color: #FFFFFF;
display:block;
border-left:1px solid #ffcc33;
border-right:1px solid #6f4c23;
}

I am trying to override the .primary-menu-inner ul.sf-menu li.active-trail

.primary-menu-inner ul.sf-menu li.active-trail {
background: url(../images/nav.png) no-repeat right -64px;
border-bottom:1px solid #a67c52;
border-right:1px solid #a67c52;
border-left: 1px solid #38230b;
visibility: visible;
}

to where the borders settings on the a tag does not show up on the li.active trail.

Any suggestions would be great...

Hey all, I'm having an issue with the float property. I have 2 nested div tags both floated left, to create two columns, but the div tag holding them doesn't seem to stretch around them. it's looks basically like this...

<div id="container">
<div id="leftCol">
stuff
</div>
<div id="rightCol">
more stuff, WOOT!
</div>
</div>

I only run into the problem with FireFox, so i know that i'm not doing something right! Can anyone help.. thanks!

On my site, we use CSS to change the appearance of all form fields, using the following:

INPUT
{
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 13px;
color: #484848;
background: #EFF4F9;
border: 1px solid #484848;
padding: 2px;
}

Unfortunately, I have a single submit button that for various reasons, I want to have looking like the normal, gray, ugly button. Is there some way to turn off the CSS for this single button? Or somehow override the CSS to make it look like a normal button?

In my main CSS file, the background-color is set to #FFFFFF (white)

however this also erased my background images in the cells of my table
i have tried to add them with style tags, but the main CSS still overrides

Top of the table + cell with bg
PHP Code:
<table cellpadding="0" cellspacing="0" border="0" align="center">
                <tr>
                    <td width="766" height="295" valign="top"  style="background-image:url(images/row1.gif);
background-repeat:no-repeat "> 







This is the main CSS:
PHP Code:
 body,td,th {
    font-family: Tahoma;
    font-size: 11px;
    color:#5D5D5D;
        background-color:#FFFFFF;

}
body {
    font-family: Tahoma;
    font-size: 11px;
    color:#5D5D5D;
        background-color:#FFFFFF;

} 

If you look at the bottom of the page at www.res-technologies_DOT_com/index.php?jos_change_template=restech2 in both IE and FF, you will see that it looks fine in IE, but in FF the page length is extended by exactly the height of the header image at the top of the page. Trying to figure out what's causing this is driving me nuts! Can anyone help?

thx

dh

Hi guys
I've a website, pure css, tableless
It looks good in Firefox, Opera, etc. etc.
It looks VERY bad in IE

Look:

Firefox
http://img465.imageshack.us/img465/4333/shot14jr.png

Internet "Explorer"
http://img378.imageshack.us/img378/8224/shot22cv.png

Website files for download here...
http://rapidshare.de/files/11673865/website.zip.html

Does any1 know how to fix css or web to look good in IE also ?

Thanks a lot in advance

i am trying to put a semi-transparent bg on an iframe and some cells of a table. i've been given lots of advice, none working so far. and i know its possible. is there anyway sum1 could try this or even edit my code? but mostly what im looking for is also where to put things in codes. please and thank u!!

what would happen if i assigned an iframe to "itself" w/ a colored background, and then put in a CSS declaration w/ opacity?

how do i input filters?

how do i input tablelayout(like CSS or HTML)?

where do i insert tags for the scrollbar, which also has not worked for me?

Code:

<style type="text/css">
<!--
@import url("semitransparent.css");
@import url("chromafilter.css");
body,td,th {
	font-family: Herculanum;
	color: #000000;
}
a {
	font-family: Herculanum;
	font-size: 12pt;
	color: #FFFFFF;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFFF00;
}
a:hover {
	text-decoration: underline;
	color: #E05D52;
}
a:active {
	text-decoration: none;
	color: #FFFFFF;
}
.style3 {font-size: 12px}
BODY{ scrollbar-3dlight-color:#FFFFFF; scrollbar-arrow-color:#CCCCCC; scrollbar-base-color:#993300; 
scrollbar-darkshadow-color:#660000; scrollbar-face-color:#990000; scrollbar-highlight-color:#CC0000; scrollbar-shadow-color:#666666; }
-->
</STYLE>
</head>

<body>
<map name="booster" id="booster">
  <area shape="rect" coords="126,87,249,107" href="boosterclub.htm" target="iframe2" onMouseOver="filter:glow(color=#FFFF99,strength="5");">
  <area shape="poly" coords="75,49" href="#">
  <area shape="rect" coords="345,82,499,108" href="Danceprogram.htm" target="iframe2">
  <area shape="rect" coords="588,87,711,106" href="dancecamp.htm" target="iframe2">
  <area shape="rect" coords="783,84,971,107" href="fly.htm" target="iframe2">
  <area shape="rect" coords="131,42,209,77" href="index2.htm" target="iframe2">
</map>
<table width="1134" height="717" border="0" cellspacing="10">
  <tr>
    <th height="174" colspan="2" scope="row"><img src="logofory.png" width="1060" height="112" border="0" usemap="#booster"></th>
  </tr>
  <tr>
    <th width="235" height="37" scope="row" bordercolor="#FFE4E0" border="1">About us </th>
    <td width="865" rowspan="3"><iframe frameborder="1" name="iframe2" src="index2.htm" allowtransparency="30" width="750" height="432" scrolling="yes"></iframe></td>
  </tr>
  <tr>
    <th height="211" scope="row">&nbsp;</th>
  </tr>
  <tr>
    <th height="175" scope="row"><table width="235" height="173" border="1" bordercolor="#FFA2A2" bgcolor="#FFE2CB" id="pink">
      <tr>
        <th width="198" height="18" scope="row">New Events!!! </th>
      </tr>
      <tr>
        <th height="128" scope="row"><p>1- We are having a competition this weekend in Portland, OR. Wish our tap girls good luck
          </p></th>
      </tr>
    </table></th>
  </tr>
  <tr>
    <th height="32" scope="row">&nbsp;</th>
    <td align="center"><b>Designer:</b> Melody Shinyama <b>Date Published:</b> January 25, 2006
	<br><b>Host:</b><a href="http://www.freewebs.com/"> www.freewebs.com</a><br> 
	<b>Last Updated:</b> January 25, 2006
    </td>
  </tr>
</table>
<p><br>
  <br>
</p>
</body>
</html>

this is also an attached code. btw i am working w/ dreamweaver.

Code:

<style type="text/css">

tbody {background-color:#FF6971;
	width: 300px;
	margin: 0 50px;
	border: 2px;
	filter:alpha(opacity=50);
	opacity: 0.5;
	-moz-opacity:0.5;
	}

body,td,th {
	font-family: Herculanum;
	color: #000000;
}
a {
	font-family: Herculanum;
	font-size: 12pt;
	color: #FFFFFF;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFFF00;
}
a:hover {
	text-decoration: underline;
	color: #E05D52;
}
a:active {
	text-decoration: none;
	color: #FFFFFF;
}
.style1 {
	color: #000000;
	font-family: Herculanum;
}
#transbox {
	width: 300px;
	margin: 0 50px;
	background-color: #CF0000;
	border: 2px solid;
	filter:alpha(opacity=50);
	opacity: 0.5;
	-moz-opacity:0.5;
	}
	#bg {
	width: 400px;
	height: 300px;
	background: url(redbg.jpg);
	background-repeat: repeat;
	border: 0;
	}
#transbox div {
	font-weight: bold;
	color: #000000;
	filter:alpha(opacity=100);
	opacity: 1;
	-moz-opacity: 1;
	position: relative;
	visibility: hidden;
	}

</style>

this is the last one
Code:

table, tr, span, li, p, div, textarea, DIV {
font-family: Herculanum;
color: #000000; 
font-weight:normal;
font-decoration:none;
font-style:normal;
background-color:transparent;
border-color: #000000;
empty-cells:hide;
}
td, li, p, div, textarea {
font-family: Herculanum;
border-color: #000000;
}	
table{
border-color: #000000;
}
a.navbar{
font-family: Herculanum;
font-size:12pt;
font-weight:bold;
}
a.navbar:link{
color: #CCCCCC;
}
a.navbar:active{
color: #FFCC00;
}
a.navbar:visited{
color: #CCCCCC;
}
a.navbar:hover{
color: #FFCC00;
}
a.searchlinkSmall{
font-family: Herculanum;
font-size:12pt;
text-decoration:none;
font-weight:normal;
}
a.searchlinkSmall:link{
color: #999999;
}
a.searchlinkSmall:active{
color: #FF0033;
}
a.searchlinkSmall:visited{
color: #999999;
}
a.searchlinkSmall:hover{
color: #FF0033;
}
body{
font-family: Herculanum;
background-color: 
#89100D;
background-image:url(DanceFloor1-0_big.jpg);
background-position:center center;
background-repeat:no-repeat;
background-attachment:fixed;
}
.nametext{
font-family: Herculanum;
font-size:16pt;
color: #000000;
font-weight:bold;
}
.blacktext10{
font-family: Herculanum;
font-size:12pt;
color: #FF0000;
font-weight:normal;
}
.blacktext12{
font-family: Herculanum;
font-size:12pt;
color: #999999;
font-weight:normal;
}
.btext, .itext, .text{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:bold;
}
.orangetext15{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:none;
}
.lightbluetext8{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:none;
}
.tmz_imp{
font-family:arial;
color: #FF0000;
font-weight:bold
}
a img{
border-color: #666666;
border-width:2px;
border-style:solid;
filter:Alpha(Opacity=60);
}
a:hover img{
border-color: #666666;
border-width:2px;
border-style:solid;
filter:none;
}
body{
scrollbar-arrow-color: #FF0000;
scrollbar-Track-color: #990000;
scrollbar-Highlight-color: #FF0000;
scrollbar-base-color: #FF0000;
scrollbar-Face-color: #990000;
scrollbar-Shadow-color: #FF0000;
scrollbar-DarkShadow-color: #FF0000;
}

I often see css code with "greater than" sign like this:

html>body #centercontent {
margin-left: 201px;
margin-right:201px;
}

what does this mean? What is the difference with
body #centercontent {
margin-left: 201px;
margin-right:201px;
}

Thanks for the enlightment.

For some reason, the following code displays perfect in firefox, but its atrocious in IE. Im doing this for a client, so i need it to display correct in all browsers...can anyone pinpoint what i am doing wrong?

here is the code:
Code:
css

*
{
	margin: 0px;
	padding: 0px;
}
html
{
	width: 100%;
	height: 100%;
}
body
{
	height: 100%;
	width: 100%;
	background-color: /*#E0F8F7 */#989B9F;
	margin: 0px;
	padding: 0px;
}
#login_box
{
	background: url( '../images/login2.png' ) no-repeat center center;
	position: fixed;
	width: 319px;
	height: 417px;
	top: 50%;
	left: 50%;
	margin-top: -209px;
	margin-left: -160px;
}
#input_div
{
	position: fixed;
	width: 103px;
	height: 38px;
	margin-top: 230px;
	margin-left: 55px;
}
#lock
{
	border: none;
	position: fixed;
	background: url( '../images/lock.png' ) no-repeat;
	width: 10px;
	height: 13px;
	margin-top: 287px;
	margin-left: 270px;
}
#forgot
{
	position: fixed;
	margin-top: 362px;
	margin-left: 50px;
}
#login_box h1
{
	color: #EDF2F7;
	font-size: 10px;
	text-align: left;
	font-family: arial, sans-serif;
}
.input
{
	width: 200px;
	font-size: 12px;
	text-align: left;
	font-family: arial, sans-serif;
	border: solid 1px #85b1de;
	background: url( '../images/gr.png' ) repeat-x #EDF2F7;
	background-position: top;
	padding: 4px;
}
input[type="text"]:focus, input[type="password"]:focus
{
	border: solid 1px #31677B;
}
#login_box p
{
	font-weight: bold;
	color: #478FAB;
	font-size: 12px;
	text-align: left;
	font-family: arial, sans-serif;
}
#button_div
{
	position: fixed;
	width: 103px;
	height: 38px;
	margin-top: 360px;
	margin-left: 190px;
}
.button
{
	border: none;
	width: 103px;
	height: 38px;
	text-indent: -1000em;
	cursor: pointer;
	background: url( '../images/login_button.png' ) no-repeat center center;
}

in Internet Explorer:
Incorrect

in Firefox, Opera, Chrome... ( Any code compliant browser )
Correct

....Any help please?

I am trying to make this header menu go horizontal but I can't get it to do anything but be vertical. You can see what is happening by visiting SodShopWichita.co m The green buttons. Anyones help would be greatly appreciate as I have spent hours trying to figure it out. I'm new to CSS. Here is the code:



/******************************** Main Navigation ******
* Global topmenu navigation, degrades gracefully to css
* if Javascript is disabled. Else applies fade effect.
*/

#navcontainer {
height:50px;
float: right;
width:1014px;
position:relative
}

/* Menu Body */
ul#navigation {
height:35px;
list-style:none;
float:left;
padding:0px 1px 0px 0px;
margin:0px 0px 0px 10px;
float: left;

}
/* Float LI Elements - horizontal display */
ul#specialnav li {
float:left;
display: block;
}


/************ SPECIAL NAV ************************/

#specialnav {
height:50px;
width:185px;
position:relative;

}
/* Link - common attributes */
#specialnav a {
background:url('specialnav.png') no-repeat scroll top left;
display:block;
height:35px;
width:185px;
position:relative;
z-index:10;
line-height:2.5em;
font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;
color:#fff;
font-size:14px;
text-align:center;
text-decoration:none;
padding-left: 0px;
padding-right: 0px;
}
/* Specify width and background position attributes */
#specialnav li.isactive a {
background:url('specialnav.png') no-repeat scroll 0 -105px; bottom left repeat-x
display:block;
height:35px;
width:185px;
position:relative;
z-index:10;
padding-left: 0px;
padding-right: 0px;
}

/* Link (on hover) - common attributes */
#specialnav li.highlight a:hover {
background:url('specialnav.png') no-repeat scroll 0 -35px;
display:block;
height:35px;
width:185px;
line-height:2.5em;
position:relative;
z-index:10;
padding-left: 0px;
padding-right: 0px;
}
/* Link - common attributes */
#specialnav li.highlight a:active, #specialnav li.highlight a:focus,
#specialnav li a:active, #specialnav li a:focus {
background:url('specialnav.png') no-repeat scroll 0 -70px;
display:block;
height:35px;
width:185px;
position:relative;
z-index:10;
padding-left: 0px;
padding-right: 0px;
}

/* fade effects start here */

/* Span (on hover) - common attributes */
#specialnav a span.animate {
background:url('specialnav.png') no-repeat scroll 0 -35px;
display:block;
position:absolute;
line-height:2.5em;
top:0;
left:0;
height:100%;
width:100%;
z-index:10;
cursorointer;
}

/* Shift background position on hover */
ul#navigation li a span {
background-position:0px -35px;
}
/* Shift background position on hover for the class: "isactive" */
ul#navigation li.isactive a span {
background-position:0px -35px;
}
span.trans {display:none;}

Greetings everyone!

I'm quite new for css positioning, less than 2 weeks, but I can tell you I feel like a young man entering puberty again just knowing I'll have myself free from tables very soon.

My question is an easy one. I would like to know if isnt it more correct to leave some styles outside the css file when we are using it particularly only one time. Lets say Ill use 2 distinguished boxes in the "contact" session, then would it be ok to just use "<div style="etc">content</div>" instead of building it inside the css?

Thanks in advance!

- Dehumanizer