Many CSS resets eliminate the <fieldset> tag's border, padding, and margin. I suppose this is to ensure they render uniformly across all browsers. However, fieldsets no longer visually separate groups of HTML (form) elements after the reset.
Two questions:
Do browsers actually render <fieldset> sans reset differently?
What is the best method of getting the 'bordered' look back after a CSS reset? Simply restyling it like this:
fieldset {
border: 1px solid silver;
margin: 2px;
padding: 7px;
}
Some images of what I am describing:
Without reset:
With reset:
The easy answer is: don't use a reset! They are unnecessary provided you have a clue what you're doing.
For instance, if you use a reset then you lose any native UI styles, such as, in this case, fieldsets. In IE, for instance, an unstyled fieldset will have a border with slightly-rounded corners, just like fieldsets in native programs. A reset removes that, and non-native UI sucks.
However, if you insist, just make sure that the styles are defined in the right order. The reset should be the absolute first thing, followed by "un-resets". See, it's redundant!
I had similar problem - what i did it i copied the style from Normalize.css stick this after the css reset
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
Related
I have some issue which only encounters my iPad Pro 12.9, but not on phones or desktops.
🐞 on : Safari + Chrome + Firefox
input[type=text], input[type=email], input[type=time] {
color: white;
background-color: black;
font-size: 1em;
width: 100%;
border: solid 1px white;
border-radius: 5px;
margin: 10px;
padding: 10px;
}
How do I make my inputs padding look nice on all browsers all devices?
Firstly you need to make sure your inputs aren't being over-ridden from another declaration which often causes the problem you have here, particularly in relation to the line-height and font-size properties. Set your line-height value to line-height: normal on your input elements. Using the input[] selector has a low specificity in the CSS cascade, hence why it could be being over-ridden.
If the above values aren't being over-ridden from a different part of your stylesheet you can use box-sizing:border-box, line-height: normal on your input elements. You'll most likely need to increase the padding value slightly to get the aesthetic look you require.
How about to use all: unset;
To be honest I found out about it just yesterday and not used it yet, but it seems to be widely supported.
Here is a small demo. Though, I used sass.
Screenshot from iPad Pro:
Screenshot from Chrome (on Linux):
You don't really need padding top and bottom within an input, so you can remove it, just use padding: 0 10px
If some browser do not vertically centres the text, you can equal the line-height with the height and that should be fine.
also apply a box-sizing: border-box; rule will probably avoid differences between browsers on how do they render paddings.
I'm creating my site based on bootstrap But wanna do some customization.
Any idea to overwrite the bootstrap default style with this one
I know to replace the box style to underline only can use this
border: 0;
outline: 0;
But not knowing how to bend the line
I looked up the relevant Bootstrap 3.3.7 (most recent non-alpha) code for you, which would be the .form-control class.
If you override that class with the following CSS you will likely achieve the effect you are looking for.
.form-control {
border: 0; /* to hide border initially */
border-bottom: 1px solid #ccc; /* to set the bottom border (the only one we need) */
border-radius: 8px; /* to round borders or 'bend the line' */
}
Thus, border-radius is the CSS property you are looking for.
I have two Joomla module positions. They are stacked in the same module position. I need for these two modules to appear on the web page as a single displayed module with a single border surround all of it.
How can this best be accomplished without modifying PHP code for either of these modules? I'm thinking this might be done with CSS, but I'm not an expert with CSS. Maybe a Module Class Suffix added for both of these modules could make them appear appear seamlessly joined? If so, how do I do this?
OKay, without being able to see the HTML, I'll pretend the two components get outputted as <div>s with the class themodule, and that some padding, borders and margins have been applied something like this:
.themodule {
padding: 1em;
border: 0.1em solid black;
border-right: 0;
margin: 2em;
}
If you add this:
.themodule + .themodule {
padding-left: 0;
border-left: 0;
border-right: 0.1em solid black;
margin-left: 0;
}
That means any .themodule directy after another one will get the left padding, border and margin chopped so it butts right up against the previous one and visually is part of the same box.
Hopefully you can apply to your case, but let me know if you have questions.
I am using vanilla GWT DataGrid (com.google.gwt.user.cellview.client.DataGrid) to construct a table. To play with the CSS styles I am using a similar approach described How to override CellTable css.
I need to apply a border to the entire table. I can apply borders to individual cells using .dataGridCell.
/**
* Applied to every cell.
*/
.dataGridCell {
padding: standard-cell-padding;
border-bottom: 1px solid #6f7277;
border-left: 1px solid #6f7277;
border-right: 1px solid #6f7277;
border-top: 1px solid #6f7277;
overflow: hidden;
}
But then in the intersections the border becomes bold and page doesn't look nice.
There is another class defined in the css as below.
/**
* Applied to the table.
*/
.dataGridWidget {
}
It seems even I changed values for this class, it doesn't has any effect. Does any one know how to get this done?
Your CSS class names are being obfuscated. You should use Client Bundles (specifically, CssResource) in order to ensure that the right class names are used.
Also, take a look at this.
The intersections show up as bold because of some styles that the browser is inserting.
In Chrome they show up in inspector as user agent stylesheet
In particular what makes the borders appear thick in the intersections is this border-collapse: separate;
See this stackoverflow link that explains how to get rid of these default browser css settings.
and also this
A fellow developer has set the following css rule, which must remain in place.
* {
border: medium none;
list-style: none outside none;
margin: 0;
outline: medium none;
padding: 0;
}
This removes the border from SELECT and INPUT fields and makes them look less than ideal. If I remove the border style in firebug then the fields look normal again. Which css rules must I add to revert back to the default styles set by the browser?
Edit: these are the styles I'm trying to revert to (on my computer):
(source: 456bereastreet.com)
I think what your fellow developer was attempting to do was create his own reset (similar to Yahoo Reset, etc). But since he's declaring * instead of specific elements, it removes the border from everything.
You can work around this though and still get the browser's default border back on form elements by changing the * to your most common elements (sans form elements) - it's a bit ugly, but it does what you're looking for:
a,abbr,acronym,address,b,blockquote,body,br,caption,dd,div,dl,dt,em,fieldset,form,h1,h2,h3,h4,h5,h6,hr,html,i,img,label,legend,li,link,menu,ol,p,pre,small,span,strong,table,td,th,tr,u,ul
{
border: medium none;
list-style: none outside none;
margin: 0;
outline: medium none;
padding: 0;
}
Add these:
select, input {
border: solid 1px; /* or whatever you want */
}
Unfortunately, you need to set the new values. There is no reset value.
If you want to add a border, set the new border style. Or remove the style you posted.