I´m having this problem with border radius on IE-9
As you can see it creates some white pixel on the left border. any ideas why is that?
This only happens on IE 9, all other browsers are ok
This is the markup:
<ul class="tags clearfix">
<li>
Etiqueta Uno
</li>
<li>
Otra etiqueta
</li>
</ul><!-- tags -->
This is the CSS:
#article_sidebar ul.tags li {
background: #000000;
list-style: none;
float: left;
margin-right: 4px;
padding: 0px 18px 0px 19px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
line-height: 20px;
margin-bottom: 4px;
}
#fxg Why don't you also try making an IE-Only Stylesheet. You can refer this for making a stylesheet, that will target only IE and in that stylesheet you can give
li{
border: 0 none;
}
Hope, that works for you.
If I had to guess, I'd say it's a rounding error. This can happen under certain conditions, such as when the calculated value is a non-terminated floating point value (ie - 3.3333333...). Depending on how the browser does its rounding, this can create a visual error, such as what you're seeing.
Take a look at your padding value. Notice how your padding-right is 18px, and the right side doesn't have this issue, but your padding-left is 19px? Try changing your padding-left to 18px and see if that fixes the issue.
Also, try changing your border-radius value to something a little larger, such as 3px or 4px and see if it changes anything.
Also, make sure that you haven't accidentally zoomed in slightly. You can ensure your browser's zoom is reset by pressing ctrl+0.
You can try to set overflow: hidden; for lis, and/or outline: none; for as.
Related
This is driving me a bit nuts...I'm working on a site and trying to get a <ul> to render consistently across Safari (v 7.0.1) and Firefox (v 25.0.1). I've simplified the CSS and HTML just about as much as I can... there is still a difference in the distance between the "job title" (the <a> tag) and "location" (the <p> tag) of several pixels between the two browsers.
Fiddle is at http://jsfiddle.net/7BZGU/7/
Here's my code -- is there something obvious I'm doing wrong? I understand browsers render stuff differently, but I'm not sure why two modern browsers have such a difference when dealing with pretty vanilla code...
HTML
<div id="main">
<div id="current-openings">
<h3>Current Openings</h3>
<ul>
<li>
Junior Risk Reporting Analyst
<p>Chicago, IL</p>
</li>
<li>
Trading Data Analyst
<p>Houston, TX</p>
</li>
</ul>
</div>
</div>
CSS
#current-openings {
margin: 30px 0 10px 50px;
font-family: Verdana;
}
#current-openings h3 {
font-size: 25px;
}
#main ul {
margin: 15px 0 0 0;
line-height: 5px;
}
#main ul li {
list-style-type: none;
padding: 4px 0 25px 21px;
}
#main p {
font-size: 11px;
font-style: italic;
}
I did a couple things that helped the spacing be pretty close!
I removed the line height from your ul: having such a low line height will create a jumble of text once the text wraps)
set the paragraph's margin automatically by doing this:
margin: 10px 0px;
I believe what you are trying to do is align the bullet image, correct? To do this it is best to use:
background-position: 0px 10px;
Doing this eliminates the need for line height anyway!
This helps by overriding the initial paragraph styles and setting them specifically, so it works across multiple browsers.
Hope this helps!
It should be simple to center text in a button. Unfortunately, across different browsers and platforms, I get different results.
I've tried for hours to fix it, but nothing works everywhere.
Chrome, mac OS X:
(source: d.pr)
Chrome, Windows 8
(source: d.pr)
IE 10, Windows 8
(source: d.pr)
So, yeah. The big block doesn't appear in IE if I set a defined height, but I don't get why it breaks down in the first place.
Here's the code:
.btn-call-to-action {
background: #8e8287;
margin-bottom: 15px;
color: #f5f3e2;
padding: 3px 18px 3px 10px;
margin-top: 6px;
display: inline-block;
position: relative;
border-bottom: none;
border-radius: 2px;
white-space: nowrap;
.btn-call-to-action a:after {
content: url('../img/general-white-arrow.svg?1369574895');
position: absolute;
width: 35px;
right: 15px;
top: 0px; }
and the HTML (pretty simple) :
Want more ?
and the site: http://aurelieremia.be/tfa/
// edit: I think I get it. Still not centered in windows but by resetting the line height, the button looks a bit more normal. IE problem resolved, I'll try using a background-image instead (thanks Ana)
I'm not sure if this will help but cross browser centering in css is a big pain so I use Twitter Bootstrap and overwrite some of the classes.
If this sounds like something you'd consider you can check out the solution here
Leave :after in static .
vertical-align to middle or explicite value (depends of where really stand arrow in svg/img).
white-space:nowrap to parent box to secure, but not necessary:
http://codepen.io/gcyrillus/pen/vzrGj
How about something like this:
HTML:
<a href="about.html">
<div class="btn-call-to-action">
<span>Want more? <img src="http://bkids.sisuweb.co/wp-content/uploads/2013/04/postArrowR.png" />
</span>
</div>
</a>
CSS:
.btn-call-to-action{
width:160px;
height:80px;
background: #8e8287;
padding: 3px 18px 3px 10px;
margin:8px;
color: #f5f3e2;
border-radius: 2px;
display:table;
text-align:center;
}
.btn-call-to-action span{
display:table-cell;
vertical-align:middle;
}
Fiddle here: http://jsfiddle.net/MQHVE/3/
The important part here is to have the wrapper (the a tag) display:table and the content (span) display:table-cell. Then you can apply vertical-align:middle to the span.
This question is based on this JSFiddle. It is a navigation design with two top level menu items and three submenus (structured for accessibility without script). An element to look at may be:
<nav class="top-menu">
There is one pressing issue:
Just open the JSFiddle in Internet Explorer and see. Why does it drop down like that only in IE? Even in IE9 and 10.
Any help here will be greatly appreciated!
I have noticed that "top-header" blocks had different heights, and to fix this I've added line-height CSS rule:
.top-header {
padding: 0 0 5px 0;
display: inline-block;
margin-left: 20px;
position: relative;
+ line-height: 28px;
}
And it currently seems same for me in IE and Chrome.
Updated fiddle
add
height :136px \0/;
at the end of .top-header
and the problem will be solved check
jsfiddle
You may use some 'tape' to fix this in IE. :)
Via CC, add a border-bottom: white 10px solid; or outline:white 10px solid;
http://jsfiddle.net/SKJvv/7/ http://jsfiddle.net/SKJvv/8/
It doesn't explain much what layout is playing about.
(CC included : http://jsfiddle.net/SKJvv/10/ )
I am trying to build a toolbar, containing a checkbox like this.
<div class="toolbar"><div class="widget-toolbar">
<ul class="items">
<li class="toolbar-button item">
Record
</li><li class="toolbar-button item">
Load
</li><li class="toolbar-button item">
Save
</li><li class="toolbar-button item">
Clear
</li><li class="toolbar-checkbox item">
<input type="checkbox" id="1369637447465" value="true">
<label for="1369637447465" style="-webkit-user-select: none;">Continuous check</label>
</li></ul>
</div></div>
But as you can see in this fiddle http://jsfiddle.net/9WSpa/ its Result has one pixel space between the botder-top of the toolbar and the border top of each button. Now if you remove the checkbox from the ul, then the pixel line vanishes and everything is fine. Can anyone tell me, why the checkbox consumes one pixel more than the rest?
Thanks in advance
Chris
If you inspect the radio button with your developer tool, then you'll discover that the input[type=radio"] has a default margin. This margin is the source of the extra pixels.
user agent stylesheet input[type="checkbox"] {
margin: 3px 3px 3px 4px;
}
Solution:
input[type="checkbox"] {
margin: 0;
}
Add vertical-align:top to checkbox
input{
vertical-align:top
}
DEMO
And for explanation check this similar answer
Im not going to say that this is the case for all browsers but a fair majority.
when it comes to radio and checkbox inputs they usual have a default margin preset.
For Chrome :
margin-top: 3px;
margin-right: 0.5ex;
margin-bottom: 3px;
margin-left: 0.5ex;
For FireFox :
margin-top: 3px;
margin-right: 3px;
margin-bottom: 3px;
margin-left: 4px;
with that being said I've reviewed your code and noticed by css faults set in placed text at 12px with a padding-top & bottom 2px each equaling 16px's total while a checkbox depending on the browser is set about 5px around with 1px border not to mention the margin of 3px top and bottom making 18px. In order to compensate, modify the presets with the following.
.widget-toolbar .items input[type="checkbox"]{
margin: 2px 0.5ex;
}
Heres a screenshot to make it clear. I'm trying to figure out a robust way of making the bullet images vertically aligned to my li content. As you can see my content is currently too high.
Many thanks 'over-flowers'...
http://dl.getdropbox.com/u/240752/list-example.gif
Well, some css code to see how you currently set your bullet images would be useful ;-)
Instead of actually setting the 'list-style-image' property, I've had far more consistent results with setting a background-image property for the li element. You can then control the positioning with pixel accuracy. Remember to set a suitable left-padding value to push your list item contents clear of the bullet image.
I like #bryn's answer.
One example I've used successfully:
#content ul li {
margin: 3px -20px 3px 20px;
padding: 0 0 0 0;
list-style: none;
background: url(newbullet.gif) no-repeat 0 3px;
}
The negative right margin may or may not be needed in your case.
You may need to adjust to meet your specific needs depending on your image. (My image is 14 x 15.)
You must specifically set margins and padding if you want a similar look across browsers as Firefox and IE use different defaults for displaying bullets.
You can use something like this in your css...
#content li{
list-style-image: url(../images/bullet.gif);
}
use background-image, for your li elements, add padding.
.box li{
padding-left: 20px;
background-image: url("img/list_icon.jpg");
background-repeat: no-repeat;
background-position: 0px 2px;
margin-top: 6px;
}