Log in

View Full Version : CSS not working proper in Firefox and Opera



vipulred
04-28-2011, 12:00 PM
I am having problem in CSS and HTML not working in Firefox and Opera but working good in Internet Explorer.

Awaiting solution.

--------------------------------------------------------------------------
CSS Style.

/* -----------------
Teaser 1
----------------- */

.TeaserHead1 {
background-color: #E1E7F1;
color: #00C192;
font-size: 12px;
font-weight: bold;
width: 100%;
}

.TeaserHead1Padding {
padding: 3px 10px 3px 10px;
}

.TeaserHead1 h6 {
color: #00C192;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}

.TeaserHead1 h5 {
color: #00C192;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}

.TeaserHead1 h4 {
color: #00C192;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}

.TeaserHead1 h3 {
color: #00C192;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}

.TeaserHead1 h2 {
color: #00C192;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}

.TeaserHead1 h1 {
color: #00C192;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}

.TeaserHead1 {
color: #00C192;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}

.TeaserText1 {
padding: 10px 8px 10px 8px;
}

/* -----------------
Teaser 2
----------------- */

.TeaserHead2 {
background-color: #9BB1CF;
color: #00C192;
font-size: 12px;
font-weight: bold;
width: 100%;
}

.TeaserHead2Padding {
padding: 3px 10px 3px 10px;
}

.TeaserHead2 h6 {
color: #ffffff;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}

.TeaserHead2 h5 {
color: #ffffff;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}

.TeaserHead2 h4 {
color: #ffffff;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}

.TeaserHead2 h3 {
color: #ffffff;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}

.TeaserHead2 h2 {
color: #ffffff;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}

.TeaserHead2 h1 {
color: #00C192;
font-size: 12px;
font-weight: bold;
text-decoration: none;

}

.TeaserHead2 {
color: #ffffff;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}

.TeaserText2 {
padding: 10px 8px 10px 8px;
}


/* -----------------
Teaser Produkte
----------------- */

.teaserProdukte {
width: 100%;
margin: 0px;
padding: 0px;
}

.teaserProdukte li {
border-top: 1px #fff solid;
list-style: none;
margin: 0px;
padding: 0px;
margin-top: 2px;
}

.teaserProdukte a {
display: block;
background-color: #fff;
color: #5D5D5D;
font-weight: normal;
font-size: 11px;
padding: 0px 6px 0px 8px;
margin-left: 6px;
text-decoration: none;
text-transform: uppercase;
}

.teaserProdukte a:hover {
background-color: transparent;
color: #fff;
}
--------------------------------------------------------------------------
HTML

<div class="TeaserHead1"><div class="TeaserHead1Padding"><h1>Products</h1></div></div>
<div class="TeaserText1">

<ul class="teaserProdukte"><li style="background-color: #454545">
<a href="our_products/agglomerator_densifier.html">Agglomerator / Densifier &nbsp;»</a></li>
<li style="background-color: #FFDD53">
<a href="our_products/shredders.html">Shredders »</a></li>
<li style="background-color: #99CC00">
<a href="our_products/extrusion_line.html">Extrusion Line&nbsp;»</a></li>
<li style="background-color: #9B9BFF">
<a href="our_products/washing_line.html">Washing Line&nbsp;»</a></li>
<li style="background-color: #63D8D8">
<a href="our_products/pet_recycling_line.html">PET-Recycling Line&nbsp;»</a></li>
<li style="background-color: #F03D00">
<a href="our_products/grinder_granulator.html">Grinder / Granulators&nbsp;»</a></li>
<li style="background-color: #DDDD00">
<a href="our_products/mixer.html">Mixers&nbsp;»</a></li>
<li style="background-color: #2F396C">
<a href="our_products/auxillary_equipment.html">AUXIALLARY EQUIPMENT&nbsp;»</a></li></ul>
</div>

djr33
04-28-2011, 12:58 PM
Can you explain what is not working? And if you can give us a link to your site rather than posting the code here, that will make it easier for someone to help you. (Posting the code does help some, though.)

CoolRabbit
05-13-2011, 07:02 PM
I have the same problem - the website I was working on works fine in the older Firefox 3 and it works with IE, but not Firefox 4 or Chrome. Here is the website:
www.dsjband.com
Any help or advice would be greatly appreciated!