I've found some very strange behaviour with Chrome with respect to the following CSS...
CSS:
table.addressBody {
width: 100%;
min-width: 100%;
}
table.addressBody tr td {
padding: 4px;
width: 40%;
min-width: 40%;
max-width: 40%;
border: none;
vertical-align: middle;
}
table.addressBody tr td.left, table.addressBody tr td.right {
background-color: White;
border: 2px solid #aaa;
}
table.addressBody tr td.centre {
width: 20%;
min-width: 20%;
max-width: 20%;
text-align: center;
}
HTML:
<div class="fitWidth centre">
<strong>Mr Smith</strong><br />
29/05/2014 11:17:00 - Department, Site
</div>
<table class="addressBody">
<tr>
<td class="left">
<select name="ctl00$phBody$repPatients$ctl01$ddlPickup" id="ctl00_phBody_repPatients_ctl01_ddlPickup"></select>
</td>
<td class="centre" style="border: none;"> </td>
<td class="right">
<select name="ctl00$phBody$repPatients$ctl01$ddlDest" id="ctl00_phBody_repPatients_ctl01_ddlDest"></select>
</td>
</tr>
<tr>
<td class="leftShadow" colspan="2">
<img src="../img/other/bottomShadowLt.png" alt="Shadow" />
</td>
<td class="rightShadow">
<img src="../img/other/bottomShadowRt.png" alt="Shadow" />
</td>
</tr>
</table>
(Fiddle)
The problem is the centre cell of the table which has a bottom border, despite the fact that I haven't actually specified that there should be one. I've tried the same code in both IE and FF and both produce the desired result (two outer cells with borders and the inner without).
I have also tried coding the CSS in turn for each border on all of the cells, but as soon as I code the #left cell bottom-border the centre cell is also bordered on the bottom. Also, notice in relation to this question there is no border collapse in the code (unless it's part of Fiddle itself).
Can anyone spot anything obvious that I've missed or know of any bug with Chrome that has a workaround?
-- EDIT --
But you did specify that it have a bottom border:
table.addressBody tr td.centre {
width: 20%;
min-width: 20%;
max-width: 20%;
border-bottom: 2px solid #aaa; <---
text-align: center;
}
As it turns out, my post is, in fact, a duplicate of this question, and so, if you wish to close it, please feel free.
Related
I'm trying to sort out quite a challenging issue. I have a header of a website into which three random picture will be generated. The collection of picture is quite huge and so the aspect ratio vary from picture to picture.
The header of the web is in fact a responsive table with one row and three table cell:
.header table {
width: 94%;
border: 0;
background: transparent;
margin-left: 5%;
margin-right: 5%;
vertical-align: middle;
display: table;
}
Now what I'd like to do is to:
Keep the table responsive (i.e. if possible avoid defining width and height with pixels and use rather "%") => like this:
.header td {
display: table-cell;
width: 25%;
height: auto;
text-align: center;
vertical-align: middle;
}
...but at the same time, to fit three random picture into to the table cell without changing the size or aspect ratio of the table cell... It means that some pictures will be cropped.
I was experimenting with the css3 attribute contain:
.header td {...
background-repeat: no-repeat;
background-size: contain;
...}
<table class="header">
<tr>
<td class="header" style="background-image:url('img/random1.jpg')">
</td>
<td class="header" style="background-image:url('img/random2.jpg')">
</td>
<td class="header" style="background-image:url('img/random3.jpg')">
</td>
</tr>
</table>
But it this attribute doesn't seem to be friend with the td tag...
Anyways, I'm not actually insisting on the "table" solution. Does anyone have any kind of work around how to:
Make three pictures in a "row" responsible
Fit them into frames which don't change their proportion
?
Pure CSS solution is preferable but I guess it might not be possible.
First of all you need some kind of a width and hight relation, otherwhise you woun't get a responsive behavior.
So i did some dirty hack ^^
I insert a image into each td that gives me the relation, then i hide it with opacity 0 (won't work in ie8). Now if you want to insert some other contetn then work with positions and seperate containers.
HTML:
<table class="header">
<tr>
<td class="header" style="background-image:url('img/1.jpg')">
<img src="img/1.jpg" />
</td>
<td class="header" style="background-image:url('img/2.jpg')">
<img src="img/1.jpg" />
</td>
<td class="header" style="background-image:url('img/3.jpg')">
<img src="img/1.jpg" />
</td>
</tr>
</table>
then i altered your CSS:
table {
width: 94%;
border: 0;
background: transparent;
margin-left: 5%;
margin-right: 5%;
vertical-align: middle;
}
td {
width: 25%;
height: auto;
text-align: center;
vertical-align: middle;
background-repeat: no-repeat;
background-size: cover;
overflow-x: hidden;
display: inline-block;
}
td img {
opacity: 0;
width: 100%;
height: auto;
}
It's looking kind a wierd becaus im using a table layout and then i overwrite the tabel display behavior (display: inline-block), but im missing some backround informations so i decided to use exact yout html.
Here you can see the result JS Fiddle
I have an asp page where I am trying to align in center. The following is the specific line,
<td style="height: 50px; background-color: #ffffe0; text-align: center; ">
This code is working fine in IE, but in FF and chrome, the text is aligned in left. If I change the same code as
<td style="height: 50px; background-color: #ffffe0; text-align: -moz-center; ">
Then the alignment is working only in FF. IE and chrome fails :(. Can anyone tell me how to solve this issue ?
UPDATED:
The whole table structure looks like this,
<table style="width: 900px; height: 500px; background-color: gray;">
<tbody>
<tr>
<td style="height: 70px; vertical-align: middle; background-color: #fffff0; text-align: center !important; width: 160px;">
<div id="abc" style="height:40px;width:80px;text-align: center !important ;left: 0px; position: relative; top: 0px" onscroll="JavaScript:document.getElementById(somejavascrpt)'">
<input id="button" type="image" style="height:40px;width:60px;border-width:0px;z-index: 104; left: 4px; text-align: center !important position: absolute; top: 2px" src="../images/help.png" name="help">
</div>
</td>
use both text-align: center; and text-align: -moz-center;
<td style="height: 50px; background-color: #ffffe0;
text-align: -moz-center;text-align: center; ">
Edit 1
You can also try
<td style="height: 50px; background-color: #ffffe0;text-align: center!important;">
Edit 2
You can use fire bug and see what rule is applied on your td
Some link how to use firebug
http://www.studiopress.com/tips/using-firebug.htm
http://net.tutsplus.com/tutorials/other/10-reasons-why-you-should-be-using-firebug/
If it doesn't work for you, you have some other rule somewhere else that is overriding your style. Text-align is perfectly all-browser-friendly.
I'd suggest two things:
stop using inline styles. Styling doesn't have a place in your html, it should be defined in a separate file.
use webdeveloper tools in your browser to find out which rules apply to your TD and make sure you've defined only one rule
There may be different ways to do this. One of the ways is to use left margin. Unless your position is relative, you may use this. For example-
style="margin:0 0 0 100px"
Try using html attribute.
<td align="center" style="height: 50px; background-color: #ffffe0;">
<table>
<tr><td>test</td></tr>
<tr>
<td>
<div style= height:200px;">
<div style="border:1px solid yellow; display: inline-block; width:100px">
<img src="orderedList4.png">
</div>
<div align="center" style="border:1px solid green; display: inline-block; width:650px;height:100px;">
<div>center Test Header1</div>
<div>center Test Header2</div>
</div>
<div align="right" style="border:1px solid red;display: inline-block; width:100px">REL 1.0</div>
</div>
</td>
</tr>
</table>
In the above code, the image size is 75*75 pixels.
I want to have all the three cells to have a height of 100 pixels.
I want the image to be centered and left aligned.
The middle text to centered.
Third text to centered and right aligned.
I could not make it working.
Inline styles are a nightmare to maintain, and you should generally be trying to keep presentation separate from the content. I've moved all the styles out of the actual tags, and since you're using a table and refer to each div as a cell, I'm guessing you meant to have each one an actual cell.
<style>
.product_table {
width: 850px;
}
.product_table td {
height: 100px;
border: solid 1px #000;
vertical-align: middle;
}
.product_table .image {
width: 100px;
border-color: yellow;
text-align: left;
}
.product_table .title {
/* Automatically sizes its width */
border-color: green;
text-align: center;
}
.product_table .release {
width: 100px;
border-color: red;
text-align: right;
}
</style>
<table class="product_table">
<tr>
<th colspan="3">test</th>
</tr>
<tr>
<td class="image">
<img src="orderedList4.png" />
</td>
<td class="title">
<div>center Test Header1</div>
<div>center Test Header2</div>
</td>
<td class="release">
REL 1.0
</td>
</tr>
</table>
The top row is probably a table heading though, so you should consider moving that out of the table as a h2 or whatever level it'll be used in. And make sure a table is the most appropriate element here – unless you're going to have multiple rows of whatever this item is, you might be better off just using divs without tables.
Hi I have the following HTML:
<div id="CONTENT">
<div id="SIDEBAR"></div>
<div id="MAIN">
<table>
<tr>
<td>
<div><label><span><a><span>My Label</span></a></span></label><span class="colon">:</span></div></td>
<td>hsadnsdjfjkasdfhkjadshfjkahsdkfjhasdjkfhjkasdhfjkaf</td>
</tr>
<tr>
<td>
<div><label><span><a><span>My Label with a really long title</span></a></span><span class="colon">:</span></div></label>
</td>
<td>hsadnsdjfjkasdfhkjadshfjkahsdkfjhasdjkfhjkasdhfjkaf</td>
</tr>
<tr>
<td>
<div><label><span><a><span>My Label</span></a></span><span class="colon">:</span></div></label>
</td>
<td><input value="hsadnsdjfjkasdfhkjadshfjkahsdkfjhasdjkfhjkasdhfjkaf" /></td>
</tr>
</table>
</div>
</div>
and my CSS:
#CONTENT{
font-size: 87%;
padding: 5px;
}
#SIDEBAR{
width: 24em; float: left; margin-right: 0.5%;height: 200px;
border: 1px solid green;
}
#MAIN {
/*margin-left: 25em;*/
border: 1px solid purple;float:right;
}
table div{
position:relative;
}
.colon {
position: absolute;
right:0;
}
label {
margin-right: .4em;
}
In IE7 if you resize the window and make it thinner the table seems to move down the page. I would like to simply show a scrollbar like IE9 and FF.
Live Example : http://jsfiddle.net/aJsg2/19/
You'll need to set a min-width on the CONTENT in the stylesheet to be whatever the minimum width of the sidebar + main content is.
I am all in favor of CSS based layouts, but this one I just can't figure out. With a table it is oh-so-easy:
<html>
<head><title>Three Column</title></head>
<body>
<p>Test</p>
<table style="width: 100%; border: 1px solid black; min-height: 300px;">
<tr>
<td style="border: 1px solid green;" colspan="3">Header</td>
</tr>
<tr>
<td style="border: 1px solid green; width: 150px;" rowspan="2">Left</td>
<td style="border: 1px solid yellow;">Content</td>
<td style="border: 1px solid blue; width: 200px;" rowspan="2">Right</td>
</tr>
<tr>
<td style="border: 1px solid fuchsia;">Additional stuff</td>
</tr>
<tr><td style="border: 1px solid green;" colspan="3">Footer</td></tr>
</body>
<html>
Left is fixed width
Right is fixed width
Content is liquid
Additional stuff sits beneath content
Now here is the important part: "Left" may not exist. Again this is easy with the table. Delete the column and "Content" expands. Beautiful.
I have looked through many examples (and "holy grails") of liquid and table less three-column CSS based layouts, but I have not found one which is not using some kind of margin-left for the middle column ("Content"). Any margin-left will suck once "Left" is gone as "Content" will just stay at it's place.
I'm just about to switch to old school table based layout for this problem, so I'm hoping someone has some idea - I don't care about excess markup, wrappers and the like, I would just like to know how to solve this with plain CSS. Btw: look at how easy equal height columns are...
Cheers
PS: No CSS3 please
body {
width: 600px;
}
.left {
float: left;
width: 200px;
}
.center {
float: right;
width: 100%;
}
.right {
float: right;
width: 200px;
}
this should let the .center expand to the full width when left is removed