CSS - Inline Css Definition Works, Internal Doesn't

Hi,

I have a strange problem where an inline style works, but if I put it in a new style class, it won't!

Here is the CSS for a menu list:
Code:

#menu li{
vertical-align:middle;
height:2em;
padding-left:7px;
padding-top:6px;
float:left;
margin-left:25px;
background-color:#8D8387;
display:block;
}

And then I want to apply this to the first list item:
Code:

.noMargin{
margin-left:0;
}

When I apply that class to the list item, nothing happens. However, when I use the inline style: style="margin-left:0;", it does work.

What's going on?

Thanks

Hi all,

Im hoping someone out there can help me.

Ive just discovered ive made a massive mistake by designing my site and viewing it in IE. It looks fine in IE, but of course there is one part that looks terrible in FF ( not FFs fault i know!)

The navigation bar is an inline list that is supposed to appear tabbed but in FF one of the tabs is pushed up a lot higher and I cant figure out what is pushing it up. i thought it might be the #ul secondary pushing it up (as this appears a bit wonky as well...)and i tried adding /* Hides from IE-mac \*/

#ul secondary {
position: absolute;
margin: 0;
padding: 0;
bottom: -41px;
left: 1px;
width: 100%;
}
/* End hide from IE-mac */

but this didnt change anything. i tried using the DOM inspector that comes with firebug but I still cant figure out whats pushing up the one home page tab....

Any tips anyone might have would be greatly appreciated.



My style sheets is




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

2 column container

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#content-container-two-column {
margin-top:3px;
margin-left:auto;
margin-right:auto;
padding:10px;
width:728px;
position:relative;
margin-bottom: 50px;
}

#content-main-two-column {
width:728px;
float:left;
}

#content-side-two-column {
float:right;
width:160px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

3 column container

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#content-container-three-column {
margin-top:3px;
margin-left:auto;
margin-right:auto;
padding:10px;
width:728px;


position:relative;
}

#content-main-three-column {
width:355px;
float:left;
margin-left:25px;
}

#items-left {
width:148px;
float:left;
margin-right: 45px;

}

#items-right {
width:148px;
float:right;
margin-right: 45px;

}





#content-side2-three-column,
#content-side1-three-column {
width:150px;
font-size:1.1em;
}



#content-side2-three-column {
float:right;
}

#content-side1-three-column {
float:left;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

index page

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#three-column-container {
background:url(../../images/bg-three-column-home.png) repeat-y;
padding:0;
margin:20px 0 10px 0;
}

#three-column-side1 {
float:left;
width:148px;
margin-right: 45px;
}

#three-column-side2 {
float:right;
width:142px;
background-color: #E9E9E9;
padding-left: 2px;
padding-right: 2px;
}
.centre {
background-position: center;
margin-bottom: 5px;
text-align: center;
padding: 0px;
}


#three-column-side22 {
float:right;
width:148px;
}

#three-column-middle {
width:340px;


margin:0px 10% 0px20%;
margin-right: 10%;
margin-left: 20px;
}


#three-column-middle-air {
width:340px;


margin:0px 10% 0px20%;
margin-right: 10%;
margin-left: 20px;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

html

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

body {
margin:0px;
background-color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.7em;
line-height:1.4em;
color:#666666;
}

p {
margin:10px 0;
}

p.no-padding-no-margin {
padding:0;
margin:0;
}

hr{
color: #E5E5E5;
background-color: #E5E5E5;
height: 1px;
border:0;
margin:15px 0;
_margin:10px 0;
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

headings

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


h1, h2, h3, h4, h5, h6 {
font-size:1.8em;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.1em;
margin:5px 0;
}

h1 {
margin-bottom:0;
}

h1, h2 {
margin-top:0px;
}

h2 {
font-size:1.3em;
}

h3 {
font-size:1.1em;
}

h3.small {
font-size:1.2em;
}

h4 {
font-size:1.1em;
}

h5 {
font-size:1.1em;
}

h6 {
font-size:1em;
}


a:link {
color:#d61719;
text-decoration:none;
}

a:visited {
color:#980000;
text-decoration:none;
}

a:hover {
text-decoration:none;
}

a:active {
color:#980000;
}

#content-side-two-column a:link,
#content-side2-three-column a:link,
#content-side1-three-column a:link,
#content-side-two-column a:visited,
#content-side2-three-column a:visited,
#content-side1-three-column a:visited {
text-decoration:none;
}

