1

I am trying to make a responsive website (Desktop, Tablet, and Smartphone), and I would like to show it in different browsers.

This is how I built my links with nav-element on my html site:

<nav id="navs">
  <ul>
    <li><a href="/es/about_us.php">Nosotros</a></li>
    <li><a href="/es/contact.php">Contactar</a></li>
  </ul>
  <ul>
   <li><a href="/es/index.php">Home</a></li>
    <li class="dropdown">
      <a href="#" class="dropbtn">Linux OS</a>
       <div class="dropdown-content">
         <a href="/es/linux_mint.php">Linux Mint</a>
         <a href="/es/ubuntu.php">Ubuntu</a>
         <a href="/es/debian.php">Debian</a>
         <a href="/es/android.php">Android</a>
       </div>
    </li>
    <li class="new-link">
      <a href="#" class="neuen">News & Mas</a>
      <div class="new-content">
       <a href="#">News</a>
       <a href="#">Geek</a>
     </div>
   </li>
   <li><a id="book" href="#">Libros</a></li>
   <li class="languag">
    <a href="#" class="language">&#127757; Ingles</a>
    <div class="languages">
     <a href="https://linuxusers.net">Ingles</a>
     <a href="https://linuxusers.net/de/index.php">Aleman</a>
    </div>
   </li> 
  </ul>
</nav>

In my CSS file I give the class dropdown-content these parameters:

.dropdown-content a {
  font-size: 16px;
  padding: 12px 17px;
}

Image from Firefox, highlighted in the red box the class .dropdown-content a

image from Firefoy

Image from Chrome, highlighted in the red box the class .dropdown-content a

image from Chrome

How is it possible that the image shown on Chrome is smaller than the one shown in Firefox?

This is my HTML and CSS code.

I have searched similar questions on stackexchange, but the solutions provided didn't working for me.

Can someone help me to solve this problem, please?

  • biotza -- Does adding display: block; to your CSS for the .dropdown-content a element make both lists look the same? I'm wondering if the difference you're seeing is from the browsers treating the padding around inline elements differently. If that doesn't fix it, it may help to see more of the CSS for your menu. – Angelique Oct 7 at 14:57
  • Thanks for your answer! , I to doing with display: block; but nothing to change, I will now new edit ma question and give more information... – biotza Oct 7 at 15:06
  • imgur.com/a/2KPHrmW On macOS, I'm seeing less than a pixel's width of difference between Chrome and Firefox. It's possible a typography setting may correct for that, but it's probably not worth chasing down. Maybe try adding normalize.css or a reset to your project? – Angelique Oct 7 at 18:43
  • very thanks for your support! , Tomorrow I will to try it, with normalize.css , i wish your a nice Night ! – biotza Oct 7 at 20:02
0

I found the solution to my problem!

How Angelique to tell, there are less than a pixel's (0.8333) width of difference between Chrome and Firefox, I am with Linux, she is with Mac and are not difference...

For Firefox I to give for padding these parameters:

.dropdown-content a {
   font-size: 16px;
   padding: 12px 17px;
}

For building the padding parameters for Chrome I use WebKit + padding and give the number 16, I give only the second Place because, on padding, the Second Place is to move to right Site.., how to show it,

.dropdown-content a {

   -webkit-padding-start: 16px;
}   

and now I have both (Firefox and Chrome) with identical big...

Very Thanks to Angelique because you help me to Understand it and Adriano for correct my English, I wish all your a nice Week!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.