I have bunch of inline div's, followed by a block div. Inside block div, there should be table, something like that:
<div class="myInlineDiv"></div>
<div class="myInlineDiv"></div>
<div class="myBlockDiv">
<table>
...
</table>
</div>
Problem is: table is misaligned in FireFox. It works well in Chrome and IE.
Here is fiddle: http://jsfiddle.net/zk9eD/2/ Red block should be in yellow area.
(I can fix position problem with position: inline; but it causes another problem with table width).
Add float:left; in table class
.table1 {
background-color: red;
width: 100%;
border: 0px;
float:left;
}
Check working demo - http://jsfiddle.net/zk9eD/5/
Related
I have a table on my page that I am unable to apply rounded corners to for Firefox. I have tested on IE, Chrome, and Safari and it works fine on those browsers.
HTML
<table class="login-table">
<tr id="header">
<td id="logo">
</td>
</tr>
</table>
CSS
#logo {
height:85px;
width:170px;
border-top-right-radius:14px;
border-top-left-radius:14px;
}
I tried adding -moz-border-radius-topleft:14px and -moz-border-radius-topright:14px to #logo, but it did not change my output.
Here's an example which shows my issue.
It looks to me that the tr element is actually keeping it's square edges, causing the issue. If you make the tr itself transparent, and make sure the children don't inherit the transparent background-color, it seems to work:
// The first <tr>
#header {
background-color: transparent!important;
}
// The child of the first <tr>
#logo {
background-color:#1c918a;
}
Demo: http://jsfiddle.net/o9z695hf/
I managed to show the top rounderd by moving the CSS down to .container and adding a few changes (height: 100%, etc.)
Here is the result: http://jsfiddle.net/jzdy7yz4/16/
I still see what looks like a white 1px border outside. I suppose it is some kind of spacing.
I have an image and at the bottom I want to display some text. If the text is more than one line the text should expand to the top.
<style>
.image-wrapper td{
position: relative;
}
.image-wrapper td div {
bottom: 0;
font-size: 12px;
line-height: 12px;
maring: 0 12px;
position: absolute;
}
.image-wrapper td div.left {
text-align: left
}
.image-wrapper td div.right {
text-align: right;
}
.image-wrapper td div.light {
color: #FFF;
}
.image-wrapper td div.dark {
color: #ddd;
}
</style>
<table class="image-wrapper">
<tr>
<td>
<img src="img/path/to/img.png">
<div class="">Text at bottom</div>
</td>
</tr>
</table>
The Result looks like this:
Chrome, IE 11, Firefox >= 30: Correct Display Image
Firefox < 30: Wrong Display
What do I have to change to make it also looking correctly for Firedox < 30?
Is it possible with CSS or do I have to use JavaScript?
Greetings
Sören
You problem boils down to HTML/CSS not supporting positioning inside table cells.
Many modern browsers seem to have added support, but older browsers like IE (and perhaps Firefox < 30, not sure) just don't support it. You can try and wrap your div in another div, and give the wrapper a position of relative to set a positioning context, but again this only works sometimes. Here's an article on that hack: http://css-tricks.com/absolutely-position-element-within-a-table-cell/.
I'd suggest ditching your table and using div-based layout instead.
Suppose I have two columns, both represented by a <div> block. Both columns may grow larger than the other, so I want to force the smaller one to grow as big as the other.
Example of my problem: http://jsfiddle.net/TvnSJ/
As you can see, the second column is smaller.
I managed to solve this using tables, but I was unable to add margin between them. The margin is important, so I would like to know another solution.
You can use display: table and display: table-cell. Here is your fiddle updated: http://jsfiddle.net/TvnSJ/2/
This makes the divs render like tds. Basically you can get the layout of a table without using a table when it is semantically incorrect. I don't think you can float them however.
Edit: I just noticed the bit about margin. You can add padding to these, or you could wrap the content in another element and add margin to that if you need the separation to not include the background colour.
This can be achieved in CSS3 with the new box model:
.box {
width:100px;
display:box;
/* Firefox */
display:-moz-box;
-moz-box-orient:horizontal;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal;
/* W3C */
display:box;
box-orient:horizontal;
}
.box .column1 {
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
-ms-flex:1.0; /* Internet Explorer 10 */
box-flex:1.0;
background: yellow;
}
.box .column2 {
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
-ms-flex:1.0; /* Internet Explorer 10 */
box-flex:1.0;
background: green;
}
And the HTML
<div class="box">
<div class="column1">
a<br>b
</div>
<div class="column2">
a
</div>
</div>
I made this with the examples from here http://www.w3schools.com
Fiddle http://jsfiddle.net/w5ELr/
Here's another approach using 2 containers that I used recently
<div class="container2">
<div class="container1">
<div class="col1">
a<br />b<br />c
</div>
<div class="col2">
a
</div>
</div>
</div>
CSS:
.container2 {
clear:left;
float:left;
width:100px;
overflow:hidden;
background:blue; /* column 2 background colour */
color: white;
}
.container1 {
float:left;
width:100px;
position:relative;
right:50%;
background:green; /* column 1 background colour */
color: white;
}
.col1 {
float:left;
width:46%;
position:relative;
left:52%;
overflow:hidden;
}
.col2 {
float:left;
width:46%;
position:relative;
left:56%;
overflow:hidden;
}
Fiddle: http://jsfiddle.net/Lunf6/1/
Inspired from: http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm
if you want the same but using table:
<table style="width: 100%;">
<tbody>
<tr>
<td style="background: #006600;">a<br/>b</td>
<td style="width: 5px;"></td>
<td style="background: #BB0000;">a</td>
</tr>
</tbody>
</table>
you can style your table and its cells as you like with paddings, margins, etc:
.TABLE-DEFAULT{
border : 0px;
border-collapse : separate;
border-spacing : 0px;
width : 100%;
background : transparent;
}
.TABLE-DEFAULT td{
padding: 4px;
}
.TABLE-DEFAULT td:FIRST-CHILD{
padding: 0px;
}
.....etc
Despite question #2 solves the question fully and satisfactorily, it has a big drawback to consider: It doesn't works in IE7 and below.
If you need too support old browsers, there's another approach based on padding, margin and overflow properties. It's a little bit tricky, but it works:
Define a container div, which works as a "colum-row", like this:
<div class="column-row"></div>
.column-row {overflow: hidden}
Then put some columns in it. And style them setting padding and margin to force a fake overflow:
<div class="column-row">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
...
</div>
.column-row {overflow: hidden}
.column {float: left; padding-bottom: 99999; margin-bottom: -99999}
So, you'll get a bunch of columns which they looks equal sized, where their height value corresponds to the largest one.
I have edited the previows jsFiddle (now at http://jsfiddle.net/TvnSJ/16/) if you want to play with a working example.
To get two divs the same height automatically after adding content to one, you'll need to use javascript or jquery. Here is the below jQuery that can do this for you. Just change #column-1 to the ID of your first colum and #column-2 to the ID of your second column.
$(document).ready(function(){
x = $('#column-1').height();
y = $('#column-2').height();
if x > y {
$('#column-2').height(x);
else {
$('#column-1').height(y);
}
});
If I add a margin-bottom to the last element on a page (a div in my case), it's ignored in IE 9. In other words, the last element is flush with the bottom of the window.
Is this a known issue? It works as expected in Chrome/Firefox.
This is true if the divs are floated but the containing div is not.
<div class='outer'>
<div class='inner'>dfsdfs</div>
<div class='inner'>sdfsdf</div>
<div class='inner'>vxcvxv</div>
<div class='inner'>cvxcv</div>
</div>
div.outer {
background: green;
}
div.inner {
height: 50px;
background: red;
margin-bottom: 50px;
display:block;
float:left;
clear:left;
}
I have setup a simple test to see whether or not I could reproduce your issue. First, following your lead, I provided some HTML - being sure to make the last element a div:
<div></div><div></div>
<div></div><div></div>
Then some styles:
div {
height: 50px;
background: red;
margin-bottom: 50px;
}
I then proceeded to test IE9 on Windows 7 using browserstack - I was unable to reproduce your issue. In my case, the browser properly rendered the appropriate spacing around the last element.
Fiddle: http://jsfiddle.net/jonathansampson/EgjVn/
I know this question has been asked many times, but I never saw a satisfactory answer. I mean, an answer that actually works.
So, here we go again. Take this jsFiddle: http://jsfiddle.net/KFMyn/3/
If you remove the align="center" from the HTML, what CSS do you need to use to make the result look the same as the original?
The answers I found usually amount to margin:0 auto and/or text-align:center but neither of those have the desired effect of making the result look the same as the original.
The text align center covers most of the text elements but a little extra is needed to centre align the table
div {width:400px; text-align:center;}
table {margin: 0 auto;}
table td {text-align: left;}
http://jsfiddle.net/NYuv8/4/
div {width:400px; text-align: center;}
table {display:inline-block;}
Should work as well in addition to Paul's answer.
http://jsfiddle.net/KFMyn/13/
div {width:400px; margin: 0 auto; text-align: center; }
div > * { margin: 0 auto; }
Works for me. But this may not work properly when you have multiple nested dom elements
margin: 0 auto;
text-align: center;
Above Code might not be working when you are using bootstrap grids.
Here is the quick solution for this using bootstrap 4 and IT WORKS IN EVERY BROWSERS
<div class="row">
<div class="col-sm-2">
<div class="customClass mx-auto">
<p class="text-center"> your text goes here </p>
</div>
</div>
</div
you can put any column like col-sm-2, 3, 4.......12
Replacement for Center tag in different situations
1. text-center
Works with p, a, button, h tags and more i.e all the tags containing data or text directly
2. Flex
It can used to align complete element inside another element, however it has more utilities check documentation for reference
Use can center elements using flex in following manners
display:flex;
justify-content:center;
align-items:center;
Another import property is flex-direction i.e
flex-direction:column
flex-direction:row
Use flex direction according to the type of alignment you want
3. mx-auto (bootstrap class)
You can try and style the table as well, like this:
div {
width:400px;
margin: 0 auto;
text-align: center;
}
div table {
margin: 0 auto;
}
Why not just leave it
<div align="center">
It still works just fine with all browsers as far as I know. I have plenty of old html and I got to this thread only because my NetBeans IDE is warning me this is obsolete. My guess is the browsers are automatically translating to the correct solution. Same thing with
<font size="6">bla bla</font>
still works just fine and probably automatically converted to
<span style="font-size:36px">bla bla</span>
div { width: 400px; text-align: center; }
table { display: inline-block; }
This should work. Check example here: http://jsfiddle.net/ye7ngd3q/2/
and if you want elements inside table cell left/right aligned then you can define individual classes and assign to element respectively as show below:
HTML
<div align="center">
A centered div
<p>A</p>
<table border="1">
<tr><td class="align-left">centered</td><tr>
<tr><td class="align-right">div</td><tr>
</table>
<ul><li>A centered div</li></ul>
</div>
CSS
div { width: 400px; text-align: center; }
table { display: inline-block; }
.align-left { text-align: left; }
.align-right { text-align: right; }