Reputation: 289

Strange html behaviour if use utf-8, empty content area

I am building a css drop down menu' with sub menu that I found online. I have a strange issue. If I don't specify charset everything is working fine, see screenshot of resize window on Chrome:

Menu OK Thai characters scrambled

Then I add <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> and this is what I get:

Thai characters OK but manu' strange

You can try yourself, here the code, try to remove the chareset line and will be OK:

<html>
<head>
<meta http-equiv="Content-Language" content="en-th">
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta name="viewport" content="width=device-width, maximum-scale=1.5">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ice cream</title>
<style>
.all {width:100%;text-align:center}
.one {margin:0 auto;display:inline-block;font-weight:bold;font-family:times new roman,serif;font-size:16px}
a:hover {text-decoration:underline}
ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  }

ul li {
  display: block;
  position: relative;
  float: left;
  width:144px;
  background: #240F0A;
}

/* This hides the dropdowns */


li ul { display: none; }

ul li a {
  display: block;
  padding: 0.5em;
  text-decoration: none;
  white-space: nowrap;
  color: #BCA363;
}

ul li a:hover { background: #402015; }

/* Display the dropdown */


li:hover > ul {
  display: block;
  position: absolute;
  z-index:2;
}

li:hover li { float: none; }

li:hover a { background: #402015; }

li:hover li a:hover { background: #402015; }

.main-navigation li ul li { border-top: 0; }

/* Displays second level dropdowns to the right of the first level dropdown */


ul ul ul {
  left: 100%;
  top: 0;
}

/* Simple clearfix */



ul:before,
ul:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

ul:after { clear: both; }
</style>
</head>

<body bgcolor="#240F0A" text="#FFFFFF" bottommargin="0">
<div class="all">
<div class="one">
<ul class="main-navigation">
  <li><a href="ice-cream-Thai.html" title="ไอศกรีม, ไอศครีม">ไอศครีม</a></li>
  <li><a href="index.html" title="Ice cream production and sale">HOME</a></li>
  <li><a href="#" title="About Ice Age ice cream company">ABOUT US</a>
    <ul>
      <li><a href="aboutus.html" title="About Ice Age ice cream company">The Company</a></li>
      <li><a href="aboutus.html#ice-age-history" title="History of Ice Age ice cream company">History</a>
       <li><a href="#" title="Contacts Ice Age ice cream company">Contacts</a>
       <ul>
 <li><a href="contacts.html#email" title="About Ice Age ice cream company">Email</a></li>
 <li><a href="contacts.html#address" title="Postal address Ice Age ice cream company">Address</a></li>
          <li><a href="contacts.html#location" title="Road map and location Ice Age ice cream company">Location</a></li>
          <li><a href="contacts.html" title="Ice cream Ice Age contacts page">All contacts</a></li>
       </ul></li></ul></li>
  <li><a href="#" title="Ice cream">ICE CREAM</a>
    <ul> 
        <li><a href="#" title="Sherbet">Sherbet</a></li>
        <li><a href="ice-cream.html#Itlian-gelato" title="Ice cream">Italian Gelato</a></li>
        <li><a href="ice-cream.html#Thai-ice-cream" title="Ice cream">Thai Ice Cream</a></li>
        <li><a href="ice-cream.html#Japanese-ice-cream" title="Ice cream">Japanese cream</a></li>
        <li><a href="ice-cream.html" title="Ice cream">Classic ice cream</a></li>
        <li><a href="http://iceagethai.com/ice-cream-shop/xxxxx.php" title="Ice cream">Promotion</a></li>
        <li><a href="#" title="Ice cream flavors">Flavors</a>
        <ul>
        <li><a href="ice-cream-flavors.html#sherbet" title="Sherbet flavors">Sherbet Flavors</a></li>
        <li><a href="ice-cream-flavors.html#sherbet" title="Sherbet flavors">Gelato Flavors</a></li>
        <li><a href="ice-cream-flavors.html#sherbet" title="Sherbet flavors">Thai Flavors</a></li>
        <li><a href="ice-cream-flavors.html#sherbet" title="Sherbet flavors">Japanese Flavors</a></li>
        <li><a href="ice-cream-flavors.html#sherbet" title="Sherbet flavors">Classic Flavors</a></li>
        <li><a href="ice-cream-flavors.html#sherbet" title="Sherbet flavors">All Flavors</a></li>
        </ul></li></ul></li>
  <li><a href="#">About Us</a></li>
    <li><a href="#">About Us2</a></li>
      <li><a href="#">About Us3</a></li>
        <li><a href="#">About Us4</a></li>
</ul>
</div>
</div>

</body>
</html>

How can avoid that empty space? This happen on Chrome and all Iphone.

Upvotes: 3

Answers (2)

iMarketingGuy

Reputation: 696

It's the font that throwing it off. If you inspect the element of the list items you'll see that the first item is 144x36 and the rest are 144x34.

you can target just the first li with something like

.one li:first-child {
    font-size: 15px;
}

Upvotes: 1

Afikur Rahman

Reputation: 347

Well it's happening because of the line height of your font. You can easily fix this by giving that particular hyperlink to line height of 1em or giving all the anchor tag to same line-height like below -

ul li a {
  line-height: 1em;
}

you can check the image here

Upvotes: 4

Strange html behaviour if use utf-8, empty content area

Answers (2)

Related Questions