Here's a tricky puzzle for you. The gradient below is not displaying correctly in Safari, but it works perfectly fine in Firefox and Chrome:
background: linear-gradient(transparent 124px, #de6230);
I've even attempted the following fix without success:
background: linear-gradient(rgba(255,0,0,0) 124px, #de6230);
If you test it on Safari using this jsFiddle link, you'll see the issue: jsFiddle.
Can anyone help me solve this problem?
Give this a try: background: linear-gradient(rgba(255,255,255,0) 124px, #de6230);
Update: Apologies, OP, the previous code didn't quite achieve your desired gradient effect. Although the colors were correct, the gray middle turned to white. I discovered a solution that works:
background: linear-gradient(rgba(222,98,48,0) 124px, #de6230);
The rgb value of 222,98,48 corresponds to #de6230, so this should provide the result you're looking for. The gradient transitions from your color at 0% alpha to your color at 100% alpha.
Here is a suggestion to try:
background: -webkit-linear-gradient(rgba(255,0,0,0) 124px, #de6230);
background: -moz-linear-gradient(rgba(255,0,0,0) 124px, #de6230);
background: -o-linear-gradient(rgba(255,0,0,0) 124px, #de6230);
background: linear-gradient(rgba(255,0,0,0) 124px, #de6230);
You can also replace background with background-image
background-image: -webkit-linear-gradient(rgba(255,0,0,0) 124px, #de6230);
background-image: -moz-linear-gradient(rgba(255,0,0,0) 124px, #de6230);
background-image: -o-linear-gradient(rgba(255,0,0,0) 124px, #de6230);
background-image: linear-gradient(rgba(255,0,0,0) 124px, #de6230);
I am looking to customize the appearance of an unfamiliar HTML code by changing its text color to cyan, regardless of its current color. I attempted the following: <p style="color:cyan !important;"> <span style="color:red;">Hello World</ ...
In my form, I have utilized the .form-control classes for the form elements. To arrange two inputs side by side, I am applying .col-md-6 on each of these inputs. However, the width generated by .col-md-6 is being overridden by the .form-control class. Is ...
Having an issue: I'm encountering a problem with this PHP code: <?php for($i = 0; $i < sizeof($floating_ips_json["floating_ips"]); $i++){ ?> <tr class="details-control-<?php echo $i; ?> cursor-pointer"> <t ...
One issue I'm facing is that when the class is-sticky is applied to my menu, the ::before and ::after pseudo-elements on my logo become unnecessary. As I am not very proficient in JQuery, I have been unable to resolve this by searching online. The HT ...
Imagine I have an ASP.net dropdownlist set up like this: <asp:DropDownList ID="ddOwnershipDocumentType" class="msbdd" runat="server"> </asp:DropDownList> Let's take a look at the style definition for msdbdd: .msbdd { font-family: WM ...
I am experiencing a problem with printing a long report created using md-list displayed in a md-dialog. When I attempt to print it, only the section that is currently visible on the screen gets printed instead of the entire length of the md-list. I have at ...
Can anyone assist me with removing the large white margins on my react project? Here are some solutions I have attempted. * { margin: 0; padding: 0; } /-/-/-/ body { max-width: 2040px; margin: 0 auto; padding: 0 5%; clear: both; } I've exp ...
Can someone help me figure out why my navbar's height is different from the example on this Bootstrap navigation bar snippet? Here's the code I used: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_navbar_form&stacked=h I copi ...
I am facing an issue while trying to open something in Firefox using window.open(). The loading screen seems to never stop, and I cannot pinpoint the reason behind it. Any advice on how to resolve this would be greatly appreciated. View Screenshot: This ...
The issue I'm facing is with the AJAX Control ToolKit Modal Popup's background (the blind curtain) disappearing after scrolling up and down several times. I have attempted to resolve this by applying various CSS styles, but unfortunately, none of ...
Experimenting with centering a divider in the style of Windows metro. .container { height: 300px; width: 70%; background: #EEE; margin: 10px auto; position: relative; } .block { background: green; height: 100px; width: 10 ...
My material-ui table is resizing and scrolling horizontally without issue, but the table element and its contents are overflowing off the right side of the page. Check out this gif to see the behavior: https://i.stack.imgur.com/lXuHj.jpg Additionally, her ...
I am working with ngbootstrap and angular, however, I believe the issue at hand is more related to html/css. My goal is to create a container that scrolls horizontally, despite coming across several helpful threads on this topic, I am struggling to impleme ...
I've been trying to figure this out, but I can't find a solution. For the structure, I'd like to use an h2 header to make it more semantic, but I want it to appear as an h5 header visually. However, CSS is not cooperating with this idea an ...
I am currently working on a multi-stage web form using AngularJS. You can see an example of this form in action by visiting the link below: http://codepen.io/kwakwak/full/kvEig When clicking the "Next" button, the form slides to the right smoothly. Howev ...
I'm currently working my way through the amazing Rails Tutorial and have encountered a problem with the Navigation bar dropping down into the body of the page, but this issue only seems to occur in Chrome (I'm using Linux, Ubuntu 10.10). I'v ...
When it comes to loading my mobile-only CSS, I typically use a media query similar to: <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="/includes/css/mobile.css" /> However, in addition to these CSS mod ...
I am struggling to understand why the padding and margins around the images in this slideshow theme on PregoApp are uneven. Despite my attempts to adjust the CSS, the issue persists. You can view the site here. Another website using the same implementati ...
In my project, I am creating a personalized input range feature by utilizing a 40px x 80px image as the background for the thumb. Typically, the thumb is limited to moving within the length of the track from edge to edge. However, I am aiming for the thu ...
I'm trying to have two rows side by side using display grid, but I'm facing some issues. When I use the following CSS... .grid-container { display: grid; grid-template-rows: auto auto; grid-template-columns: auto; grid-column-gap: 100px;} It cre ...