#content-side-two-column a:hover,
#content-side2-three-column a:hover,
#content-side1-three-column a:hover {
text-decoration:underline;
}



.img_text {

float:left;
margin-top:0px;
margin-right:10px;
margin-bottom:0px;

}




#poster-photo-container {

margin-left:auto;
margin-right:auto;
width:750px;

position:relative;
}

.poster-photo-image {

display:block;

}


ul {
margin:0;
padding:0;
list-style:none;
}

li {
list-style:none;
background:url(../../images/list-bullet-02.gif) no-repeat 0 .8em;
padding:.2em 0 .2em 1em;
margin-left:0.4em;

}



#content-side1-three-column ul.list-of-links,
#content-side2-three-column ul.list-of-links {
margin: 0 0 30px 0px;
}

ul.list-of-links li{

background-image:url(../../images/list-bullet-01-link.gif);
}

ul.list-of-links li.current {
background-color:#E5E5E5;
}


ul.no-lines,
ul.no-lines li {
border:none;
}



.feature-area {
background-color:#6799D1;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

images

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

img {
border:none;

}

.img_footer {
border:none;
padding-right:10px;

}
.photo-border {
padding:0px;
margin-bottom:5px;
display:block;

/*background-image: url(../../images/bg-photo.png);
background-repeat: repeat-x;
background-position: top;*/
}

.photo-float-left {
float:left;
margin-left:0px;
margin-right:10px;
margin-top:0px;
margin-bottom:40px;

}

.photo-float-details {
float:left;
margin-left:0px;
margin-right:10px;
margin-top:0px;
margin-bottom:1px;

}

.image-border-none {
border:none;
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

FOOTER

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#footer {
margin-top:3px;
margin-left:auto;
margin-right:auto;
width:740px;
padding:.8em 0 1em 10px;
position:relative;
font-size:0.9em;
text-align: center;
}



#footer a:link,
#footer a:visited {
color:#555450;
text-decoration:none;
padding:0px 0px 0px 10px;
}

#footer a:hover {
color:#64645c;
text-decoration:none;
padding:0px 0px 0px 10px;
}

#footer a:active {
color:#FFFFFF;
padding:0px 0px 0px 10px;
}






.arrow {
vertical-align:middle;
}



.clear {
clear:both;
}

.none {
display:none;
}

.dent {
margin-left: 20px;
}



/*Tabs*/


html, body {
margin: 0px;
padding: 0px;
}

body {
text-align: left;
}

#Wrapper {
font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-align: left;
width: 750px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
}

#Container {
background-color: #FFFFFF;
color: #333;
clear: both;
margin: 0px;
padding-top: 2.2em;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
width: 750px;
float: left;
border-top: 1px solid #C0C0C0;
display: block;
}




#Content {
background-color: #FFFFFF;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #C0C0C0;
padding-bottom: 20px;
margin: 0px;
width: auto;
height: auto;
}

#Navigation {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
color: #333333;
position: relative;
height: 50px;
display: block;
width: auto;
}
ul#primary {
margin: 0;
padding: 0;
position: absolute;
bottom: -1px;
width: 728px;
}

ul#primary li {
display: inline;
list-style: none;
}

ul#primary a,ul#primary a.active {
width: 10em;
display: block;
float: left;
text-align: center;
font-family: tahoma, verdana, sans-serif;
font-size: 12px;
text-decoration: none;
color: #333;
letter-spacing: .1em;
margin-top: 0px;
margin-right: 2px;
margin-bottom: 0;
margin-left: 0;
padding-top: 4px;
padding-right: 0;
padding-bottom: 4px;
padding-left: 0;
}




