CSS difference output in Firefox and Chrome

bbwd345 · July 19, 2019, 11:56am

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;

How to show it in Chrome;

eggsplice · July 19, 2019, 12:11pm

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

bbwd345 · July 19, 2019, 12:22pm

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

eggsplice · July 19, 2019, 12:28pm

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!

bbwd345 · July 19, 2019, 12:49pm

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

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

eggsplice · July 19, 2019, 1:09pm

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

whipdancer · July 19, 2019, 1:13pm

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.

bbwd345 · July 19, 2019, 1:14pm

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?

bbwd345 · July 19, 2019, 1:22pm

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

whipdancer · July 19, 2019, 1:26pm

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

bbwd345 · July 19, 2019, 1:28pm

Is the issue that the text wraps in Chrome

yes, the problem is on Chrome

whipdancer · July 19, 2019, 1:35pm

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.

eggsplice · July 19, 2019, 3:35pm

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

lasjorg · July 19, 2019, 4:00pm

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.

bbwd345 · July 19, 2019, 4:09pm

@ 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

lasjorg · July 19, 2019, 4:14pm

I don’t get any text wrapping in Chrome.

Edit: What OS are you on?

lasjorg · July 19, 2019, 4:24pm

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.

bbwd345 · July 19, 2019, 4:24pm

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…

Ekeh · July 19, 2019, 4:25pm

i what to lean how to program

lasjorg · July 19, 2019, 4:28pm

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