Does anyone know why IE6 and IE7 add a white border between a button border and the background?
Here is my CSS and HTML:
#reportButton{
background:#fefcda url(buttonback.png) repeat-x bottom left;
border-top:2px solid #fffff8;
border-right:2px solid #e3b40c;
border-bottom:2px solid #e3b40c;
border-left:2px solid #fffff8;
color: #373535;
font-weight: bold;
margin:0 2%;
width:45%;
}
<button id="reportButton">Report a Concern</button>
If you try this, you will see a funny white border between the borders and the background. This does not appear in any other browser, not even IE8.
Anyone have a simple fix or suggestion as to what I'm doing wrong?
Thanks!
EDIT: I just noticed that when I click on the button, the marching ants come up and the white border disappears. It seems as though when the button is :active they disappear, although this doesn't help me much in terms of solving the problem, maybe it will for someone else.
Also, sorry I cannot provide a screen; I have no place to upload it now via this internet connection.
EDIT2: It actually appears that the border is not white but the background-color of the button. It appears IE is leaving a 1px gap between the button border and the button background image.
I had the same problem...neat trick that seems to work at least for IE:
The "white" outline is actually the background color of your image. So set this to be the same as your border color. If you don't mind a slightly-thick-ish border, stop there. If the border is now too thick, set your border color to the background color of the page.
e.g. to display a black "border" use this css for your button:
background: url(./button_bg.gif) no-repeat;
background-color:#000000;
border: 1px solid #FFFFFF;
Make sure that that border is not coming from the image itself (background of the image), set the accurate width and height, also try setting the padding to 0 like #SLaks said.
Related
Before flagging this as already asked, pls read the whole scenario. Thanks
SHORT VERSION :
Just to clearly state what i am trying to achieve, here's the page https://www.facebook.com/MercedesBenzPolska/ and I want to add border to the target element (on which i am hovering), whether it be <div> or <img> or <p>, without the shaking
DETAILED VERSION
Webpage in question: Any of Facebook's page.
Requirement: Moving a cursor over an element should add border to the target element [only on hover therefore temporary border not permanent]. Permanent border will be added ONLY if I click on that element. [Simply, if I hover over an element it will be highlighted with, say, pink border and only when i click on it, a green border would be added]
Initial problem: adding border on elements on hover would make the whole page's structure shaky, since I am constantly adding and removing the border. For that what I did was add a transparent 1 px border to all the elements of the page, and on hover just change the color of the border from transparent to pink; thus no shaky.
Present problem: The above solution was working for all the pages till I encountered Facebook's page. It turns out adding the initial 1 px border totally disrupts the structure i.e. the look and feel of the page. DIVs move from somewhere to somewhere else.
How do I now solve my original problem? Is there a way of, maybe like, applying a negative margin or border, so that adding the extra 1 px border does not dirupt the page's structure? I don't know I am just suggesting. Pls help
[SCREENSHOTS]
1. this is when the page loads [without applying the border]
2. Now when I hover over the div containing image ie adding 1 px border on hover, the divs move here and there
css I am using
* { border: 1px solid transparent !important;} //when page loads
.hover-selected{ border: 1px solid #e42a78 !important;} //on hover border
.option-selected:hover { border: 3px solid #529c56 !important;cursor: default;} //when option is selected
The images and the css both reflect towards the same problem, the default 1px transparent border disrupts the page's css and If I don't do that, the on hover border application becomes shaky and the page's css anyway gets disrupt
box-shadow: 0px 0px 0px 1px #000;
Use box shadow instead border. Box-shadow don't take up space.
div {
width:300px;
height:300px;
background: red;
}
div:hover {
box-shadow: 0px 0px 0px 1px #000 inset;
}
<div> Test </div>
outline is perfect for this. It works in a very similar way to border but does not effect layout at all.
div:hover {
outline: 1px solid orange;
}
<div>
Lorem ipsum sit amet.
</div>
<div>
<img src="https://placehold.it/200x100">
</div>
<div>
Lorem ipsum sit amet.
</div>
you can use box-sizing property in css. Try below code with and without box-sizing property
<div class="item">
</div>
.item {
box-sizing: border-box;
height: 50px;
width:50px;
background:red;
}
.item:hover{
border:1px solid black;
}
I would start from something like this and move from there:
*:hover:last-child:before {
display:block;
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
border:2px solid red !important;
}
Using a pseudo-element instead of putting a border on the actual object might not create as many issues with the initial layout. Still not exactly what you asked for, but I believe it's at least a bit closer. :-)
EDIT
I believe that the only way to achieve this as good as possible would be to be less greedy when selecting elements in the CSS, and specify a list like so:
a:hover:before,
img:hover:before{
display:block !important;
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:0 !important;
right:0 !important;
border:2px solid red !important;
}
I'm having trouble styling two different styles of buttons. The first button should be a transparent background with a 2px border, and the next button is just foundation's default styling for buttons, i.e. no border. I thought that *{box-sizing: border-box;} would make it so that the buttons would come out to the same size regardless of padding/border/margin. I thought that maybe this wasn't working because I wasn't specifying a width/height, but even when I do that it just has the effect of pushing the normal button off alignment by 2px, and even still I want the buttons to be the natural width according to the text inside of them.
The easy solution for me is to just add a border on the normal button with the same color as the background, but then I end up having to also add styles for the border for hover, active, etc... just seems like there should be a better way. Am I doing something wrong here?
Here is a jsfiddle of where I'm at: http://jsfiddle.net/xa4d4bfv/
How about adding a border with transparent color.
a.button {
border: 2px solid transparent;
}
button outline class should be the following
.button-outline {
border:2px solid #222;
color: #222;
background-color: rgba(0,0,0,0.0);
padding: 0.9rem 2rem 0.9rem 2rem !important;
}
Suslov's answer is pretty good though, mine's alright if you leave the button the same size
Does anybody know a workaround for following 'bug' in webkit?
When I use border-radius and border: solid 1px to create rounded borders on select tag it just works fine on webkit, FF and so on
But when the border more than 1px you can see the container's background overlapping the border.
You can see it here: http://dabblet.com/gist/2909020
(just change border: solid 2px #9ec3d6; to 1px to see the difference)
Thanks for your help!
With -webkit-appearance: none; you can hide the rectangle border, but this will also hide the usual dropdown icon of the select box, but you could add some background images to bring back some kind of visual indicator for the select box.
Look at these examples: http://37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit
I have an odd issue while beginning to learn CSS. This is a test page. It has a large transparent PNG covering the background color of solid blue.
Typically the black image (which has transparent holes in it) completely blacks out my background color.
In this example page I made the image's div transparent just to see if the background was still working.
Any ideas why my alpha is getting completely ignored?
Thanks all.
It's because on .backgrounddiv you have background-color set to #000. Instead use transparent to fix:
.backgrounddiv {
position:absolute;
background-color: transparent;
background-image:url(POCTransparentBG.png);
...
.backgrounddiv {
position:absolute;
background: transparent url('POCTransparentBG.png');
}
this is the proper css.
I just looked at your page, and it seems like the div with the background image on it (backgrounddiv) is styled to also have a solid black background (#000). If you remove the:
background-color: #000;
From your source, it looks the way you'd like!
I have a css class (given below). The border element is working fine in firefox, it creates a 6px white border around the image. But in IE(6) it is not creating any border ie only displays the image. Pls help me out I need to figure it out quickly.
.pimage2 {
background:url(../images/img2.gif) no-repeat;
width: 469px;
height:203px;
border:7px solid #ffffff;
}
Thanks,
Aditya
According to your comment, you're using the CSS on a table cell like this:
<td class="pimage2"></td>
But IE6 won't see this and you won't be able to get the border to show.
To get the border around it, just add a non-breaking space entity in the table cell. Like so:
<td class="pimage2">&‎nbsp;</td>
maybe with black color: ?
border:7px solid #000;
To get the border in the latest css version, you have to write border-style first then the rest of the attributes or design of the border is considered.
border:blueviolet;
border-width: 0.5px;
border-style:solid;
Or, the border will not render.