The HTML and CSS code I wrote functions perfectly on Codepen, but for some reason, it appears different when I view it in my Chrome environment

My codepen displays perfectly, but when I run the same code on my local environment it looks off. I can't seem to figure out what is causing the difference, especially since I copied and pasted the exact code. Both the codepen and my environment are using Chrome. Could this discrepancy be due to browser compatibility issues or perhaps Codepen is rendering the views differently using another browser engine? The views are enclosed within an Angular template for a directive that I'm implementing. My site is compiled using Grunt.

My Environment

https://i.sstatic.net/6Q4wo.png

Codepen

https://i.sstatic.net/zvOFF.png

HTML

<section id="ribbon">
  <ul class="tabs">
    <li class="v-zigzag active">Mode 1</li>
    <li class="v-zigzag">Mode 2</li>
    <li class="v-zigzag">Mode 3</li>
    <li>Mode 4</li>
  </ul>
</section>

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:400);
body {
  margin: 0;
  padding: 0;
}

#ribbon {
  background: whitesmoke;
}
#ribbon ul {
  margin: 0;
  padding: 0;
  height: 100px;
  display: flex;
  list-style-type: none;
}
#ribbon ul li {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #757575;
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
}
#ribbon .v-zigzag {
  position: relative;
  background: linear-gradient(45deg, #757575 5px, transparent 0) 0 5px, linear-gradient(135deg, #757575 5px, whitesmoke 0) 0 5px;
  background-position: right top;
  background-repeat: repeat-y;
  background-size: 10px 10px;
}
#ribbon .v-zigzag:before {
  content: "";
  position: absolute;
  background: linear-gradient(45deg, whitesmoke 5px, transparent 0) 0 5px, linear-gradient(135deg, whitesmoke 5px, transparent 0) 0 5px;
  background-color: transparent;
  background-position: right top;
  background-repeat: repeat-y;
  background-size: 10px 10px;
  width: 10px;
  right: 3px;
  top: 0;
  bottom: 0;
}
#ribbon .v-zigzag.active:before {
  content: "";
  position: absolute;
  background: linear-gradient(45deg, #03A9F4 5px, transparent 0) 0 5px, linear-gradient(135deg, #03A9F4 5px, transparent 0) 0 5px;
  background-color: transparent;
  background-position: right top;
  background-repeat: repeat-y;
  background-size: 10px 10px;
  width: 10px;
  right: 3px;
  top: 0;
  bottom: 0;
}
#ribbon .tabs .active {
  background-color: #03A9F4;
  color: white;
}

Answer №1

It is advisable to compare the output of your compilation with that of the compilation on codepen.io. It is possible that you are not using the same CSS preprocessor (SCSS) as codepen, or perhaps a different version.

I tested the compiled css and html from codepen on my local machine and everything functioned properly.

Answer №2

Resolved by eliminating the section element that was causing extra styling effects due to the usage of the angular-fullstack-generator in my environment.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Styling with CSS in a React component

I am trying to display a row of buttons instead of columns on my webpage. I have used display:flex but it is still showing as a column. What I want is for each button to display the first character of its name underneath it, with all buttons lined up next ...

Ensure that the div stays in the same position regardless of the screen resolution

On my webpage, I have a page header with a select menu that needs to be properly positioned on top of the background image. How can I ensure it stays in place when the screen resolution changes? Here is how it looks on a larger resolution: <div c ...

There is a lack of CSS import in the HTML document

I have organized my files in the following structure: - index.html - css/styles.css This is the HTML code I am using: <!DOCTYPE html> <html lang="en> <head> <title>Bootstrap Case</title> <meta charset="utf-8"> & ...

Potential issue: Firefox causes distortion in animated stroke-linecap="round" properties

