I am trying to style buttons in my current cross browser project.
When I checked those buttons in Safari they looked different than in any other browser. In general, buttons looks the same in FF and Chrome. But in Safari buttons have sunknown extra space on top, bottom, left and right sides, so buttons looks wider in Safari rather than in Chrome or other browser. Can I remove the extra space on submit button in Safari?
My current css is:
.location-form-wrapper input[type="submit"] {
border-radius: 0 5px 5px 0;
float: left;
padding: 20px 23.8px;
}
input[type="submit"], input[type="button"], button, input[type="reset"] {
background: #facc26 none repeat scroll 0 0;
border: 1px solid transparent;
border-radius: 5px;
box-shadow: none;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: "latobold";
font-size: 18px;
line-height: 1;
padding: 12px 26px;
text-transform: uppercase;
transition: all 300ms linear 0s;
}
I just came across this very issue, Safari 9.0.2. It might be too trivial, but I just added "margin: 0" to the button's CSS and the - well, margin - went away, letting the button fill the full area I intended for it.
Related
This question already has answers here:
Turn off iPhone/Safari input element rounding
(11 answers)
Closed 1 year ago.
I am modifying the styling of my text field inputs for a contact form I have. My desired styling is a bottom border only, which seems to work in chrome but not on Safari for mobile, the whole border remains visible. See the below images for reference.
Chrome Version 91.0.4472.114 (MacOS)
Chrome works and looks fine.
Safari iOS 14.6
Here on my mobile, it is hard to see via the screenshot be some of the top corners of the border are visible, and the bottom border curves around.
css
export const TextField = styled.input`
width: 100%;
background: #131d32;
border: none;
border-bottom: 1px solid rgba(200, 200, 200, 0.7);
min-height: 35px;
color: white;
outline: 0;
border-width: 0 0 2px;
:focus {
border-width: 0 0 1px;
}`;
Please set border-radius as 0;
export const TextField = styled.input`
width: 100%;
background: #131d32;
border: none;
border-bottom: 1px solid rgba(200, 200, 200, 0.7);
min-height: 35px;
color: white;
outline: 0;
border-width: 0 0 2px;
border-radius: 0;
:focus {
border-width: 0 0 1px;
}`;
I have a div that expands in height and changes it's border color on hover.
This is the CSS:
div.options {
width: 80%;
height: 62.7px;
margin: auto;
border-radius: 15px;
border: 3px solid #d0d0d0;
overflow: hidden;
transition: height 1s, border-color 1s;
}
div.options:hover {
height: 627px;
border-color: #656565;
}
<div class="options">Hello</div>
It works as it should on hover, but the problem is that the border color of the div changes from default black to the specified #d0d0d0 right on page load. The problem only occurs with ctrl+f5 reload, not regular reload. How do I make it not do that thing it does?
I have tested this on Firefox 72, Edge 84, and IE 11 with your code and a div like this:
<div class="options"></div>
It is functioning, there is no color flickering from black on page load with or without CTRL+F5.
Perhaps it is something from your side.
I am creating a modal dialog based on a CSS only approach from the online example below. It works great in IE 11, Chrome and Firefox, but in IE 9 and IE 10, the modal doesn't work.
In IE 9 and IE 10, you can't click any of the content - in this example it's a link, but in my own implementation I have several buttons on the page, only one of which actually opens the modal, and they all can't be clicked - I'm thinking because the modal might be sitting overtop of the buttons somehow, even though it's invisible.
Can anyone please help me figure out why this isn't working in IE 9 and IE 10, and whether there's anything I can do to fix it in those browsers? Also, I'm a little new to web development. Is there any tools that can analyze your markup and CSS to see if there's any compatibility issues with older browsers? Maybe a tool like that could have helped me here.
Here is the JSFiddle
http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/
Or here is the code you could just save into an HTML file and load into the browser.
<!doctype html>
<html lang="en">
<head>
<style>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
</style>
</head>
<body>
Open Modal
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
</body>
The way the code is rendering in IE 10 is the modal opacity is set to 0 but the modal layer is still existing above the the 'open modal' link since the modal z-index is set to 99999. If you change the link to have a position: relative and a z-index that is larger than 99999 you will be able to access the modal using your link except now the link will show "on top" of the modal when its opened (which I am assuming you dont want to have happen)
Part of problem is pointer events are not supported in IE 9 & 10. You can read more about that here (and maybe find a work around?)
I personally suggest using a .hide class that has display:none; and use JQuery to show/hide that class so as to easily toggle your modal.
Hope that helps
Set the initial state of the modal to z-index:-1.
There is a conflict with the z-indexes. Despite the modal has no opacity, it still takes up the space and prevents the link to be clicked on IE10.
See Demo
I've a html formular in a part of a website, which only specific administration users can access. In this form, you can upload csv files. As only a small group of users can do this, the functionality is more important than the styling. So I decided not to do the usual trick overlaying a div over the field. I just want to archive one thing: The text in the field should look the in Chrome the same as in FF (vertical and horizontal centered text).
Here you can see the both renderings:
FF: http://i.stack.imgur.com/wbHhG.png
Chrome: http://i.stack.imgur.com/1BFHu.png
HTML-Code:
<input type="file" class="button blue full-width" name="csv_file" id="csv_file">
CSS-Styles:
color: #fff;
height: 50px;
line-height: 50px;
padding: 0 10%;
background-image: url("../images/item-hover-button-addtocart-normal.png");
border: medium none;
margin-bottom: 10px;
background-color: #fff;
text-align: center;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
display: block;
font-size: 14px;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
width: 100%;
You can fix one of the issues by adding this css:
input[type=file]::-webkit-file-upload-button {
margin: 1px 0;
height: 48px;
}
This makes the button take up more height like in FF and also makes the text vertically centered..
Not so sure how to horizontally center it though, maybe someone else might know a trick.
A jsfiddle to show it working: http://jsfiddle.net/bcwk8qvt/
[edit]
You can make it centered horizontally by adding most of your original CSS to a div wrapped around the input field like this:
http://jsfiddle.net/bcwk8qvt/3/
You still need to keep some of the css on the input field too though for FF to show it the same way.
I'm creating a function where you hover over a div, which will result in another div appearing; a simple, CSS-only pop-over.
However, whenever the pop-over-div has an opacity:0, it still has a physical height and width, rendering other divs under the pop-over unreachable.
I know I can work with display:none and display:block, but this will remove the possibility of adding a smooth "arrival" of the div; it'll just pop in and out of the screen.
The question: Is there a way to remove the physical dimensions of a div with opacity:0?
In my JSfiddle, you will notice you can get the .iconhover to appear when you hover over the H or e. If you hover over the rest of the word, you're officially hovering over .iconhover and not .wishicon, resulting in the pop-over not showing up.
I hope my question is clear enough.
HTML
<div class="qs">
<div class="wishicon">Hello world</div>
<div class="iconhover">Hovering...</div>
</div>
CSS
.iconhover {
height: auto;
width: 100px;
margin-left:-0px;
color: #fff;
background-color: #666;
box-shadow: 0 1px 0px rgba(0,0,0,1), 0 2px 0px rgba(0,0,0,1), 0 2px 10px rgba(0,0,0,.5);
margin-top:-20px;
margin-left: 20px;
border-radius: 5px;
opacity: 0;
font-size: 12px;
line-height: 1.5em;
font-weight: normal;
transition: opacity 0.5s, margin 0.5s;
-webkit-transition: opacity 0.5s, margin 0.5s;
padding:4px 20px;
text-align: center;
position:absolute;
float: left;
}
.qs > .wishicon:hover + .iconhover {
opacity: 1;
margin-top: -20px;
margin-left: 20px
}
I have a terrific solution which I use often.
On the element with opacity: 0 put pointer-events: none.
It will still have the dimensions, but it will be as if all events are inactive.
Then when you want it to be opacity: 1, return pointer-events to auto.
This is the next best thing to using display: block/none but it can be transitioned!
That would certainly be nice, but alas, I'm not aware of any "ghost" CSS property.
I would treat it the same as a hover menu: make the parent hoverable instead of the previous sibling:
.qs:hover > .iconhover { opacity: 1; ... }