CSS style sheet browser compatibility
I designed a site using css and div tag. It's working fine in IE 8 but it's not working properly in Firefox. Some resolution problem is coming in Firefox for some pages.
Is this problem due to css or div?
This is my css style sheet...
@charset "utf-8";
/* CSS Document */
a.bottom:link,a.bottom:visited,a.bottom:active
{
/*display:compact;*/
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:normal;
color:#FFFFFF;
background-color:#BF007F;
text-align:center;
padding:10px;
text-decoration:none;
}
a.bottomClick:link,a.bottomClick:visited,a.bottomClick:active
{/*display:compact;*/
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:normal;
color:#BF007F;
background-color:#F0F0F0;
text-align:center;
padding:10px;
text-decoration:none;
}
.MainHeading {
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color:#000000;
font-weight:bold;
}
.HeadingOfContentBox {
font-family:Arial, Helvetica, sans-开发者_StackOverflow社区serif;
font-size:16px;
color:#000000;
font-weight:bold;
}
.ContentText {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#000000;
font-weight:normal;
}
#ContentTable
{
font-family: Arial, Helvetica, sans-serif;
background-color:#F0F0F0;
background-repeat:repeat-y;
width:960px;
}
ul
{
list-style-type:none;
padding:4px;
margin:0px;
font-family:Arial, Helvetica, sans-serif;
}
li
{
background-image:url();
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:18px;
font-family:Arial, Helvetica, sans-serif;
line-height:1.5;
margin-left:20px;
margin-right:20px;
}
ul.unorder
{
list-style-type:none;
padding:0px;
margin:0px;
font-family:Arial, Helvetica, sans-serif;
}
li.unorder
{
background-image:none;
background-position:0px 5px;
padding-left:14px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
font-weight:normal;
}
A.topLink:Link {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#bf007f;
text-decoration:underline;
font-weight:bold;
}
A.topLink:hover {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#bf007f;
text-decoration:underline;
font-weight:bold;
}
A.topLink:Visited {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#bf007f;
text-decoration:underline;
font-weight:bold;
}
#framecontentLeft{
top: 0;
left: 0;
width:320px; /*Width of left frame div*/
float:left;
background-image:url(../images/varioCatering02_02.png);
color: white;
}
#framecontentRight{
left: auto;
right: 0;
float:right;
width: 320px; /*Width of right frame div*/
background-image:url();
color: white;
}
#maincontent{
width:960px;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
#divleft
{
float:left;
}
#divright
{
float:right;
}
p
{
text-align:justify;
padding:10px;
line-height:1.5;
margin-left:10px;
margin-right:10px;
margin-top:0px;
}
And Html code where it is not working fine
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dimari - efficient customer solutions for your industry</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
background-image:url();
background-repeat: repeat-x;
}
-->
</style>
<link href="css/CssStyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="framecontentLeft"> </div>
<div align="center">
<div id="maincontent">
<div style="height:10px;"></div>
<div id="divleft">LogoImage with hyperlink</div>
<div id="divright"> <a class="topLink" href="Kontakt.html">Kontakt</a> <a class="topLink" href="Impressum.html">Impressum</a> </div>
<div style="height:80px"> </div>
<div align="center" style="margin-bottom:10px;">BannerImage</div>
<div id="maincontent" style="margin-bottom:8px;">
<div style="height:10px;"></div>
<div id="divright" > <b class="MainHeading">Hyperlink</a></b> <b class="MainHeading">HyperLink</b> </div>
</div>
<br/>
<div id="maincontent" >
<div id="ContentTable">
<div id="divleft">
<div align="left">
<h3 class="HeadingOfContentBox" style="text-align:left;padding:10px; margin-left:10px;margin-right:10px">Schulen/Eltern</h3>
</div>
<p class="ContentText" style="width:960px;"> </p>
</div>
</div>
</div>
<div id="maincontent">
<div id="ContentTable" style="height:450px;">
<div style="float:left; margin-left:15px;display: inline;" ><span style="text-align:left" >
<h4 class="ContentText" style="margin-left:10px;margin-right:10px;padding:10px;"> Argumente:</h4>
<ul>
<li> <span class="ContentText">Bargeldloses Bezahlen</span></li>
<li class="ContentText">Sicherer Online Login </li>
<li class="ContentText">Abrechnung pro Gramm > Kind dosiert sich je nach Hunger Essen > wenn mehr Hunger, Nachtisch holen und bequem wieder per Karte bezahlen </li>
<li class="ContentText"> Schnellere Essensausgabe > Kind/Lehrer mehr Zeit zum Essen an sich </li>
<li class="ContentText">Essen ohne Vorbestellung </li>
<li class="ContentText">Sicherer online Login </li>
<li class="ContentText">Übersichtlichkeit: Nutzungsdaten, Bankdaten, Guthaben, Gekauftes Essen </li>
<li class="ContentText"> Anmeldung auch ohne Emailadresse, einfach telefonisch </li>
<li class="ContentText">Ampelstatus im online Account: Angabe wie viel Restguthaben vorhanden </li>
<li class="ContentText">Automat. Benachrichtigung über Restguthaben </li>
</ul>
</span> </div>
</div>
</div>
<div id="maincontent">
<div id="ContentTable">
<p>
<!-- Add your text here-->
<!-- Add your text here-->
<!-- Add your text here-->
</p>
<p></p>
</div>
</div>
</div>
</div>
<div id="framecontentRight"> </div>
</body>
</html>
I tried with my mozilla browser its looks perfect if u getting the problem just copy that particular css line and as example background : #fff; and add this line -moz-background : #fff; now the css look like this
-moz-background : #fff;
background : #fff;
both will be there...... moz will be make mozilla compatible another one for all browser support.... i hope this will be help you
加载中,请稍侯......
精彩评论