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;">
Related
Howto center text vertically and horizontally on a single page in mpdf
(I know the answer, stackoverflow just makes me write a longer question to be allowed to post it with my answer here ...)
While mpdf supports some css, a couple of things that would allow you to center via CSS are not working:
display: flex is not working
<table> with height: 100% is not working
<div style="position: absolute; top: 50%; left: 50%;"></div> is not working
But, I did find one trick: $mpdf->hPt and $mpdf->wPt return the pages dimensions in points.
Which means you can use a table cell with height: {$mpdf->hPt}pt; vertical-align: middle; text-align: center;:
$mpdf = new \Mpdf\Mpdf($options);
$h = $mpdf->hPt;
$w = $mpdf->wPt;
$html = <<<HTML
<html>
<body style="margin: 0; padding: 0;">
<table style="width: {$w}pt; margin: 0; padding: 0;" cellpadding="0" cellspacing="0">
<tr>
<td style="height: {$h}pt; text-align: center; vertical-align: middle; padding: 0px 5px; margin: 0;">
Hello World
</td>
</tr>
</table>
</body>
</html>
HTML;
$mpdf->WriteHTML($html);
Obviously, using the dpi to calculate that value yourself would be an option, but using mpdfs calculation ensures you have the same rounding and handling of edge cases.
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.
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'm trying to place an icon over a div but the overlaying div is pushing the rest of the contents down. I'm stuck although it should be pretty easy. Please have a look at this fiddle and let me know what I'm doing wrong (apart from using tables in the design!)
body{
background-color: #666;
}
.sizesbg {
background-color:#fff;
-webkit-border-radius: 10px;
border-radius: 10px;
width: 170px;
text-align: center;
}
.soldicon {
background: url("http://www.oroeora.gr/preowned/images/sold_curl_small.png") no-repeat scroll left top transparent;
height: 155px;
left: 0;
top: 0;
width: 170px;
z-index: 2;
}
<table>
<tr>
<td class="sizesbg">
<div style="width:150px; overflow:hidden; max-height:140px; max-width:150px; min-height:100px;">
<img src="http://www.carfolio.com/images/dbimages/zgas/manufacturers/id/843/bmw-logo.png" width="140" height="140">
</div>
</td>
<td class="sizesbg">
<div class="soldicon"></div>
<div style="width:150px; overflow:hidden; max-height:140px; max-width:150px; min-height:100px;">
<img src="http://mcurrent.name/atarihistory/warner_books_logo.gif" width="140" height="140">
</div>
</td>
<td class="sizesbg">
<div style="width:150px; overflow:hidden; max-height:140px; max-width:150px; min-height:100px;">
<img src="http://www.mindxstudio.com/images/mindxstudio-logo-icon.jpg" width="140" height="140">
</div>
</td>
</tr>
</table>
Thanks!
use position:absolute; on the divs, but of course the parent elements need to have position:relative; to stay in the right place
something like this:
http://jsfiddle.net/EESAc/5/
Edit:
This works well in Chrome ... but some other browsers had troubles (eg. Firefox), because for table elements position property is not defined, and you should use a block element instead ... so it works if you use another div around the images and set its position to relative. I added another quick fiddle for an idea:
http://jsfiddle.net/EESAc/9/
Give the class .soldicon a position: absolute; This way the element will be taken out of the document flow and won't affect the other elements.
Try to add the following to your .soldicon css:
position:absolute;
DEMO
Change your css to this:-
.soldicon {
background: url("http://www.oroeora.gr/preowned/images/sold_curl_small.png") no-repeat scroll left top transparent;
display: block;
height: 155px;
left: -7;
top: 0;
width: 170px;
z-index: 2;
position:absolute; // Change to absolute positioning
}
In my case (included popup element is bigger then including element) position: absolute;
didn't work exactly how I needed it (scrolling bar was added onto including element and the included popup wasn't displayed entirely). So the solution was:
position: fixed;
I have some Sharepoint-produced HTML markup which is not the best you've seen, and cannot interfere in the markup, but have to style it via CSS.
The markup goes more or less like this:
<div id="searchbox">
<table>
<tr>
<td>
<table class="mstable">
<tr>
<td><input></input></td>
<td><select><option></option><option></option></select></td>
</tr>
</table>
</table>
<div id="fontsize">
<a href=""/>
<a href=""/>
</div>
</div>
Here is the CSS applied
#searchbox {
float: right;
margin-right: 15px;
margin-top: 10px;
text-align: right;
width: 40%;
}
#fontsize {
float: right;
width: 46px;
}
.mstable {
border-collapse: collapse;
margin-left: 2px;
margin-top: 2px;
width: 100%;
color: #000000;
font-family: Verdana;
font-size: 0.7em;
font-style: normal;
font-weight: normal;
}
What I am trying to do is put the fontsize div, next to the table. Currently, after the table there's a break and the fontsize id goes under it.
I set display:inline to all the table descendants of searchbox and the fontsize div, and in Firefox I get the desired result, but in IE (all versions 8 and below) it ignores it..
I know my solution would be to remove these tables and make it div-only but I don't know if I have this possibility..
Edit: I resolved the problem by setting float:left to both table and fontsize div AND setting a width in pixels to the table itself such as to limit it from expanding to the whole searchbox div.
This should do it for you :
http://jsfiddle.net/nULYR/8/
works in ie7+
EDIT
<table>
<tr> // here is
<td> // the problem
<table class="mstable">
<tr>
<td><input></input></td>
<td><select><option></option><option></option></select></td>
</tr>
</table>
</table>
With : http://jsfiddle.net/nULYR/13/
Without : http://jsfiddle.net/nULYR/12/
try to float left the table that comes directly after the 'searchbox' div:
<div id="searchbox">
<table style="float: left;">