CSS difference output in Firefox and Chrome

HTML-CSS
1

Hi, I have different output from my Firefox and Chrome on my nav Element.

My HTML code for nav;

 <nav id="navs">
   <ul>
    <li><a href="about_us.php">About Us</a></li>
    <li><a href="contact.php">Contact</a></li>
   </ul>
   <ul>
    <li><a href="index.php">Home</a></li>
    <li class="dropdown">
      <a href="#" class="dropbtn">Linux OS</a>
      <div class="dropdown-content">
       <a href="linux_mint.php">Linux Mint</a>
       <a href="ubuntu.php">Ubuntu</a>
       <a href="debian.php">Debian</a>
       <a href="android.php">Android</a>
      </div>
     </li>
     <li class="new-link">
       <a href="#" class="neuen">News & More</a>
       <div class="new-content">
          <a href="#">News</a>
          <a href="#">Geek</a>
        </div>
      </li>
      <li><a href="#">Books</a></li>
   </ul>
</nav>

my CSS code for .dropdown-content a on nav;

.dropdown-content a {
       padding: 10px 20px;
       font-size: 9px;
       text-align: left;
    }
    
    .dropdown:hover .dropdown-content {top: 27px; }

My problem is that Linux Mint Word on Chrome come differently as in Firefox
How to show it on Firefox;

firefox
firefox1280×972 318 KB

How to show it in Chrome;

chrome
chrome1280×972 315 KB

2

okay it is not even the same… If you notice one page is SSL secured one is not!

3

Thanks for your answer, why Firefoy say is secure but Chrome no ?

4

Ok I spent countless of hours on SSL installs =) I use Linux myself for my website, It doesn’t have to be connected to HTML but click on the button with the lock bar and see what message it gives you!

5

Now have to clean the Chrome browser cache, and my website is secure,

chrome2
chrome21280×972 312 KB

But my problem from the word Linux Mint on Chrome stay…

6

No, I tried to help you out there is nothing wrong with it…

7

Chrome and Firefox calculate the space inside an element slightly differently.

Here is a similar issue that involved use jquery to determine if overflow was going to happen.

8

No, I tried to help you out there is nothing wrong with it…

Very Thanks! , but when nothing is wrong, why to come different on Chrome?

9

@ whipdancer
Very thanks for your answer! , you know how can it implement on my code?

10

Is the issue that the text wraps in Chrome, but does not wrap in Firefox?

11

Is the issue that the text wraps in Chrome

yes, the problem is on Chrome

12

You cannot explicitly control how a browser renders elements on the page.

The wrapping issue under Chrome is caused by 2 things:

  • How the font is rendered and the calculated width of the rendered text.
  • How the box model is calculated.

You can try a different font. You can try making that menu item wider. You can try a different font size.

In the end - you don’t get pixel perfect control over how a browser renders. You need to accept that different browsers will render your page differently.

13

I tried to reproduce the error in my browser mate!
Tried both Chrome and firebox nothing was wrong it is only you that see your error…
However, you don’t have SSL and browser complain about 25 cookies =/
As he said too it is just a cosmetic error for you but it is not in my browser works perfectly fine…
cheers

14

You can try using white-space: nowrap;.

I think we would need to see the page live to get closer to the issue. BTW what font are you using for the links? I can’t really tell if it is just a condensed font, or if you change the letter spacing as well. It looks a bit like “Roboto Condensed” but it’s kind of hard to tell.

15

@ lasjorg

what font are you using for the links?

I build my Website with Grid Layout.

Here all code how to have my nav-Element to build;

     /* Nav  */

nav {background-color: #d2f5c4; display: flex; }

nav a {
      color: black;
      text-decoration: none;
	  display: inline-block;
	  padding: 10px 8px 10px;
	  font-size: 14px;
	  font-family:  Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
    }

nav ul {list-style-type: none;  flex: 1 0 auto;}

nav li { display: inline-block;}

nav ul:nth-of-type(2) {
 text-align:right;          /* beweget computer, News und Bucher   */
 padding-right:120px;

}





/* Geben an Link1, link2, link3 ; Farbe , Padding, .... */


.dropdown { 
   position: relative; /* brauche um die neue link in Nav zubauen */
}

.dropbtn {
    padding: 15px;
    padding-top: 9px;
    padding-bottom: 10px;
}



li a:hover, .dropdown:hover .dropbtn {
     background-color: #f1ebeb;
   
     
}

.dropdown-content {
    display: none; /* display wird ausgeschaltet ,aber erlaubt die anderen elemente, position ,background ,.... */
    font-size: 13px;
	position: absolute; /* die stellung folgt der Erste Link(li) */
    background-color: #f1f1f1 ;
    min-width: 10px; /* macht größer die Inneren Links */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Bau ein Schatte und geben an dem Schatten Farbe  */
    z-index: 1;    /*  Zeigen die Ordnung wie die Links gezeigt werden... */

}

.dropdown-content {
   
    color: black;
   
    text-decoration: none;       /* Bekomme die Liks keine Unten Stricht ....*/
}

.dropdown-content a {
    color: black;
    padding: 12px 21px 15px 8px;
    text-decoration: none;               /* Bekomme die Liks keine Unten Stricht ....*/
    display: block;
    font-size: 13px;
    text-align: left;
    font-weight: bold;
    
} 


.dropdown-content a:hover {
background-color: #9f9e9e;

}

On my @media which have on CSS File (have for Desktop, Tablet and smartphone), have this code which I use for them;

.dropdown-content a {
       padding: 10px 20px;
       font-size: 9px;
       text-align: left;
    }
    
    .dropdown:hover .dropdown-content {top: 27px; }

my Website, https://linuxusers.net

16

I don’t get any text wrapping in Chrome.

Edit: What OS are you on?

17

I think you may have to control the font being used for different systems when you have so little margin for differences in spacing. I don’t think a system font stack can give you that. You may have to load a web font for the condensed fonts.

18

What OS are you on?

Linux Debian 64 Bit

I to test my Website with the app lighthouse for Chrome, here a screenshot what it to say about my nav…

seo
seo958×332 33 KB

19

i what to lean how to program

20

Please don’t hijack the thread. Open an new thread.