While working on a project on Stack Overflow, I noticed a potential bug in Firefox when animating a line with stroke-linecap="round" and vector-effect="non-scaling-stroke" svg{border:1px solid} path{ animation: draw 1s ease-in; ...

Error Message "Alexa.create is not a valid function" encountered while using the Alexa HTML Web API on the Echo Show 10

Here is the HTML code for my custom Alexa Skill. <head> <script src="https://cdn.myalexaskills.com/latest/alexa-html.js"> </script> </head> <body> var alexaClient; Alexa.create({version: '1.0'}) .t ...

Requiring addresses for Google Maps in order to display directions

To display the directions between two addresses based on the chosen transportation mode, I need to pass the addresses to the code in page 2. After the user selects two cities from a Dropdown box on page 1, they will be sent to the code to show their locati ...

Transferring the output of a function to a different state

My current challenge involves sending data from one controller to another within an Ionic application. Despite creating a service for this purpose, I am still unable to share the data successfully. The send() function in MainCtrl is meant to pass the data ...

Utilizing border-radius specifically on the ul element to apply rounded corners to only the outer li items

I'm exploring a concept where I want to create a curved border around the list items, both on the outside and inside. Here are some examples: Right Check out the correct curved border here Wrong: See the incorrect curved border here Please note, ...

Modifying a div element upon the successful completion of an ajax/json request

Currently, I have a form on my webpage for creating a new album. Alongside this form, there is also a delete album form. After successfully creating an album, I want to automatically update the checkbox list in the delete album form with the details of the ...

Is it possible to trigger a reflow prior to initiating a lengthy JavaScript operation?

Ready to face the criticism, I understand that this question has been asked many times before, and I am aware that there are likely more efficient ways to achieve what I'm trying to do... In a JavaScript function, I have a process that can take up to ...

What is the best way to display multiple files in a vertical stack when choosing a file?

<div class="selected-file-container align-items-center justify-content-between d-none"> <div class="selected-file d-flex align-items-center"> <img id="selectedImage" class="hidden" src="&qu ...

The font in my Next.js / Tailwind CSS project starts off bold, but unexpectedly switches back to its original style

I recently integrated the Raleway font into my minimalist Next.js application with Tailwind CSS. I downloaded the font family in .ttf format and converted it to .woff2, but I'm having trouble changing the font weight using custom classes like font-bol ...

Unexpected behavior observed when trying to smoothly scroll to internal links within a div, indicating a potential problem related to CSS dimensions and

Within a series of nested div containers, I have one with the CSS property overflow:hidden. My goal is to smoothly scroll to internal links within this specific div using jQuery. The snippet of code below has worked successfully in previous projects: ...

What is the process for accessing a URL using a web browser and receiving a plain text file instead of HTML code?

Hello there! I've created a simple HTML file located at that can display your public IP address. If you take a look at the code of the page, you'll notice that it's just plain HTML - nothing fancy! However, I'm aiming for something mo ...

Guidelines for refreshing owl carousel on ng-click using AngularJS

I am encountering a significant issue with the use of an owl carousel in angular.js. It functions properly the first time, but when I have buttons on the same page and need to rebuild the owl carousel upon clicking a particular button with new data, that&a ...

Interactive JavaScript button that navigates me to a document without the need to click

I'm facing an issue with my small project. I've been learning javascript and managed to create a script that calculates the square of a number provided by the user. var checkIt = function(){ var theNumber = Number(prompt("Please enter a number ...

Discover the ways in which an AngularJS function is able to generate HTML code containing an AngularJS

There is an issue here helper.getDataForTriggeredUploadOfMFFile = function (isTriggeredUploadMF) { if (!isTriggeredUploadMF) { return 'None'; } else { return '<spa ng-click=\"previewDataOnSmartAnalytics()>Preview Data</span&g ...

The CSS3 slideshow is displaying distorted and unfocused images

I have a CSS code that controls the timing of my slideshow with 3 images: .slideshow li:child(1) span { background-image: url(../../pic/bg1.jpg); } .slideshow li:child(2) span { background-image: url(../../pic/bg2.jpg); -webkit-animation-de ...

Is it possible for you to pinpoint the mistake in the code below?

I've been trying to locate an error in the function but have been unable to do so. As a beginner in this area, I would appreciate your patience. <html> <head><title>print names</title> <script langua ...

Remove the right margin on the bootstrap container

I am currently working on creating dashboards using the Python library called Dash, and I have encountered an issue with Bootstrap components. Specifically, I am unable to remove the right margin from the container. I have tried using class_name='m-0& ...