stackoom
  简体   繁体   中英

CSS style sheet browser compatibility

 原文  2011-04-11 10:45:09  8   1    html/ css

Question

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-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>&nbsp;&nbsp;&nbsp; <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>

1 answers

solution1
 -1  2017-12-27 02:42:58

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question CSS - cross browser compatibility = different style sheets? CSS Browser Compatibility issues CSS style sheet implementation jQuery in CSS style sheet CSS Style Sheet is Not Working? css image filters - browser compatibility HTML and CSS browser compatibility issue Browser compatibility issues with CSS3 Browser compatibility issue with css and html CSS Browser Compatibility Issue - <hr />
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM