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
Related
I create an empty span with css border: 1px solid #333 but didn't see any working separator. I think there must be something inside the span? how to create a border with empty tag? a hr tag is too ugly.
You must give it a size, and display it as a block. Try this.
span.separator {
border-top: 1px solid #333;
width: 100%;
height: 1px;
display: block;
}
JSFiddle
hr tag is not ugly if you use border: 0; and than use border-top: 1px solid #000;, the 3d style of hr is just applied by browser, you can alter it the way I suggested.
hr {
border: 0;
border-top: 1px solid #000;
margin: 10px auto; /* For vertical spacing */
}
Demo
I would suggest you to use <hr /> as semantic goes, it will give a meaning to your page and will also save you few characters in the source.
Secondly about the span tag, it's an inline tag, to span it 100% you need to make it display: block;.
span.separator {
border-top: 1px solid #000;
display: block;
margin: 10px auto; /* For vertical spacing */
}
For more information on inline span you can refer my answer here.
A span is not a block element, in order to get what you want, you would have to give it a height and set it as display:block or inline-block.
If you want the border to be only on one side you can use border-right or border-left;
test <span style="display:inline-block;height:13px;border:1px solid black;"></span> test
Here is an example
http://jsfiddle.net/Cm5fK/
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.
What is the modern way of making a line half way across the screen? I saw this in a tutorial and it looks a bit old fashioned now.
Like:
<hr size="6" width="50%">
How would you do something similar if you were making a webpage now?
You can continue to use <hr />, but I would suggest omitting the inline attributes. It is just another element, and you can move your styling information to css:
hr {
width:50%;
}
You can use CSS to style the line
hr{
width:50%;
}
HTML:
<hr />
CSS:
hr { width: 50%; }
This should be controlled in CSS using something like:
hr {
width: 50%;
}
You can change borders etc too. Just make sure you reset the borders and backgrounds as different browsers use different methods to style it
Using a <div> and some styling:
#line {
width: 50%;
margin: 0 auto; /* Centered */
height: 4px; /* The border adds to height */
border: 1px solid #888888;
border-bottom: 1px solid #E9E9E9;
border-right: 1px solid #E9E9E9;
}
UPDATE: Fixed with margin-bottom: 0px;
But somehow it still affect the text box size. Larger.
Then if I use outline instead of border, the border-radius will not work.
I have a problem with the these elements when one of them is clicked/focused,
it's affect the other element's position. It's because the border is larger than the normal size. So how to fix it?
For example: Click on the text area, it'll make the text input move away.
Note: I don't want to use box-shadow. No need to use position property actually.
HTML
<h3>Text Area</h3>
<textarea></textarea>
<br />
<h3>Input: Text</h3>
<input type="text" />
CSS
input{
background: #fff;
border: 1px solid #B7B7B7;
font-size: 15px;
margin: 2px 0;
padding: 5px 5px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
input:focus, textarea:focus {
border: 3px solid #507ad5;
margin-bottom: 0px;
}
textarea {
width: 300px;
height: 100px;
}
UPDATE: See and test it directly: http://jsfiddle.net/hedaru/dSgxr/6/
Here it is how it supposed to be: goo.gl/jAojK
Your CSS specifies the focused elements to be larger than the non-focused versions of the same elements.
Adding a border physically grows an element. Either add the same number of pixels of border to your element's base (with white colour) or use outline.
Here's my fix: http://jsfiddle.net/g105b/dSgxr/2/
It happens because of this:
input:focus, textarea:focus {
border: 2px solid #507ad5;
}
If you add another pixel to the border, the element is going to move.
You should keep the border at 1px and change its color.
input:focus, textarea:focus {
border: 1px solid #507ad5;
}
Update:
Use margins instead of position, it will fix it in the same place and the borders will "grow" around it. Here's an example.
CSS:
input:focus, textarea:focus {
border: 2px solid #507ad5;
margin-top: 0px;
margin-left: -1px;
}
Another option (besides merely changing the border colour) is to add a margin that shrinks by the same amount that the border grows. Note that the margin must be large enough to overcome the margin collapse with adjacent elements.
Perhaps you can change the difference in margin. It seems like the margin-bottom of the elements right now is 2px, so when you change it to 0px on focus, you compensate for the growth of the element. Like so:
input:focus, textarea:focus {
border: 2px solid #507ad5;
margin-bottom: 0px;
}
Or just add "margin: 0px" on the focused one. Just make sure margin+border makes the same number on focused and unfocused.
I'm trying to use divs instead of tables to style boxes around my content. The content can be any size and needs to allow the browser to be resized to any degree. Need the background color and border to contain the content. This works fine with tables. How do I get a div to work the same way?
Note: I added "_"s because my non-breaking spaces were getting lost.
Sample Page
Sample image
(source: c3o.com)
Content:
<style type="text/css">
div.box, table.box
{
padding: 10px 1000px 10px 10px;
}
div.box-header, td.box-header
{
border: solid 1px #BBBBBB ;
font-size: larger;
padding: 4px;
background-color: #DDDDDD;
}
div.box-body, td.box-body
{
padding: 6px;
border: solid 1px #BBBBBB ;
border-top: none;
}
</style>
<div class="box">
<div class="box-header">please_help_make_these_divs_stop_overlapping</div>
<div class="box-body">please_help_make_these_divs_stop_overlapping</div>
</div>
<table class="box" width="100%" cellpadding="0" cellspacing="0">
<tr><td class="box-header">tables_make_good_containers_tables_make_good</td></tr>
<tr><td class="box-body">tables_make_good_containers_tables_make_good</td></tr>
</table>
There is no easy way to do this that is crossbrowser friendly that I know of.
At least in firefox you can create an simulated table by setting divs with
display:table;
display:table-row;
display:table-cell;
So that those divs work like table elements. Then the box will contain it's content. Wether that's a good solution or not is debateable.
I've been having similar issues with page layouts myself. Usually I've solved those by setting min-width and overflow:auto;
If you really don't want to use a table you can do this:
div.box div {
overflow: hidden;
zoom: 1; /* trigger haslayout for ie */
}
Next time this kind of problem comes up go to giveupandusetables.com.
One way is to make your boxes floats. Add float:left; to box, box-header, and box-body. Add clear:both; to box-body to force it below box-header. You'll probably need to add clear property to whatever content follows as well.
You will not get right edges of box-header and box-body to align, though. If you want their widths to be the same, you really want a table. Table is a tool to make all cells in the same column to share the widths.
For other ideas, check out this SO question.
Firstly, you should be using semantic markup. If something is a header and content mark it up as such with header and paragraph tags. That will help you move out of the 'table-way' of thinking were you try to emulate your markup and styles like a table, markup should come first, CSS can come after.
The following should do what you want:
<style type="text/css">
* {
margin:0px;
padding:0px;
}
.box {
border: solid 1px #BBBBBB;
margin:10px;
}
.box h3 {
padding: 4px;
border-bottom: solid 1px #BBBBBB;
background-color: #DDDDDD;
}
.box p {
padding: 6px;
}
</style>
<div class='box'>
<h3>please help make these divs stop overlapping</h3>
<p>please help make these divs stop overlapping</p>
</div>
Thinking about markup and style separately is the path to CSS Zen Mastery :o)
This works (actually holds together better than tables in ie7 too)
div.box{
float:left;
width:auto;
margin: 10px 1000px 10px 10px;
}
div.box-header{
float:left;
width:100%;
border: solid 1px #BBBBBB ;
font-size: larger;
padding: 4px;
background-color: #DDDDDD;
}
div.box-body{
clear:left;
float:left;
width:100%;
padding: 4px;
border: solid 1px #BBBBBB ;
border-top: none;
}
NOTE: both boxes have to have same left and right padding or one juts out a bit.
Floats are not needed, but you seem to be confusing the uses of margin vs. padding. The following minor tweaks to your style works as you need it to:
<style type="text/css">
div.box, table.box
{
margin: 10px 1000px 10px 10px;
border: solid 1px #BBBBBB ;
padding: 0px;
}
div.box-header, td.box-header
{
font-size: larger;
padding: 4px;
background-color: #DDDDDD;
border-bottom: solid 1px #BBBBBB ;
}
.box-body, td.box-body
{
padding: 6px;
}
</style>
I've changed the padding on the box to a margin, moved the border to your box, and added an underline to the header.
I had this problem also using Firefox 6.0.1, Opera 10.62, Safari 5.1, but not in IE 9, and the overflow:auto fixed it in all browsers. Nothing else did. I also tried overflow:contain, which also fixed the problem, but it appears that contain is not a valid value for overflow, so I am assuming that, since the value was not valid, auto was substituted.