I created a few circles using CSS that I use as text inputs on my HTML index page.
Problem is that when the font inside is relatively large compare to the CSS circle, the circle turns into an oval.
It only happens on IOS. I have tested the page on Safari and Chrome and it's perfectly fine. Don't have android devices to test.
I have tried using meta flags and webkit properties but no go.
Any hints?
input[type=text5]{
position: absolute;
left: 270px;
top: 340px;
display:block;
width:50px;
height:50px;
line-height:50px;
border: 2px solid #f5f5f5;
border-radius: 50%;
margin:0 auto;
color:#f5f5f5;
text-align:center;
text-decoration:none;
background: #464646;
box-shadow: 0 0 3px gray;
font-family:Verdana;
font-size:16px;
font-weight:bold;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}
Large Font:
Small Font
well guys, I figured out after playing a bit with CSS properties. For some reason iOS was adding padding to the text. Interesting that none of the desktop browsers added padding. In any case adding: padding: 0px; solved it.
One More Way...
If you apply CSS3 Property box-sizing:border-box; on element being oval in iOS, the problem will be solved.
Related
I noticed that css border-bottom property does not work in Chrome.
So far I've checked on IE 10 and Mozilla. Works fine on these browsers. It works on Chrome when I'm not using full screen though.
#sync2 .item{
background: transparent;
color: #fff;
text-align: center;
cursor: pointer;
width:25%;
margin-right:auto;
margin-left:auto;
border-bottom:1px solid white;
transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
Try adding the following line all the way at the top of your html code:
<!DOCTYPE html>
Edit:
It's likely the same bug as the one documented here.
I also find that issue in chrome and opera i resolved it like This
first you set all the border
border:1px solid white;
and next you remove the top , left and right border
border-left:0px;
border-right:0px;
border-top:0px;
I'm making a site and I'd like it to scale properly on all devices.
On my 1080x1920 screen, it works perfectly, but on thinner devices the page does not look very good.
The white space is where the header text should be.
My code can be found here:
.header {
height: 80px;
background-color:#00117D;
background-size:100%;
color:#FFF;
font-size:30px;
font-weight:bold;
line-height: 80px;
padding: 0 30px;
border-bottom-style:solid;
border-width: 2px;
border-color:#FFF;
font-family:"Segoe UI";
}
.header p, .header a {
float: left;
margin: 0;
margin-left:30px;
color:#FFF;
text-decoration:none;
}
https://github.com/MooneyDev/project-Mooney
What I have done in previous projects it used em font size values on all properties but the body, and then used media queries at various stages to change the px based body value as required. This should catch all other values and keep them proportionate.
I would suggest you look into using bootstrap as it should really speed things up and take away a lot of the pain involved in responsive dev.
http://jsfiddle.net/NgdUR/
im basically using css triangles made with borders to create a custom select box with both up and down arrows.
If you check this on opera, chrome, safari it works just fine, but in firefox there is an extra pixel on the after pseudo element (or one less pixel on the before) anyone know why this occurs?
If i change the pseudo elements to hold a background color they have no alignment issues:
http://jsfiddle.net/NgdUR/1/
any ideas?
Edit: image in firefox,
How i looks in other browsers:
Thanks
/Jai
I added a 1px height and width and changed the border width of each pseudo element to 2px. Does the trick in Firefox, IE9 and Chrome. IE8 and Opera 11+ looks a little chunky.
Updated fiddle
.test {
position:relative;
background:#ccc;
border:1px solid #aaa;
box-shadow:#aaa 0 0 4px;
display:block;
height:26px;
width:28px;
}
.test:before,
.test:after {
content:"";
border:2px solid transparent;
width:1px;
height:1px;
display:block;
position:absolute;
left:11px;
}
.test:before {
border-bottom:3px solid #000;
top:6px;
}
.test:after {
border-top:3px solid #000;
top:14px;
}
this fixes it for me on FF11:
.test {
position:relative;
background:#ccc;
border:1px solid #aaa;
box-shadow:#aaa 0 0 4px;
display:block;
height:26px;
width:28px;
}
.test:before {
content:"";
border:3px solid transparent;
border-bottom:3px solid #000;
width:0;
height:0;
display:inline-block;
position:absolute;
top:6px;
left:11px;
}
.test:after {
content:"";
border:3px solid transparent;
border-top:3px solid #000;
width:0;
height:0;
display:inline-block;
position:absolute;
top:14px;
left:10px;
}
Well... A few years later and still the same issue: If you tell Firefox (speaking of version 45 at the moment) something with :before or :after and some game with thick border triangles, he still miscalculates the width and height of those elements randomly by up to one pixel. Which gives ugly visual annoyances, especially in the context of flowingly responsive layouts, when arrow heads and tails become separated from their body at half of all instances.
Having to fix those in one of my projects, i stumbled over this article. But it didn't actually help out of the box. Rather gave the idea to try completely other ways.
What reliably helped in my case was:
Set box-sizing of the triangle to border-box
Give the inner content of the triangle (width/height) size 0
Give the outer border-box the exact wanted size of the triangle
Relatively simple, but for Firefox the only way to get him into submission to the rules. Chrome didn't have any problem with any method of sizing. Opera, despite being a clone of Chrome, surprisingly showed the same clownery as Firefox, but also the same Taming.
I am having trouble with handling the vertical alignment of a div within another div in IE.
My html code is as follows :
<div class="header">
<div id="mainMenu">
<!--Here goes my main menu-->
</div>
</div>
My styles are as follows :
#mainMenu
{
/*background-color: #FFF;*/
font-family: fantasy, cursive, Serif;
font-size:16px;
/*border-bottom:1px solid #000000;*/
height:125px;
position:relative;
}
.header {
top: 0px;
color:#FFA500;
z-index:1000;
height:120px;
padding:8px 2px 8px 15px;
overflow:hidden;
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;
-moz-box-shadow:0 1px 3px #777;
-webkit-box-shadow:0 2px 3px #777;
box-shadow:0 2px 3px #777;
background: url("../images/plusoneurls_resize.png") repeat scroll 0 0 transparent;
}
Now in firefox , my main items are showing at the bottom when I mahe the height attribute to 120px (100%) for the style attached to #mainMenu , but it's not working in IE.
I even tried by giving top:100% , in firefox it shows fine ,but in IE , it's overflowing into the main content.
How to devise a workaround for this?
Check that you're not in Quirks mode.
If you don't have a valid <!DOCTYPE> declaration at the top of your HTML code, IE will drop into Quirks mode. This mode changes a number of aspects of CSS, and tends to have a fairly dramatic effects on heights and widths of elements.
Quirks mode is a legacy feature, which should never be used any more, so you should always make sure you have a valid doctype. you haven't provided enough of your code for me to know whether you've got one or not, but if not, you need to add one.
If you're not sure what doctype to use, simply use the HTML5 doctype, like so:
<!DOCTYPE html>
Put this at the very top of your HTML code (first line, before the <html> tag or anything).
Use a CSS reset.
YUI provides a good one.
#mainMenu
{
position: absolute;
bottom: 0;
left: 0;
}
.header
{
position: relative;
}
How (Not) To Vertically Center Content
Would definitely recommend using CSS, but they also illustrate and example using Tables
Make sure the zoom level is set to 100% on both browsers. (Ctrl+0)
I have a nav menu in which the hover state of a link looks like this,
As you can see there is a rounded corner background set upon an orange background. The client has requested that this works right through the IE6 (they are not at the stage where they can upgrade yet). Now I came into web-development quite recently so I have not learnt old techniques for achieving this effect could some enlighten me please? Below is my code, currently I am using CSS3.
#navPrimary {
background:#de4702;
height:37px;
margin:0px auto;
width:517px;
padding:5px 0px 0px 0px;
display:block;
overflow:hidden;
}
#navPrimary li {
width:252px;
float:left;
display:block;
height:100px;
list-style-type:none;
text-align:center;
margin:0px 0px 0px 8px;
}
#navPrimary li.first {
width:67px;
padding:0px 14px 0px 14px;
display:block;
margin:0;
}
#navPrimary .last {
width:154px;
}
#navPrimary li a {
color:#fff;
font-weight:bold;
text-decoration:none;
display:block;
height:27px;
padding:10px 0px 0px 0px;
}
#navPrimary li a:hover {
color:#de4702;
background:#fff;
-moz-border-radius:10px 10px 0px 0px;
-webkit-border-radius:10px 10px 0px 0px;
border-radius:10px 10px 0px 0px;
}
<ul id="navPrimary">
<li class="first">Home</li>
<li>Free Admission </li>
<li class="last">Terms & Conditions</li>
</ul>
The technique to achive this is called Sliding Doors. Read more about it here.
It's basically about using images at two elements (two parts of a door).. one at the left side and another at the right side.
It will take a few spans and images but you can get the same affect using the css sliding door technique. Check out this list apart article here: http://www.alistapart.com/articles/slidingdoors/
You also could try this css3pie which ads css3 tag support for IE6 to IE8
This may not work for you, but if you're needing rounded corners and all four corners are the same radius, you can make it work with CSS3 PIE:
http://css3pie.com/
Again, this only works if all your corners are the same radius.
If the only reason you have dismissed JavaScript as an option is because you don't think a JavaScript framework would support IE6, then have you checked out RaphaelJS (http://raphaeljs.com/)?
RaphaelJS is a graphics library which supports all major browsers including IE6.
You could also look at another pure CSS solution for rounded corners that does not require images or JavaScript.
http://www.spiffycorners.com/