nbsp not working in CSS content tag [duplicate]
This could be the answer you are looking for : content: “|\00a0\00a0”;
css
Overflow-x:hidden doesn’t prevent content from overflowing in mobile browsers
Creating a site wrapper div inside the <body> and applying the overflow-x:hidden to the wrapper instead of the <body> or <html> fixed the issue. It appears that browsers that parse the <meta name=”viewport”> tag simply ignore overflow attributes on the html and body tags. Note: You may also need to add position: relative to the … Read more
Use CSS to automatically add ‘required field’ asterisk to form inputs
Is that what you had in mind? http://jsfiddle.net/erqrN/1/ <label class=”required”>Name:</label> <input type=”text”> <style> .required:after { content:” *”; color: red; } </style> .required:after { content:” *”; color: red; } <label class=”required”>Name:</label> <input type=”text”> See https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-elements
Why specify @charset “UTF-8”; in your CSS file?
This is useful in contexts where the encoding is not told per HTTP header or other meta data, e.g. the local file system. Imagine the following stylesheet: [rel=”external”]::after { content: ‘ ↗’; } If a reader saves the file to a hard drive and you omit the @charset rule, most browsers will read it in … Read more
In a bootstrap responsive page how to center a div
Update for Bootstrap 5 Simpler vertical grid alignement with flex-box @import url(‘https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css’); html, body { height: 100% } <div class=”h-100 d-flex align-items-center justify-content-center”> <div style=”background:red”> TEXT </div> </div> Solution for Bootstrap 4 Simpler vertical grid alignement with flex-box @import url(‘https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css’); html, body { height: 100% } <div class=”h-100 d-flex align-items-center justify-content-center”> <div style=”background:red”> TEXT </div> … Read more
Getting rid of all the rounded corners in Twitter Bootstrap
I set all element’s border-radius to “0” like this: * { border-radius: 0 !important; } As I’m sure I don’t want to overwrite this later I just use !important. If you are not compiling your less files just do: * { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; } In bootstrap 3 if … Read more
CSS styling in Django forms
Taken from my answer to: How to markup form fields with <div class=’field_type’> in Django class MyForm(forms.Form): myfield = forms.CharField(widget=forms.TextInput(attrs={‘class’: ‘myfieldclass’})) or class MyForm(forms.ModelForm): class Meta: model = MyModel def __init__(self, *args, **kwargs): super(MyForm, self).__init__(*args, **kwargs) self.fields[‘myfield’].widget.attrs.update({‘class’: ‘myfieldclass’}) or class MyForm(forms.ModelForm): class Meta: model = MyModel widgets = { ‘myfield’: forms.TextInput(attrs={‘class’: ‘myfieldclass’}), } — EDIT … Read more
Control the dashed border stroke length and distance between strokes
The native dashed border property value does not offer control over the dashes themselves… so bring on the border-image property! Brew your own border with border-image Compatibility: It offers great browser support (IE 11 and all modern browsers). A normal border can be set as a fallback for older browsers. Let’s create these These borders … Read more
How to select first and last TD in a row?
You could use the :first-child and :last-child pseudo-selectors: tr td:first-child, tr td:last-child { /* styles */ } This should work in all major browsers, but IE7 has some problems when elements are added dynamically (and it won’t work in IE6).
CSS: bolding some text without changing its container’s size
I had the same problem, but got a similar effect with a little compromise, I used text-shadow instead. li:hover {text-shadow:0px 0px 1px black;} Here’s a working example: body { font-family: segoe ui; } ul li { display: inline-block; border-left: 1px solid silver; padding: 5px } .textshadow :hover { text-shadow: 0px 0px 1px black; } .textshadow-alt … Read more