I am getting confused with CSS

HTML & CSS
1

I am getting confused with CSS in Chrome vs Firefox.
I have an unordered list in my html. In Firefox browser it appears with disc bullets but in chrome there are no bullets. Why is the user agent rules removing the list-style and list-style-type rules from the default in chrome?
Very confusing to newbies!

2

It might help to see your HTML and CSS.

3 Likes
3

It doesn’t. :).

There must be some other code affecting your list or you have run into a strange bug. Have you validated your html and css?

As @Gandalf said please post the code that creates the problem that you see and we will straighten things out for you :slight_smile:

3 Likes
4

Here is the html:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Wombat Coffee Roasters</title>
        
    </head>
    <body>
      <header class="page-header">
        <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
        <nav>
          <ul id="main-nav" class="nav">
            <li><a href="/">Home</a></li>
            <li><a href="/coffees">Coffees</a></li>
            <li><a href="/brewers">Brewers</a></li>
            <li><a href="/specials" class="featured">Specials</a></li>
          </ul>
        </nav> 
      </header>
    </body>
</html>

I have attached screenshot of Firefox and Chrome side by side showing the results.
Notice that I don’t have any styles applied to this html.

CSS issue between firefox and chrome
CSS issue between firefox and chrome927Ă—316 22.8 KB

5

This is what I get when I throw your code into codepen.

As others have said, what you are giving us is not enough to replicate the issue. You MUST have some sort of CSS being injected to get the result in your second screenshot.

2 Likes
6

Open the html in Chrome…
I am not applying any css, this is what the default is in Firefox vs Chrome.

7

I get the same as your Firefox screenshot.

8

I think I figured out the problem. I am using XAMPP server and I think it is injecting some css by default because if I open the html file by itself in chrome without using the XAMPP I get the firefox result with the bullets. Really weird cause that Firefox screenshot was using XAMPP. Something is jacked up here!

9

Different browsers do have different default CSS, but I didn’t need to open it up in Chrome to know that it wouldn’t magically be removing the bullets and the body margin/padding on the page :slight_smile: . That just screams “custom CSS”.

2 Likes
10

Could you check what differs between the browsers in and outside the XAMPP?

I suggest you use their built in Inspect tool and compare when the bullets are not shown.

(Then you’ll also discover a difference how they show the method they use to apply the bullets.)

11

I solved the problem. The Cisco Webex extension was injecting css into the browser. I removed it and now chrome displays this page just like Firefox, which did not have that extension.
Need to make sure extensions are not able to alter the browser behaviour.

2 Likes
12

Maybe browser extensions should be added as another source of possible CSS origin.
Never seen that in any of the CSS books I have read.

13

The popular extension Stylish comes to mind. :wink:

https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe

https://addons.mozilla.org/en-US/firefox/addon/stylish/

https://www.microsoft.com/en-us/p/stylish/9nblggh3zwsw

14

I would guess that your extension removed the padding from the ul and the markers were therefore sitting outside the principal box outside the left edge of the viewport.

That’s why it’s always best to set the margins and padding in your custom css for the elements you use rather than use browser defaults which over the years have varied wildly :slight_smile:

3 Likes
15

I can see that the screenshots in post #4 agree with you. :thinking:

2 Likes
17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.