I am using Bootstrap 4 alpha. How can I customize (Eg: removing border-radius, changing bar base color, filled color etc...)?
Tried with below code.. but it is not working though :(
LIVE DEMO
HTML
<div class="b4-test">
<progress class="progress" value="75" max="100">75%</progress>
</div>
CSS
.b4-test{
padding:50px;
width:500px;
margin:50px auto;
text-align:center;
background:#ccc;
}
progress{
border-radius:0 !important;
background-image:none !important;
background-color:red !important;
color:green !important;
height:50px;
}
Check this snippet in Firefox
This snippet will work in Firefox only..
Edit
I have also created plunker to show in Firefox please check this
Firefox Plunker
.b4-test {
padding: 50px;
width: 500px;
margin: 50px auto;
text-align: center;
background: #ccc;
}
.progress[value] {
border-radius: 0;
background-color: red;
}
.progress[value]::-moz-progress-bar {
background-color: green;
}
<div class="b4-test">
<progress class="progress" value="75" max="100">75%</progress>
</div>
For Chrome check the below plunker
check this Chrome Plunker
Had similar problem, but I just wanted to change the color of the progress part.
My progress bar is the following:
<progress class="progress progress-custom" value="25" max="100">25%</progress>
I added the custom class progress-custom to the Object and defined some CSS for it.
.progress-custom[value]::-webkit-progress-value {
background-color: #FE6502;
}
.progress-custom[value]::-moz-progress-bar {
background-color: #FE6502;
}
.progress-custom[value]::-ms-fill {
background-color: #FE6502;
}
#media screen and (min-width: 0\0) {
.progress-custom .progress-bar {
background-color: #FE6502;
}
}
These additional CSS will change the color of the progress part. I also tested with the border-radius, it is also possible to change this to whatever you want.
I just tested it really quickly: Chrome and Firefox were affected by the changes, IE had the right color, but the border-radius did not work.
I did already find a post about using the <hr> tag to insert a line break, but when I looked up the tag on the w3 website (http://www.w3schools.com/tags/tag_hr.asp) it says that all attributes of the tag are not supported in HTML5. Obviously I want to make my website HTML5 compatible, so what would be the best way to insert a visible horizontal line?
Thanks
You can still use <hr> as a horizontal line, and you probably should. In HTML5 it defines a thematic break in content, without making any promises about how it is displayed. The attributes that aren't supported in the HTML5 spec are all related to the tag's appearance. The appearance should be set in CSS, not in the HTML itself.
So use the <hr> tag without attributes, then style it in CSS to appear the way you want.
Simply use hr tag in HTML file and add below code in CSS file .
hr {
display: block;
position: relative;
padding: 0;
margin: 8px auto;
height: 0;
width: 100%;
max-height: 0;
font-size: 1px;
line-height: 0;
clear: both;
border: none;
border-top: 1px solid #aaaaaa;
border-bottom: 1px solid #ffffff;
}
it works perfectly .
You can make a div that has the same attributes as the <hr> tag. This way it is fully able to be customized. Here is some sample code:
The HTML:
<h3>This is a header.</h3>
<div class="customHr">.</div>
<p>Here is some sample paragraph text.<br>
This demonstrates what could go below a custom hr.</p>
The CSS:
.customHr {
width: 95%
font-size: 1px;
color: rgba(0, 0, 0, 0);
line-height: 1px;
background-color: grey;
margin-top: -6px;
margin-bottom: 10px;
}
To see how the project turns out, here is a JSFiddle for the above code: http://jsfiddle.net/SplashHero/qmccsc06/1/
Instead of using <hr>, you can one of the border of the enclosing block and display it as a horizontal line.
Here is a sample code:
The HTML:
<div class="title_block">
<h3>This is a header.</h3>
</div>
<p>Here is some sample paragraph text.<br>
This demonstrates that a horizontal line goes between the title and the paragraph.</p>
The CSS:
.title_block {
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
margin-bottom: 5px;
}
I am answering this old question just because it still shows up in google queries and I think one optimal answer is missing. Try this code:
use ::before or ::after
See Align <hr> to the left in an HTML5-compliant way
I’ve been pulling my hair out about trying to get a couple of elements to line up across browsers. I am working in Drupal 7, if that matters.
I am working on a local vbox vagrant machine, so I cannot link to the content. It also will not let me post a picture, so here are links to the two variations of what is being displayed:
The globe and social icons are fonts from Glyphicons and the ssrn icon is a png that I created to mimic them. My problem is they are not responding to margins the same way. I think it has something to do with having to give the glyphicons a negative top margin to line them up, but that leaves the ssrn icon out of line in some browsers. Is there a way to define margins based on webkit etc? I cannot find one.
HTML:
<div class="views-field views-field-field-website"> <div class="field-content"><div id="website">
</div></div> </div>
<div class="views-field views-field-field-ssrn"> <div class="field-content"><a href="http://test" title="test" target="_blank">
<div id="ssrn"></div>
</a></div> </div>
<div class="views-field views-field-field-linked-in"> <div class="field-content"><div class="bio-social">
<div></div> </div>
<div class="views-field views-field-field-twitter"> <div class="field-content"><div class="bio-social">
<div></div> </div>
CSS:
#website {float: left; width: 24px; margin: 5px 10px 5px 0; width: 48px; height: 48px;}
#website a::before {color: #00479A; font-size: 48px; margin-top: -14px;}
#website a:hover:before {color: #444444;}
#ssrn {height: 48px; width: 48px; float: left;
margin: 5px 10px 5px 0px; /* FIX CROSS BROWSER MARGIN ISSUE!!!!!! */
background-image:url('/sites/all/themes/seeblue_law_subtheme/icons/ssrn1.png'); background-size: 48px;}
#ssrn:hover {background-image:url('/sites/all/themes/seeblue_law_subtheme/icons/ssrn2.png');}
.bio-social {float: left; margin: 5px 10px 5px 0; height: 48px; width: 48px;}
.bio-social a::before {color: #00479A; font-size: 48px; margin-top: -13px;}
.bio-social a:hover:before {color: #444444;}
The following properties will not work in every scenario, but are included with Webkit.
-webkit-margin-before:
-webkit-margin-end:
-webkit-margin-after:
-webkit-margin-start:
-webkit-padding-before:
-webkit-padding-end:
-webkit-padding-after:
-webkit-padding-start:
You can look on this page for more information.
Also, are you resetting your CSS before you begin testing?
You could use http://browserclass.org/ which is a standalone JavaScript library. It will add extra classes to your body tag with the current name and version of the browser and with the used OS too, so you will be able to write specific css to handle the problem. This lib also has a Drupal module.
For example you can declare this in your css:
.ff.ff28.mac .bio-social { ... }
I have images that have statistics texts printed over them. This worked well with FF, Chrome and IE9 but not on IE8. I cant just seem to figure out what is the problem here.
HTML:
<div>
<div class="image">
<img src="#Url.Content("~/stuff/stuffImage.png")" alt="" />
<GIR1><span>#ViewBag.stuffArray[4]%</span></GIR1>
</div>
</div>
CSS:
.image {
position: relative;
width: 100%; /* for IE 6 */
}
GIR1 {
position: absolute;
top: 110px;
left: 50px;
width: 100%;
}
GIR1 span{
color: white;
font: bold 15px/15px Helvetica, Sans-Serif;
letter-spacing: -1px;
padding: 10px;
}
Instead of positioning the text inside the picture. It positions them outside it like normal text. What could cause the problem here?
I'm reasonably sure it's down to your usage of the custom element <GIR1>.
IE below version 9 does not natively recognize unknown elements.
You can either switch to <div class="GIR1"> (which would be the easy choice here), or:
You have to use a JavaScript fix: http://code.google.com/p/html5shiv/
Note that you'll have to add the custom element to the script yourself.
For the uncompressed version, see: http://www.iecss.com/print-protector/
var elems = 'abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video'
You need to add your custom elements to that list.
I am trying to get rid of the thin border that appears for every image in Chrome & IE9.
I have this CSS:
outline: none;
border: none;
Using jQuery, I also added a border=0 attribute on every image tag. But the border as shown in the image still appears. Any solution?
body {
font: 10px "segoe ui",Verdana,Arial,sans-serif, "Trebuchet MS", "Lucida Grande", Lucida, sans-serif;
}
img, a img {
outline: none;
border: none;
}
.icon {
width: 16px;
height: 16px;
text-indent: -99999px;
overflow: hidden;
background-repeat: no-repeat;
background-position: -48px -144px;
background-image: url(theme/images/ui-icons_0078ae_256x240.png);
margin-right: 2px;
display: inline-block;
position: relative;
top: 3px;
}
<h1>Dashboard <img class="icon" border="0"></h1>
See attached screenshot:
It's a Chrome bug, ignoring the "border:none;" style.
Let's say you have an image "download-button-102x86.png" which is 102x86 pixels in size. In most browsers, you would reserve that size for its width and height, but Chrome just paints a border there, no matter what you do.
So you trick Chrome into thinking that there is nothing there - size of 0px by 0px, but with exactly the right amount of "padding" to allow for the button. Here is a CSS id block that I am using to accomplish this...
#dlbutn {
display:block;
width:0px;
height:0px;
outline:none;
padding:43px 51px 43px 51px;
margin:0 auto 5px auto;
background-image:url(/images/download-button-102x86.png);
background-repeat:no-repeat;
}
Voila! Works everywhere and gets rid of the outline/border in Chrome.
Instead of border: none; or border: 0; in your CSS, you should have:
border-style: none;
You could also put this in the image tag like so:
<img src="blah" style="border-style: none;">
Either will work unless the image has no src. The above is for those nasty link borders that show up in some browsers where borders refuse to play nice. The thin border that appears when there is no src is because chrome is showing that in fact no image exists in the space that you defined. If you are having this issue try one of the following:
Use a <div> instead of an <img> element (effectively creating an element with a background image is all you are doing anyway, the <img> tag really isn't being used)
If you want/need an <img> tag use Randy King's solution below
Define an image src
For anyone who wants to get rid of the border when the src is empty or there is no src just use this style:
IMG[src=''], IMG:not([src]) {opacity:0;}
It will hide the IMG tag completely until you add a src
Add attribute border="0" in the img tag
If u didn't define a src or the src attribute is empty in a img tag most browsers will create a border. To fix this use transparent image as src:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEgAACxIB0t1+/AAAAApJREFUeJxjYAAAAAIAAUivpHEAAAAASUVORK5CYII=" border="0">
If you are trying to fix the Chrome Bug on loading images, but you ALSO want your placeholder image to load use (with Lazy Loading images, for example) use can do this trick:
.container { overflow: hidden; height: 200px; width: 200px }
.container img { width: 100%; height: 100% }
.container img[src=''],
.container img:not([src]) {
width: 102%;
height: 102%;
margin: -1%;
}
This will make the border be hidden in the container's overflow and you won't see it.
Turn this:
Into this:
I liked Randy King's solution in that chrome ignores the "border:none" styling, but its a bit complex to understand and it doesn't work in ie6 and older browsers. Taking his example, you can do this:
css:
ins.noborder
{
display:block;
width:102px;
height:86px;
background-image:url(/images/download-button-102x86.png);
background-repeat:no-repeat;
}
html
<ins class="noborder"></ins>
Make sure when you use the ins tag to close it off with a "" or else the formatting will look funky.
In your img src tag, add a border="0", for example, <img src="img.jpg" border="0"> as per explained by #Amareswar above
using border="0" is an affective way, but you will need to add this attribute for each image.
i used the following jQuery to add this attribute for each image as i hate this outlines and borders around images.
$(document).ready(function () {
$('img').each(function () {
$(this).attr("border", "0");
});
});
inline css
<img src="logo.png" style="border-style: none"/>
You can remove the border by setting text-indent to a very big number, but the alt of the image also be gone.
Try this
img:not([src]) {
text-indent: 99999px !important;
}
I had a similar problem when displaying a .png-image in a div-tag. A thin (1 px I think) black line was rendered on the side of the image. To fix it, I had to add the following CSS style: box-shadow: none;
same as what #aaron-coding and #randy-king had - but just a more generic one to hide image border before they are loaded (i.e. with lazy-load.js or something
(apparently I can't do a code block in my original comment)
.lazy-load-borderFix {
display: block;
width: 1px !important;
height: 1px !important;
outline: none;
padding: 0px;
margin: -4px;
background-image:none !important;
background-repeat:no-repeat;
}
I fix it using padding style:
#picture {
background: url("../images/image.png") no-repeat;
background-size: 100%;
}
.icon {
height: 30px;
width: 30px;
padding: 15px;
}
The border is disappearing, while you are increasing padding value. Find your own value.
it worked for me. It took days which made me crazy.
img.logo
{
display:block;
width:100%;
height:0px;
outline:none;
padding:43px 51px 43px 51px;
margin:0 auto 5px auto;
}
the solution is to set the outline style to none (i.e.) outline:none, it's work with Me
First create an image type PNG transparent with photoshop in mini size.
Then in your class please add:
content:url("url of your blank png");
That happens because you are using an img tag with no src attribute. The solution is puting the image into a div. Something like that:
<style>
div#uno{
display:block;
width: 351px;
height: 500px;
background: url(especificaciones1.png) no-repeat;
}
div#dos{
display:block;
width: 612px;
height: 500px;
background: url(especificaciones2.png) no-repeat;
}
</style>
<div class="especificaciones">
<div id="uno" class="imag1"></div>
<div id="dos" class="imag2"></div>
</div>