My problem is with the below html
<div class="editor-container">
<div class="editor-row curFocus">
<div class="editor-label">
<label for="FirstName">First Name</label>
</div>
<div class="editor-field">
<input class="text-box single-line valid" id="FirstName"
name="FirstName" type="text" value="Nancy" maxlength="20">
</div>
</div>
</div>
When the user selects the input field, I add class "curFocus" to the outer div via some javascript to highlight both label and the input field.
My css is -
.editor-container {
border: thin solid #444444;
display: table; width: 100%;
}
.editor-row {
width: 100%; display: table-row;
}
.editor-label {
padding-left: .4em; width: 40%;
}
.editor-label, .editor-field {
padding-right: .4em; padding-bottom: .2em; padding-top: .2em;
display: table-cell;
}
.curFocus {
border: 2px solid #05365b;
background-color: #d3e5f2;
margin: 3px; padding: 3px;
}
My problem is that while using debuggers in Chrome 12 and IE9, they both show the border settings being applied to the outer div. But, when viewing the form, neither browser display's the specified border. All other css settings work correctly. I also tried changing definition of ".curFocus" to ".curFocus div". But this applied the style to each of the nested div's also, but did display borders on all of the divs.
While I'm not a CSS expert, it is not obvious why this shouldn't work.
Edit
Here is jsfiddle link - http://jsfiddle.net/photo_tom/KmsF5/1/. While testing this it does work correctly in IE9 if in IE7 compatibly mode. Otherwise, it does not display correctly.
Sorry about not including link, still getting use to fact that jsfiddle even exists.
Well, I can tell you what's causing it, but I can't tell you why. Elements with display: table-row; can't have a border applied to them. You can apply the border to the table-cell children of the .curFocus element, but not the table-row itself.
Again, no idea why this silly rule exists, but you can fix your problem with some CSS:
.curFocus {
background-color: #d3e5f2;
margin: 3px; padding: 3px;
}
.curFocus>div {
border: 2px solid #05365b;
border-width: 2px 0px; /* top and bottom border for all the table-row's immediate children (table-cells) */
}
.curFocus>div:first-child {
border-width: 2px 0px 2px 2px; /* left border for the leftmost table-cell */
}
.curFocus>div:last-child {
border-width: 2px 2px 2px 0px; /* right border for the rightmost table-cell */
}
See http://jsfiddle.net/d772N/
I think your problem is your display type on the .editor-row. display: table-row; Remove that and the problem will go away. Plus I don't think that all browsers support display: table-row; very well.
You might need a higher CSS specificity, as it is ambiguous which CSS styles will apply with the current definitions.
Try div.curFocus rather than .curFocus div for the class definition to apply the style to the div with that class name rather than its div children.
Related
HTML
<form action="/login">
...
<label for="password">Password</label>
<input type="password" id="password" name="pw">
<br>
<button>Log in</button>
</form>
CSS
* {
margin: 0;
padding: 0;
}
label {
display: inline-block;
width: 60px;
height: 20px;
text-align: left;
font: 12px/20px Arial;
}
input {
box-sizing: border-box;
width: 200px;
height: 20px;
border: 1px solid #ddd;
margin-bottom: 20px;
}
What made me feel puzzled is the input's padding. Because I wrote these rules above
/*
to reset margins and paddings in the user agent stylesheet, which is expensive, but I did it just for testing.
*/
* {
margin: 0;
padding: 0;
}
/*
In my opinion, the following rules will result in a 198*18 content box with a 1px border surrounding it.
While it didn't.
*/
box-sizing: border-box;
width: 200px;
height: 20px;
border: 1px solid #ddd;
The result is the input has 1px paddings, top and bottom. The snapshots is at the footer of the question. The universal selector didn't reset the padding for input elements.
What's the reason? Looking forward to the reply.
Snapshots: [removed]
Hello, everyone. Sorry for the inconvenience. I finally found what's wrong with it. It has nothing to do with the code piece I cut off. Here is the pivotal snapshot. So what the hell is \u200b?
\u200b
To be honest, I should found the mistake earlier, because the universal selector rule didn't appear on the right panel. It's my fault.
You have a zero width space character in your selector.
This renders the selector invalid, so it doesn't match anything, but is really hard to see in an editor.
I have a contact form that I'm styling at the moment. I simply want the outline of the form to change to red when active and nothing to happen when hovered over.
I have this working in all browsers apart from Internet Explorer. I'm using Internet Explorer 11 on Windows 7.
In IE, at the moment there is a default hover which I can't figure out and when clicking in the input element, the outline-color doesn't change.
Another issue is that I have applied padding-left inside the input so that both the placeholder and user's text aren't touching the edge. For some reason, this has pushed the entire input to be wider than it should. It does have max-width: 100% applied to it. The div that contains the form has padding on the sides and now the input is pushing into the padding. This occurs in all browsers.
Here is basic example: http://jsfiddle.net/Forresty/fr7Lz2wj/1/
Here is the code:
HTML:
<div id="contactForm">
<input type="text" name="name" id="name" placeholder="Your Name" required maxlength="65" tabindex="1">
</div>
SCSS:
#contactForm{
box-sizing: border-box;
width: 100%;
max-width: 64em;
margin: 0 auto;
padding: 0 1.25em;
}
input {
width: 100%;
height: 3em;
padding-left: 1em;
&:focus {
outline-color: red;
}
&:hover {
outline-color: none;
}
}
Any help with this would be highly appreciated.
Thanks.
To avoid the input field to go over either you apply a percentage padding (ie. 1.5% ) and set input width at 100% minus 1.5% (98.5%) or you have to use css box-sizing:border-box on the input itself.
To have outline on focus you have to specify an outline-style.
input {
width: 100%;
height: 3em;
padding-left: 1em;
box-sizing: border-box;
&:focus {
outline-style: dotted;
outline-color: red;
}
}
http://jsfiddle.net/fr7Lz2wj/5/
I want to align the checkbox, label and text input in a same line using css. I can do it by using the default template of the browser.
However I really liked the simple theme given in this link. The theme has label and a input text. I wanted to add a checkbox as well at the beginning of the line. Somehow adding a checkbox inside the div makes the arrangement awry.
Though its better to look at the code in the link, I am providing a snapshot here:
HTML
<form>
<div>
<!--NEED TO ADD CHECKBOX HERE -->
<label for="pub_url">Public URL</label>
<input type="text" id="pub_url" name="pub_url" value="http://cssdeck.com">
</div>
</form>
CSS3
/* Onto the styling now. Some quick generic styles first. */
html, body {
width: 100%; height: 100%;
}
body {
font-size: 76%;
font-family: Verdana;
background: #eee;
padding: 50px 0;
}
form {
background: #fafafa;
padding: 20px;
width: 400px;
margin: 0 auto;
border: 1px solid #ffe2e3;
}
form div {
/* Float containment */
overflow: hidden;
}
/* Things are looking good now, onto the main input field
styling now! */
/*
Lets change the box model to make the label and input
contain into the 100% div.
You might want to specify the box sizing properties inside
`* {}` at the top.
Things are looking great now! Lets just spice it up a bit.
*/
form label, form input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
form label {
font-weight: bold;
background: linear-gradient(#f1f1f1, #e2e2e2);
padding: 5px 10px;
color: #444;
border: 1px solid #d4d4d4;
/* lets remove the right border */
border-right: 0;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
line-height: 1.5em;
width: 30%;
/* takes the width properly now and also the
spacing between the label and input field got removed. */
float: left;
text-align: center;
cursor: pointer;
}
/* The label is looking good now. Onto the input field! */
/*
Everything is broken now! But we can fix it. Lets see how.
*/
form input {
width: 70%;
padding: 5px;
border: 1px solid #d4d4d4;
border-bottom-right-radius: 5px;
border-top-right-radius: 4px;
line-height: 1.5em;
float: right;
/* some box shadow sauce :D */
box-shadow: inset 0px 2px 2px #ececec;
}
form input:focus {
/* No outline on focus */
outline: 0;
/* a darker border ? */
border: 1px solid #bbb;
}
/* Super! */
p.s: It will be delightful if someone can stylize the checkbox in the same way as the example
try this one,
form input[type="checkbox"] {
width:20px;
}
<div>
<input type="checkbox" >
<label for="pub_url">Public URL</label>
<input type="text" id="pub_url" name="pub_url" value="http://cssdeck.com">
</div>
http://jsfiddle.net/KW6AY/1/
Here you go \w quick styling:
http://codepen.io/daniesy/pen/puema
alter the css to input[type="text"] and lower the width to around 60% (so it won't affect your checkbox), add a checkbox with a float left
just rename class
form input into form input[type="text"]
Good luck.
I have an issue and I can't seem to either find the answer here or solve it myself. The textboxes seem to have by default approx. 10px over and below the actual textbox. I've tried setting the margin and the padding to 0 but nothing the space remains.
I want that textbox to be right over the element that is below it, using margin to move it causes it to push the div below it lower so it doesn't really help. Any idea how I can get rid of that whitespace?
Markup:
<div class="span-8 last">
<label for="VoicenoteSearch"></label>
<input name="data[Voicenote][search]" type="text" class="input-text long" style="margin-top:10px;margin-left:-10px" placeholder="Search" id="VoicenoteSearch">
</div>
Relevant CSS:
label {
display: block;
}
input.input-text {
border-color: #b9b9b9;
border-width: 2px;
position: relative;
z-index: 2;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
margin-bottom: 8px;
padding: 5px;
}
.input-text.long {
width: 320px;
}
JSFiddle: http://jsfiddle.net/pyQ5T/
Even if I remove all the CSS those spaces are there, it seems it's part of the textbox by default
Try adding these CSS properties:
padding:0px;
margin:0px;
float: left;
What is going on with rendering the padding of a fieldset. It behaves as expected in FF and Chrome but fails in IE. This is the code im talking about:
<html>
<head>
</head>
<body>
<fieldset>
<legend>Hello world!</legend>
<div>Lorem ipsum</div>
</fieldset>
</body>
</html>
And this is the css
fieldset {
border: 1px solid black;
padding: 30px;
}
fieldset legend {
background-color: silver;
}
fieldset div {
border: 1px dotted silver;
}
Can also be seen here:
http://jsfiddle.net/nRAGM/6/
So my question is: how to get the above html to display as intended in IE?
The following code is cross-browser compatible.
You can control the indent of the fieldset legend independently. In padding the fieldset you also indent the legend. While this may be the desired effect in some cases, the following method offers more flexibility. Also adding the margin to the inner div will give you better control of your layout (because adding padding to a container can add unwanted width).
http://jsfiddle.net/nRAGM/35/
fieldset {
border: 2px solid silver;
}
fieldset legend {
border: 2px solid silver;
margin-left: 30px;
}
fieldset div {
border: 1px dotted silver;
margin: 30px;
}
Adding display:block to fieldset styling should solve your problem. It worked for me! Try out.
or the really naughty hack (or put it in a conditional [lte IE 8] CSS) version.
fieldset {
border: 1px solid black;
padding: 30px;
}
fieldset legend {
background-color: silver;
margin-bottom: 30px\9; /* IE7/8 needs this - same value as top padding on fieldset */
}
fieldset div {
border: 1px dotted silver;
}
margining the bottom of the label the same as the fieldset's top padding does the trick too. obviously no other browser should get both
PS: I think this works for IE6 too