Gaurav Mahindra Gaurav Mahindra - 6 months ago 21
CSS Question

Unordered List and fonts appearing differently in different browsers

I am using an unordered list and the Script MT Bold font on this page. Now there are two issues:


  1. The unordered list is displaying correctly in Chrome and Opera, but not in Internet Explorer and Firefox, that is, it is not displaying the show-and-hide effect and all contents are visible by default.

  2. Fonts are displaying correctly in Firefox and Internet Explorer, but not in Chrome and Opera.
    I am using the latest version of all browsers. Here is my code:





article p {
color: green;
font-size: 15px;
font-family: arial;
width: 880px;
}

body {
margin:0px auto;
text-align:left;
}
#mainDivContainer{
position: relative;
margin-top: 0px;
margin-bottom: 0px;
}

#insideMainDivContainer{
width: 1050px;
margin-top: 5px;
margin-left: 120px;
margin-right:auto;
background-color:white;
border:1px solid black;
}
details {
color: green;
font-family: Script MT Bold;
font-size: 20px;
}
h1 {
margin-top: 30px;
font-family: Script MT Bold;
color: green;
font-size: 30px;
}

details ul {
color: green;
font-size: 15px;
}
.auto-style1 {
color: green;
font-style: italic;
text-align: justify;

}

.auto-style2:hover{
-ms-transform: scale(1.1,1.1);
transform: scale(1.1,1.1);
-webkit-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);

}

.auto-style3:hover{
font-weight: bold;
}

#links{
width: 950px;
height: 170px;
position: relative;
margin:25px;
margin-left: 30px;
padding: 0px;
overflow: hidden;
}
#catchline{
width:500px;
height:20px;
float:left;
text-align:center;
}

#textHolder{
float:left;
width: 950px;
height: 300px;
word-spacing: 1px;
padding-left:10px;
padding-top: 20px;
text-align:left;
margin-top: 30px
}
special{
font-family: Script MT Bold;
list-style-type: none;
font-size: 25px;
font-style: italic;
font-weight: bold;
color: chocolate;
margin-top: 10px
}

<html>
<body>
<div id="mainDivContainer">
<div id="insideMainDivContainer">

<div id="catchline">
<span class="auto-style1"><b>We make your experience a special one!</b></span>
</div>

<div id="textHolder">
<article>
<div class="auto-style1"><p class="auto-style3">
FoodHub is an American chain of restaurants that enables food lovers to come together and
enjoy food. It provides online delivery of food items, 24*7. At FoodHub, you will have
some of city's best destination cafes, bistros, restaurants, fast food and others under one roof.
</p></div>

<div class="auto-style1"><p class="auto-style3">
FoodHub provides its customer a healthy combination of surreal surroundings in addition to
tongue tickling food of different cuisine. FoodHub is not only the best choice for
traditional food for any hour of day, but also a good place for children to have fun.
We provide entertaining facilities, such as puppet shows, for children.
</p></div>
</article>

<details>
<summary><b> Cuisines we offer:</b></summary>
<ul>
<li>American</li>
<li>Spanish</li>
<li>Mexican</li>
<li>Indian</li>
<li>Chinese</li>
<li>Mughlai</li>
<li>Portuguese</li>
<li>Vietnamese</li>
<li>Italian</li>
<li id="special">We also provide bakery products.....</li>
</ul>
</details>
<h1><I>
Come with your family or friends to cater brilliant tastes! </I></h1>
</div>

</div>
</div>
</body>
</html>





I tried my best to solve it, but nothing.

Answer

The <details> element is not currently (11th May 2016) supported by IE and is an experimental feature in Firefox requiring a preference 'flag' to be set/enabled.

Per MDN

This feature is available since Firefox 47 behind the preference dom.details_element.enabled, defaulting to false, except on Nightly and Aurora versions (bug 1241750). Support for it is enabled by default, i.e. the preference is defaulting to true, since Firefox 49.0 (bug 1226455).

Regarding the font issue (and please don't ask more than one question at a time) I believe the other answer is correct...use quotes.