You can see this in safari browser on border top white lines. How can I solve this?
CODE:
CSS
.row-number5{
border-radius: 100%;
min-width: 1.25em;
max-width: 1.25em;
height: 1.1em;
padding: 0.55em;
border-style: none;
border-bottom-style: dotted;
border-bottom-color: cornsilk;
align-self: center;
border-width: 0px 0px 3px 0px;}
HTML
<div class="row"><div class="row-number5">5# </div></div>
Safari
Opera(You can see works perfectly in Opera Browser.)
Related
For a website I am currently developing, I run into a very big issue on safari only on mac. My input fields do have borders. I am not talking about the well known border radius issue. But as you can see in the picture below, my input fields get a black border from safari. The border however, does dissapear on focus.
I've have tried lots of things, overwriting all the regular properties in css that an input field will get from safari.
.search-posts-by-name {
-webkit-appearance: none;
border-radius: 0;
width: 400px;
grid-column: 2/3;
grid-row: 2/3;
border-style: none;
border-top-left-radius: 14px;
border-bottom-left-radius: 14px;
border-top-right-radius: 14px;
border-bottom-right-radius: 14px;
height: 28px;
background-color: #FAFAFA;
align-self: center;
margin-bottom: 20px;
color: black;
margin-top: 17.5px;
margin-left: 75px;
z-index: 3;
}
input.search-posts-by-name::placeholder {
color: #263238;
opacity: 0.6;
text-align: left;
}
.form-control-email:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #1B5CB0 inset;
-webkit-text-fill-color: white;
background-position: 6px 12px;
}
.form-control-password:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #1B5CB0 inset;
-webkit-text-fill-color: white;
background-position: 6px 12px;
}
<input type="search" name="search-users" placeholder="Search posts by name" class="search-posts-by-name">
Nothing seems to work.
Hope you guys can help me figure out how to fix this.
I am using the most recent version of safari.
UPDATE: the form-control-class clashed with the input and i do not understand why, since is specifically target that class. Does anybody know why and how?
#map-search-button {
display: inline;
float: right;
border-style: solid;
border-image: url(https://i.imgur.com/r35pKjB.png) 8 8 8 8;
border-width: 5px 5px 5px 5px;
height: 50px;
width: 125px;
background-color: #00ACC8;
background-clip: padding-box !important;
font-size: 1.5em;
text-align: center;
line-height: 40px;
color: white;
}
<div id="map-search-button">Find us!</div>
On Chrome on Windows, the button looks the way I expected:
But on Chrome on a Mac, the button looks like this:
Why is this? Is there anything in the CSS I can change that would keep the border image solid?
I’d highly recommend creating a rounded button with border-radius rather than trying to implement a border-image. See inline example below.
As for a technical explanation of why yours doesn’t look right, you may want to look into best practices for producing a border-image if you want to further pursue that route. Your Mac may have a Retina display and be improperly scaling your image.
Using border-radius:
body {
font-family: impact, sans-serif;
letter-spacing: .02em;
}
#map-search-button {
width: 125px;
height: 50px;
line-height: 50px;
background-color: #00ACC8;
border: 5px solid #00ACC8;
border-radius: 8px;
font-size: 1.5em;
text-align: center;
color: white;
}
<div id="map-search-button">FIND US!</div>
This web page div displays correctly in Firefox and Chrome
But looks ugly in Internet Explorer and Opera
My HTML Code is:
<div class="newAd">
<span id="newAdButton">
Create a new advert for FREE!
</span>
</div>
And the CSS is:
.newAd {
margin: 0 auto;
margin-bottom: 25px;
margin-top: 20px;
width: 500px;
}
#newAdButton {
margin: 10px 30px 10px 30px;
padding: 10px 40px 10px 40px;
background-color: #88FF88;
color: #000000;
font-size: 27px;
border-radius: 20px;
border: 5px solid #00FF00;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
cursor: pointer;
word-spacing: 0px;
}
Please how can I make it work for IE and Opera? Thanks.
You can use button tag instead of span and apply id to button tag.
Hopefully it'll display properly.
The problem is the border you are using for that container. Firefox and chrome have it outer while apparently IE and safari have it inner (as a test you can remove the border and see what happens). Try using box-sizing:border-box; for your #newAdButton.
I have such code:
HTML:
<div class="round">some text</div>
CSS:
.round {
width: 300px;
border: 2px solid #000;
border-right-width: 40px;
border-radius: 20px;
padding: 20px;
margin: 20px;
}
The problem occures in only the opera browser on the right side of div, which has truncated corner in the border.
Example:
http://jsfiddle.net/HddwE/1/
have you tried the o-border-radius setting? maybe you are working with an old opera version?
i have a weird bug on this page when browsing with IE
http://www.emfx.fr/?page_id=38
this image explain clearly the problem :
http://appartager.free.fr/site/bugIE.jpg
when i look at this page localy(easyPHP) with IE everything is OK
when i look at this page online with IE i have 2 problem
1) my hr tag don't align to center
2) the button send message is crop
BUT the code is exactly the same and the Browser is the same (IE)
the hr behavior is control in a css file
hr.center {
border: none;
color: #353a40;
background-color: #353a40;
height: 1px;
width: 371px;
text-align: center;
}
the button is also control by 2 css file (All Browser/IE exception)
here is the general code :
#contact_form input[type=submit] {
padding: 7px 15px;
background: rgba(255,255,255,0.1);
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
font-family: "Droid Sans", Arial;
cursor: pointer;
border: 1px solid #666;
color: #ccc;
margin-bottom: 10px;
margin-left: 420px;
}
here is the ie exception
#contact_form input[type=submit] {
padding: 8px 0px;
background: rgba(255,255,255,0.1);
margin-bottom: 300px;
margin-left: 418px;
text-align: center;
}
if you guys have any idea on how to solve this it would be great !
cheers !
sk
You've removed the horizontal padding from the button in IE
#contact_form input[type=submit] {
padding: 8px 0px; /* 15px?*/
and I'd personally center a hr using margin:auto instead of using text-align - but hr is aligned to the center by default; so you shouldn't need to adjust this.
(Taking those declarations out in IE web developer tools appears to resolve the problem).