I'm using bootstrap to make some buttons containing images.
But when I click them, a strange horizontal line appears, as well as a dotted bounding box on FF.
i have tried outline: none;,but it doesn't change anything...
how can i re-arrange the html (or edit the css) to fix this? I don't want those boxes (especially the horizontal one in the middle)
thanks
html
<div class="button frontbutton col-md-4">
<a href="/tips">
<img src="url.png" class="buttonPic">
<span data-i18n="buttons.tips">Tips</span>
</a>
</div>
css
.frontbutton {
padding: 15px;
}
.button {
display: inline-block;
color: #444;
border: 1px solid #CCC;
background: rgba(210, 210, 210, 0.62);
box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
margin: 0px;
cursor: pointer;
vertical-align: middle;
text-align: center;
}
a {
color: #199ACE;
outline: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
img.buttonPic {
width: 95%;
}
thanks
https://jsfiddle.net/pLkyqz0x/
UPDATE
while making the fiddle, i noticed what caused the gray bar (box shadow on a:active)
but the red box on FF remains....
This is the a:focus { } style. So you can remove it by setting a:focus { outline: none; } however this is not considered best practice as the focus style is an accessibility requirement. You should instead redefine focus styles that work for you. (For further reading on why this is bad practice: http://www.outlinenone.com/)
Related
I have a button . When I click on it, some weird dotted lines show up like this which I cannot remove. Tried everything I know in CSS but cannot fix. Please Help.
Here is my css:
input.filterIcon {
width: 32px !important;
height: 32px !important;
background: url(../images/filter-icn.png) no-repeat center right !important;
padding: 0px !important;
cursor: pointer;
float: right;
vertical-align: middle;
margin: 0 0 0 10px !important;
font-size: 12px;
letter-spacing: 0.5px;
position: fixed;
z-index: 99999;
top: 70px;
right: 15px;
outline: 0 !important;
}
Here is my html
<form id="search_form">
<input type="button" class="filterIcon" id="iconfilter">
</form>
Anchor links ('s) by default have a dotted outline around them when they become "active" or "focused".
If you want it gone, and you want it gone on every single anchor link, just include this as a part of your CSS reset:
a, button {
outline: 0;
}
a:hover, a:active, a:focus {
/* styling for any way a link is about to be used */
}
Firefox Inputs Clicking down on an input type=image can produce a dotted outline
To remove it: input::-moz-focus-inner { border: 0; }
Source : https://css-tricks.com/removing-the-dotted-outline/
Difficult to determine without any additional info but try adding this to the button’s css
outline: 0;
Its because of outline, you can try this code.
button, button:hover, button:focus, button:active,
a, a:hover, a:focus, a:active {
outline: 0;
}
The dotted border is there for accessibility reasons as a visual clue of what has been selected (clicked on). You can get rid of this easily by adding this CSS to the elements (class name depends on the element):
.button {
outline: none;
}
outline on the Mozilla Developer Network:
The outline CSS property is a shorthand for setting various outline properties in a single declaration: outline-style, outline-width, and outline-color.
You can remove the outline with this code:
outline: none;
I can't figure out what is causing the uneven spacing that you see in the image http://i.imgur.com/AZoXzYf.png (can't embed images yet ... sorry)
which comes from http://playclassicsnake.com/Scores. My relevant CSS is
.page-btn { background: #19FF19; color: #FFF; border: 0; border: 3px solid transparent; }
.page-btn.cur-page { border-color: #FFF; cursor: pointer; }
.page-btn + .page-btn { margin-left: 5px; }
and I've inspected the elements to make sure there's nothing fishy. What's the deal?
You have a new line character in your HTML just after your first button:
<button class="page-btn cur-page">1</button>
<button class="page-btn">2</button><button class="page-btn">3</button>
Make it all in 1 line and it will start to work without any extra spaces:
<button class="page-btn cur-page">1</button><button class="page-btn">2</button><button class="page-btn">3</button>
Your CSS is perfectly fine and doesn't need to be altered as mentioned by others..
Hi now try to this css
#page-btns-holder {
width: 80%;
margin-top: 12px;
font-size: 0;
}
div#page-btns-holder * {
font-size: 14px;
}
.page-btn {
background: #19FF19;
color: #FFF;
border: 0;
border: 3px solid transparent;
display: inline-block;
vertical-align: top;
font-size: 14px;
}
Define your btn display inline-block and remove space to inline-block element define your patent font-size:0; and child define font-size:14px; as like this i give you example
Remove Whitespace Between Inline-Block Elements
Try to make the font-size of the parent content 0, also try setting letter-spacing to 0.
On occasion it is required that a DIV is a specific size so to ensure that the layout lines up but often it seems impossible to fine the CSS to ensure that it sits correctly in all of the major browsers.
For example this simple JSFiddle shows a few tabs that select the div that is shown below the tabs. To make it look more like you are pulling the section to the surface using the tab it overlaps the section slightly with no lower border so it appears the tab and section are one and the same.
The issue is that the height of the tab must be exact or the illusion is destroyed. With this example the tabs are the correct size in the latest Firefox, Safari (last PC version) & Chrome but a pixel to short in Opera so it doesn't overwrite the top border of the text section (details div) and two pixels to small in IE 10 so there is actually a gap between the tabs and main section.
I know I could create a separate style sheet that only loads for IE and Opera etc but I would rather avoid it if possible as it will increase the work for maintaining the site.
HTML from JSFiddle:
<div class="product-details-page">
<div class="details-tabs">
<div class="tabs">
<div class="description selected">Description</div>
<div class="deliveryOptions">Delivery Options</div>
</div>
<div class="details">
<div class="description show">A big description of a product. Might go over several lines and will be very "descriptive".</div>
<div class="deliveryOptions">We just chuck it in Santa's bag when he isn't looking.. <br>Delivery is only once a year but it's FREE! ;)</div>
</div>
</div>
</div>
CSS from JSFiddle
.product-details-page .details-tabs {
margin-top: 15px;
}
.product-details-page .details {
border: 1px solid #808080;
padding: 5px;
}
.product-details-page .details-tabs .tabs > div {
border: 1px solid grey;
border-bottom: none;
cursor: pointer;
display: inline-block;
padding: 5px;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.product-details-page .details-tabs .tabs > div:hover {
background-color: #FF0000;
color: #FFFFFF;
}
.product-details-page .details > div {
display: none;
}
.product-details-page .details > div.show {
display: block;
}
.product-details-page .details-tabs .tabs {
height: 26px;
}
.product-details-page .details-tabs .tabs .selected {
background-color: #FFFFFF;
color: #000000;
-webkit-text-shadow: 0 0 7px #FF0000;
text-shadow: 0 0 7px #FF0000;
}
body {
font-family:"arial,?helvetica,?sans-serif";
font-size: 12px;
}
Try setting a fixed line-height on your tabs. The default value for line-height is browser-specific, and it may cause a slight offset. A typical value would be 1.2.
In fact, you realised this yourself in your comment ;) It's the text that's to blame, and the above line-height should fix it.
I am trying to create a box that has a 'highlight' down the sides of it, and at the top.
The CSS for the box was pretty simple, however, now that I introduced this 'highlight' to the design, it has added another level of complexity to the CSS...
I have tried a lot of things, not sure if they will help but here is my most recent:
/* Define the Main Navigation Drop Downs */
#mn_navigation .dd {position:relative;width:226px;padding:29px 0 0;background:transparent url("//beta.example.co.uk/_images/_global/dd_handle.png") no-repeat;z-index:1000;}
#mn_navigation .dd nav {padding:30px 0;background:#3E5032 url("//beta.example.co.uk/_images/_global/dd_bg.png");border-radius:3px;}
#mn_navigation .dd nav a {font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#fff !important;height:25px;line-height:25px;}
Please note I have posted the above to show that I have actually tried to sort this myself. The above code will probably not even help as a starting point as a restructure of the HTML may be necessary!
Here is the current HTML (probably needs to be restructured):
<div id="dd_foo" class="dd">
<nav>
LINK
</nav>
</div>
Here is a possible restructure (something like):
<div id="dd_foo" class="dd">
<div class="handle"><!-- Dropdown Handle --></div>
<nav>
LINK
</nav>
</div>
This is what I need the box to look like (notice the faint white border at the top and half way down the sides):
I have also included the box split into its separate elements (handle and background)
I think I can see how this can be done with clever overlaps and nested divs, but ideally I don't really want to resort to this... Can anybody suggest an alternative solution?
Simplest approach
You can try achieving this using a simple box shadow:
.plaque {
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.32);
/*...*/
}
An Example
Here's an example using 1 class and a div on jsbin.
Copy paste code
This code is only for modern browsers; it might cause ie < 9 and other non supporting browsers to explode.
.plaque:after {
top: -9px;
content: " ";
height: 11px;
width: 30px;
position: absolute;
pointer-events: none;
left: 50%;
margin-left: -15px;
display: block;
background-repeat: no-repeat;
}
.plaque {
width: 250px;
height: 100px;
display: block;
border: 0;
outline: 0;
padding: 12px 16px;
line-height: 1.4;
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.32);
border-radius: 5px;
border: 1px solid transparent;
font-family: sans-serif;
color: white;
font-size: 1.2em;
text-overflow: ellipsis;
position: relative;
top: 6px;
}
/* Use whatever background you want */
.plaque { background-color: green; }
.plaque:after { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcJJREFUeNqMUktPU0EU/mZuL6Up1RCjC4oRau4t4FJ84EKID/ZAjI9/6Mo/4MadG5dqJGjBatpyuY+2UNreeXDOBE0MNHGSSWZyzvnOd77zicdbd+EVJKyxGPSHmC4XIYSAMQYCoJhn81wJKSnHWhR8D1oZl69yhamiD8GBSefpywc2XKzjy7fP+PDuk5iUJxnksvvkxX1buxkgThOEt5exvr1qJ+XKy5CfvXpow9oSsn6GdqeF40EPK+GKY/ZfTNa3Vm1AI6TdFAeNfQgp0CKgrJehVg1AGl5gJLTWfxGfv15zI3BBnB5CehJGG5Cw8EjY6tw8KjNXsfv9K96//SguMOERgoU6+ic9NH8eQClNGzDQBMLb4FU1fzdxFB+hev0WNnbu2X802TxnkGQJoriNymwZHrFgAbhdidbOK+YTxR0ojLEc3sHmm0dOI8Gq10n9OI1xGLVcMvuGGYyHOYqlKcfK9wvOF3/i12ZvoFK+gsavPUgGSLsJkm4En4xDTqMi45iUZqZdd34zJY7L8was2enoGMHCEmS3l6LxYx9qrJ2I7FTNelBxPlKuYDgYu9nzUe6cenoygqF/J2o7AmcCDACumSjtgWp8aAAAAABJRU5ErkJggg==); }
So I was styling a contact form on my website
And I ren into an issue with "Send button", for some reason has margin/is aligned more to the right than needed. You can see that in other 2 sections brown buttons are aligned correctly, but in third contact section that brown send button is aligned more to the right than needed, I have no idea on what is causing it...
Here is css that affects that button (button has id="msgSend"):
.inner-trio a, #msgSend {
color: #fff;
padding: 3px 0;
margin: 7px;
display: block;
border-radius: 5px 5px 6px 6px;
background-color: #6a2c10;
text-shadow: 1px 1px #471d0a;
text-align: center;
border-bottom: 4px solid #381201;
}
.inner-trio a:hover, #msgSend:hover {
background-color: #853815;
border-bottom: 4px solid #5b2005;
cursor: pointer !important;
}
.inner-trio a:active, #msgSend:active {
background-color: #6a2c10;
border-bottom: none;
margin-top: 11px;
}
The problem is that you define margin:7px to your form & input. If you want desire result then write like this:
input[type="submit"]{
margin-left:0;
}
Easiest way to solve this should be, to add:
#msgSend { margin: 0px;}
to your css.
You have the width of all input elements set to 100% plus you have 7px margin on your input button. There's your problem :)