I have this CSS problem. Some divs shows an extra border only in Firefox:
But on Safari and Chrome it looks good:
This is the css for the divs:
.div {
color:#555555;
font-size: 13pt;
padding: 15px 20px;
margin-bottom:-5px;
background-color: #ffffff;
height:auto; display:inline-block; width:900px;
border-top:solid 1px #e1e1e1;
z-index: 90;
position:relative;
}
I think your problem is display:inline-block;, you make them inline. why? firefox seem to insert new lines, that's the space you see. is there a reason why you don't use display: block? (just not visible in your small screenshots)
I have the site
and it renders ok, even in IE. However in Opera 11.62 there is a very weird bug whenever I am hovering over the links from the navbar. Why does this happen? It is very annoying.
There is also a very weird thing that is happening, if I resize the browser window so the last link is out the pages than only the last link it displays ok on hover, but the other 2 are still broken.
Add this line of code to a:hover
height: 100%;
So you get:
a:hover {
background: -o-linear-gradient(top, #93C9ED 0px, #76B4E1 100%) transparent;
border-bottom: medium none currentColor;
border-left: 1px solid #1C5E9C;
border-right: 1px solid #1C5E9C;
border-top: 1px solid #1C5E9C;
color: #275D8B;
height: 100%;
}
Add a height to the anchor tag, same as your line-height:
header nav ul li a { height:2.5em; }
This works for me, in Opera 11.64. I see you've already tried this solution, but I'm guessing the reason you haven't made it work, is because the line-height is 2.5em, not 2.8 (unless you've changed it).
I just noticed that my address link styled as a button does not properly show a radius in IE9 when using the CSS below:
a.btn {
background: #F00;
color:#333;
font-size:12px;
padding: 3px 4px 3px 4px;
border:1px solid #444;
border-radius:3px 3px 3px 3px; -moz-border-radius:3px; -webkit-border-radius:3px;
cursor:default;
}
CSS example
When I remove the border:1px solid #444; then a nice curved border appears.
Is this a bug with IE? In Firefox everything works good. Anyone else seen anything like this? Seems like it only happens when border-radius is set to a low value. I know this is not very important on the scale of things but I'm interested to hear if anyone knows why the radius doesn't properly show.
It works for me.
Check it using
border-radius: 20px;
http://jsfiddle.net/6Nr2n/1/
http://prntscr.com/2djxa
I am trying to style buttons in my current project cross browser. When I checked those buttons in Safari, they looked different than in any other browser, even Chrome. In general buttons looks the same in FF, IE6-8, Opera and Chrome. But in Safari buttons have 3px of unknown extra space on left and right sides, so buttons looks wider in Safari rather than in Chrome or other browser. Total width of button in Safari web inspector 6px larger than in Chrome web inspector. Also, this strange behavior occurs only if button have width:auto, with fixed width buttons appears just fine. Since Safari and Chrome have same layout engine (webkit), I`m in a little embarrassment.
Here is the demo of what I`m talking about:
http://iliadraznin.com/examples/css-only-buttons/ - check blue buttons in Chrome and then compare with Safari (you can see exact difference in web inspector).
Upd.: This example is not mine, it is just illustrates how Safari behaves. Here is my exact CSS and HTML:
<button class="blueButton" type="submit">Register</button>
.blueButton {
color:#fff;
background:#007ec6;
border:2px solid #211b4d;
cursor:pointer;
font:14px Arial;
text-shadow:#003585 0 -1px 1px;
width:auto;
overflow: visible;
padding:0 13px;
height:26px;
white-space:nowrap;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
behavior:url(PIE.htc);
position:relative;}
button::-moz-focus-inner {padding:0;border:0;}
If you will remove padding completely you will see exactly that extra little space in Safari
Is there any way to get rid of this extra button space in Safari?
Here's the answer you seek:
.blueButton {
color:#fff;
background:#007ec6;
border:2px solid #211b4d;
cursor:pointer;
font:14px Arial;
text-shadow:#003585 0 -1px 1px;
width:auto;
overflow: visible;
padding:0 13px;
height:26px;
white-space:nowrap;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
behavior:url(PIE.htc);
position:relative;
}
.blueButton::-moz-focus-inner {padding:0;border:0;}
#media screen and (-webkit-min-device-pixel-ratio:0) {
.blueButton {
margin: 0px;
}
}
This question already has answers here:
CSS hover border makes elements adjust slightly
(14 answers)
Closed 25 days ago.
I have an li styled as follows:
li{
display:inline-block;
padding:5px;
border:1px solid none;
}
li:hover{
border:1px solid #FC0;
}
When I hover over the li the border appears, but the li's shift around. Is it possible to have the border appear without causing the element to shift? Almost like having an invisible border, and then on hover make it appear?
You can use "transparent" as a colour. In some versions of IE, that comes up as black, but I've not tested it out since the IE6 days.
http://www.researchkitchen.de/blog/archives/css-bordercolor-transparent.php
Many of you must be landing here to find a solution for opaque border instead of a transparent one. In that case you can use rgba, where a stands for alpha.
.your_class {
height: 100px;
width: 100px;
margin: 100px;
border: 10px solid rgba(255,255,255,.5);
}
Demo
Here, you can change the opacity of the border from 0-1
If you simply want a complete transparent border, the best thing to use is transparent, like border: 1px solid transparent;
You could remove the border and increase the padding:
li {
display: inline-block;
padding: 6px;
border-width: 0px;
}
li:hover {
border: 1px solid #FC0;
padding: 5px;
}
<ul>
<li>Hovering is great</li>
</ul>
hey this is the best solution I ever experienced.. this is CSS3
use following property to your div or anywhere you wanna put border trasparent
e.g.
div_class {
border: 10px solid #999;
background-clip: padding-box; /* Firefox 4+, Opera, for IE9+, Chrome */
}
this will work..
Yep, you can use border: 1px solid transparent
Another solution is to use outline on hover (and set the border to 0) which doesn't affect the document flow:
li{
display:inline-block;
padding:5px;
border:0;
}
li:hover{
outline:1px solid #FC0;
}
NB. You can only set the outline as a sharthand property, not for individual sides. It's only meant to be used for debugging but it works nicely.
Since you said in a comment that the more options you have, the better, here's another one.
In CSS3, there are two different so-called "box models". One adds the border and padding to the width of a block element, while the other does not. You can use the latter by specifying
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
Then, in modern browsers, the element will always have the same width. I.e., if you apply a border to it on hover, the width of the border will not add to the overall width of the element; the border will be added "inside" the element, so to speak. However, if I remember correctly, you must specify the width explicitly for this to work. Which is probably not an option for you in this particular case, but you can keep it in mind for future situations.
This blog entry has a way to emulate border-color: transparent in IE6. The below example includes the "hasLayout" fix that is brought up in the blog entry comments:
/* transparent border */
.testDiv {
width: 200px;
height: 200px;
border: solid 10px transparent;
}
/* IE6 fix */
*html .testDiv {
zoom: 1;
border-color: #FEFEFE;
filter: chroma(color=#FEFEFE);
}
Make sure that the border-color used in the IE6 fix is not used anywhere in the .testDiv element. I changed the example from pink to #FEFEFE because that seems even less likely to be used.
Use transparent property
border-color : transparent;
The easiest solution to this is to use rgba as the color: border-color: rgba(0,0,0,0); That is fully transparent border color.