Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Force Background To Draw On Till End Of Line

Post a Comment
I've got a custom tag ab which is defined like so http://jsfiddle.net/JcLx4/2/ I want to make the black line behind the text draw till end of the line. How would I achieve this?

Solution 1:

Add ab { display: block; } to the CSS. Demo: http://jsfiddle.net/JcLx4/6/

Unknown elements are inline (display: inline) by default.

If you want the styling to work in Internet Explorer 8 and older versions, you’ll need to use some JavaScript. Karl Nicoll’s answer describes a solution that will work for screen media, but it still won’t enable the styles for print media. If that’s what you want, you can use this modified version of the IE Print Protector:

/*! iepp v1.6.2 MIT @jon_neal */
(function(k,o){var a='ab',f=a.split('|'),d=f.length,b=new RegExp('(^|\\s)('+a+')','gi'),h=new RegExp('<(/*)('+a+')','gi'),m=new RegExp('(^|[^\\n]*?\\s)('+a+')([^\\n]*)({[\\n\\w\\W]*?})','gi'),p=o.createDocumentFragment(),i=o.documentElement,n=i.firstChild,c=o.createElement('body'),g=o.createElement('style'),j;function e(r){var q=-1;while(++q<d){r.createElement(f[q])}}function l(u,s){var r=-1,q=u.length,v,t=[];while(++r<q){v=u[r];if((s=v.media||s)!='screen'){t.push(l(v.imports,s),v.cssText)}}return t.join('')}e(o);e(p);n.insertBefore(g,n.firstChild);g.media='print';k.attachEvent('onbeforeprint',function(){var r=-1,u=l(o.styleSheets,'all'),t=[],w;j=j||o.body;while((w=m.exec(u))!=null){t.push((w[1]+w[2]+w[3]).replace(b,'$1.iepp-$2')+w[4])}g.styleSheet.cssText=t.join('\n');while(++r<d){var s=o.getElementsByTagName(f[r]),v=s.length,q=-1;while(++q<v){if(s[q].className.indexOf('iepp-')<0){s[q].className+=' iepp-'+f[r]}}}p.appendChild(j);i.appendChild(c);c.className=j.className;c.innerHTML=j.innerHTML.replace(h,'<$1font')});k.attachEvent('onafterprint',function(){c.innerHTML='';i.removeChild(c);i.appendChild(j);g.styleSheet.cssText=''})})(this,document)

See where it says var a='ab'? You can add other elements there, using | as a separator, e.g. var a='ab|foo|bar' will enable <ab>, <foo> and <bar> styling.


Solution 2:

You mean like this? : http://jsfiddle.net/JcLx4/7/

I added display:block to make it a block element. 

ab.s{
    background: #000000;
    color: white;
    display:block;
}

Solution 3:

Add display: block:

ab.s {
    background: #000000;
    color: white;
    display: block
}

http://jsfiddle.net/JcLx4/9/

If you're making your own element (ab), you should add it your "html5shiv"-like JavaScript file to allow it to work properly in older versions of Internet Explorer.

For example: http://html5shiv.googlecode.com/svn/trunk/html5.js

var z="ab|abbr|article|aside|..

Solution 4:

You need to add display:block to your CSS.

Undefined elements, or elements that the browser isn't aware of, will always default to being inline (i.e. acting the same as <span></span> tags), so you have to manually make them block elements.

Do bear in mind that if you intend to use this element, you'll need to use a JavaScript hack like the following to get it to work in older versions of internet explorer (pre-9.0):

<script type="text/javascript">
    document.createElement("ab");
</script>

When placed in the <head></head> of your HTML, it will force IE to recognise it as an element. Without it, Internet Explorer will ignore your tag.


Post a Comment for "Force Background To Draw On Till End Of Line"