It's clear that there is a noticeable difference when viewing this in Chrome compared to Firefox. The ":before" and ":after" pseudo classes seem to be malfunctioning in Firefox. Is there a way to resolve this issue?
Edit: It is important for it to work consistently across all browsers. The current version works in Internet Explorer, but not in Firefox: http://jsfiddle.net/tNg2B/13/
I essentially eliminated the :before and :after selectors, and incorporated two additional <span>'s
For effective CSS3 implementation, it is important to utilize gradients and rounded corners properly, as demonstrated below:
background-image: -webkit-linear-gradient(top, #FFFF00, #FF8000);
background-image: -moz-linear-gradient(top, #FFFF00, #FF8000);
border-radius:15px;
Check out the demo on JSFiddle: http://jsfiddle.net/tNg2B/11/
Don't overthink the solution to a common issue. Keep it simple with just a few basic rules and straightforward HTML:
<button type="button">test</button>
Simply add this CSS:
button {
padding: 0.3em 0.8em;
border: 1px solid #FFAA22;
background-image: linear-gradient( top, #FFF07E, #FFAA22 );
background-image: -webkit-linear-gradient( top, #FFF07E, #FFAA22 );
background-image: -moz-linear-gradient( top, #FFF07E, #FFAA22 );
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
font-size: 1.8em;
}
button:hover {
background-image: linear-gradient( top, #FFF07E, #FFAA22 70% );
background-image: -webkit-linear-gradient( top, #FFF07E, #FFAA22 70% );
background-image: -moz-linear-gradient( top, #FFF07E, #FFAA22 70% );
}
You'll achieve the same outcome without using images or pseudo-elements. Make sure to include a background color change for simplicity and a fallback for older browsers.
See it in action here: http://jsfiddle.net/t9ryJ/1/
The default stylesheet for Firefox sets the button element's line-height as important. I was able to fix this issue in Firefox by using floats, which is confusing to me because I thought generated content needed absolute positioning. Here is the link to see the fix in action:
http://jsfiddle.net/jalbertbowdenii/aFZTf/1/
To apply the Firefox styles only, you can use "@-moz-document url-prefix() { }"
However, @Dennis and @derekerdmann provided excellent solutions to your question. If you are unable to implement their suggestions or simply don't want to, this workaround should suffice.
I have only tested this in Firefox 7.1 and Chrome 17.0.942.0 dev-m
Looking for some assistance? Check out this codepen. I'm currently working on a search bar widget that allows navigation from the input field to the search results, displayed as a series of divs. The navigation is controlled via jquery, where the foc ...
In my CMS project, the CMS team has a special requirement regarding unordered and ordered lists. They want the size of the bullet list icon to adjust according to the text content within the list. The image below shows the default design of a list item: ...
I'm currently working on designing an invoice table using HTML and CSS. I have dynamic rows that are added to the table, and I want the body of the table to have a minimum height to fit around 5-6 rows, after which it should extend based on the number ...
I'm at a loss with this peculiar artifact that has appeared in my HTML - take a look at this highly magnified screenshot: Highlighted in red is this bizarrely small line. I've scoured my code but can't seem to pinpoint its origin. I'v ...
As a newcomer to Zurb Foundation 5, I am currently experimenting with building a complex header bar using columns and rows. My goal is to utilize nested rows within a main row, but I am having difficulty figuring out the correct div ordering. Is it feasib ...
I am facing an issue while using .slideDown() with multiple classes. I want only one class to toggle/dropdown at a time, but currently when I press the button, all classes show up instead of just the one I want to display. How can I achieve this? Here is ...
Instead of repeating these code blocks: <svg class="icon-user"> <use href="LONGFILENAME.svg#icon-user"> </use> </svg> <svg class="icon-user2"> <use href="LONGFILENAME.svg#icon-user2"> </use> </ ...
After relying solely on "pre-made" components like Mui or TailWind, I decided to create a component using only CSS and maybe JavaScript. However, I encountered some difficulties when attempting to position a div inside an image using relative and absolute ...
I'm having trouble adjusting the padding inside my menu. I want to make it less chunky and large, but so far I've only been successful in removing the top padding. The bottom padding just won't budge. Here's the code that helped fix th ...
Recently, I decided to challenge myself by recreating the Spotify homepage using only pure Javascript and SCSS as a way to test my front-end development skills. You can view my progress so far at this link, although please note that it's still a work ...
I'm having trouble adjusting the margin sizes on a page in Internet Explorer 11 Print Preview. I also want to remove any content from the margins (such as page numbers, titles, URLs, etc). I've successfully set the margin size, but I can't ...
I have a button that is already styled with basic CSS properties for active and hover states. I would like to add functionality so that when the "Join the Loop" button is clicked, it transforms into a simple email form similar to the one found at Apologie ...
Imagine having an index page called index.vue consisting of various components like this: index.vue <template> <div> <component-1 /> <section class="section-1"> <div class="container section-container"> <com ...
Can anyone help me? I am trying to create an animation for a hamburger menu when checked and unchecked. I have managed to animate the menu, but I'm struggling with animating the left menu when transforming it to 0. &__menu { transform: transla ...
After running this line of code, I have a generated element sub with a property of [sub]. <li [displayMode]="displayMode" template-menu-item style="cursor: pointer" [routerLink]="['/request/checkoutReview']" icon="fa-shopping-cart" name ...
Circumstances This HTML code is intended to create a horizontal <ul> element that spans the entire width of the <div class="list__wrapper"> container on desktop screens with a minimum width of 1024px. However, for mobile devices with a maximum ...
Having trouble with my menu displaying correctly in IE7. It seems to be a stacking issue: the menu initially appears but disappears once the header image and rest of the page load. I've tried adjusting the z-index values in both the menu and its paren ...
I have a navigation bar and carousel within the same section. I want to change the background color of both the navigation bar and carousel item when the carousel indicator becomes active. Any suggestions on how to achieve this using a jQuery function? H ...
I have designed a contact form that is displayed in an iframe within an overlay div. I have carefully adjusted the dimensions of this div to ensure that there are no scrollbars visible when the form initially appears. However, after filling out the form an ...
Currently, I am in the process of converting HTML to JSON. Here is an example of the HTML I am working with: <div class="treeprofit" id="divTreeViewIncomeDetails" style="height: auto;"> <li><span class="fa fa-folder-open highlight" ...