ul#primary a.active,ul#primary a.active:hover {
border-top: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-bottom: none;
border-left: 1px solid #c0c0c0;
background: #ffffff;
color: #333;
margin-top: 0;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 0px;
}




ul#primary a {
border-top: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-bottom: none;
border-left: 1px solid #c0c0c0;
margin-top: 0px;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
background: #e8e9e1;
}

ul#primary a:hover {
margin-top: 1;
border-color: #c0c0c0;
color: #333;
padding-bottom: 3px;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-left: 0px;
background: #e9eaea;
}
ul#secondary {
position: absolute;
margin: 0;
padding: 0;
bottom: -21px;
left: 1px;
width: 100%;
}

/* Hides from IE-mac \*/
#ul secondary {
position: absolute;
margin: 0;
padding: 0;
bottom: -41px;
left: 1px;
width: 100%;
}
/* End hide from IE-mac */



ul#secondary li a {
width: auto;
display: block;
float: left;
padding: 0 10px;
margin: 0;
text-align: center;
border-top: none;
border-right:none;
border-bottom: none;
border-left: none;
background: none;
color: #666;
background-color: #FFFFFF;
text-decoration: none;
}

/* Hides from IE-mac \*/
#ul secondary li a {
width: auto;
display: inline;
float: left;
padding: 0 10px;
margin: 0;
text-align: center;
border-top: none;
border-right:none;
border-bottom: none;
border-left: none;
background: none;
color: #666;
background-color: #FFFFFF;
text-decoration: none;
}
/* End hide from IE-mac */

ul#secondary li a:hover {
color: #333;
border-top: none;
border-bottom: none;
border-left: none;
margin: 0px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
background: none;
}

ul#secondary li a:active {
color: #000;
font-weight: bold;
}

ul#secondary li:last-child a {
border: none;
}

.bold {

font-weight:bolder;
color:#000000;}


#number {

width:20opx; }



And some of the html

<div id="Wrapper">
<img src="pics/logo2.gif" align="right" />
<div id="Navigation">
<ul id="primary">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="print.html">Printing</a>

<ul id="secondary">
<li><a href="about.html">About us</a></li>
<li><a href="environment.html">Environment</a></li>
<li><a href="links.html">Links</a></li>
</ul>
</li>
<li><a href="products.html">Products</a></li>
<li><a href="cart">View Cart</a>
<li><a href="contact.html">Contact us</a></li> </ul>
</div>
<div id="Container">
<div id="Content">
<div id="poster-photo-container"><img src="pics/header6.jpg" alt="" class="poster-photo-image" /></div>
<div id="content-container-two-column">
<div id="content-main-two-column">
<h1>
Welcome to The Picture Works Printing Room</h1>

i have 10 div's with abolute positioning
and the css is external

the html is like this <div class="1">
<div class="2">.........

it works in IE but in firefox the images get put all below eachother on the left...except if i put the css inline it works

Hello. I am new to css and i made the following

h1{
position:absolute;
left:850px;
top:300px;
color:green;
}
I put this in a form that i wanted to be shown at the right bottom of my screen and in mozzila it worked fine, but i found out that in internet explorer it didn't and in general i coudn't view right anything that had specific positions. Is there a bug?

This is kind of a continueation of a thread in the JS forum. But I am trying to do a CSS only thing here, so I thought it would be more appropriate here. I have these tabs that change color by altering the background position. Normal is orange, hover is yellow, and active is supposed to go kind of pink. Hover works fine as you see. But active does nothing, both in FF and IE.

I gathered up all the style stuff that's relevant and put it all in the one file, tho that's not usually how I code things. But anyway, the code can talke clearer than I can.

http://www.colleenweb.com/tests/atest.html

Why doesn't active work??? It's late at night so the head isn't 100% but Ive been beating on it a while. Thanks!!!