Here's a simple web page. I would like the text as well as the image to be vertically centered in the cell. I would like the text to the left of the image, but that shouldn't be a problem...
Could you help?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table border="1" style="width: 100%">
<tr>
<td class="style1">Text<img src="PdfLink.jpg" alt="Whatever"/></td>
<td> </td>
</tr>
<tr>
<td></td>
<td> </td>
</tr>
</table>
</body>
</html>
default.css. Add to it as you see fit.
body{
font-size:12pt;
}
}
Update:
I take back some previous comments, including saying that Evan's answer worked.
The following worked. Note the "*". Evan's answer didn't include the . What does the "" mean?
.style1 * {
vertical-align: middle;
}
The asterisk means "any descendent of this class"; be careful using it, though, because it means ALL descendant elements will receive a particular style.
Note 1: Be aware that you have too many right braces in your CSS.
Note 2: Also, the other answer you received won't work if the text is bigger than the image. You didn't give a size for the image.
Because you're using a table for formatting. Simply add .style1 { vertical-align: middle }. The text should remain to the left of the image.
Related
I have to write a page like the following, however, the scroll bar don't show in IE 11 and FireFox. What should I do to solve the problem?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
</head>
<body>
<table style="width: 100%; height: 100%;">
<tr>
first row
</tr>
<tr style="height:100%">
<td style="height:100%; width:100%">
<div style="height:100%; width:100%;overflow:auto;direction:rtl">
<div>
<table>
<%for(int i=0;i<10000;i++){%>
<tr>
<td><%=i%></td>
</tr>
<%}%>
</table>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
Try this maybe you can implemented something with this style that i did.
CSS
.scroll {
height: 30%;
overflow: auto;
width: 100%;
display:block;
}
DEMO
Update DEMO
Just add overflow:auto to the CSS rule that applies to whichever element it is that you want to show the scrollbar on.
The other option is overflow:scroll but that will show the scrollbars whether or not the element needs to scroll, and it also shows both scrollbars - vertical and horizontal - all the time, whether they're necessary at the time or not. That's why I always prefer to use auto for overflow values.
Can anyone suggest a reason for the table changing position on the first page using this html?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>testfile</title>
<meta http-equiv="expires" content="0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="pragma" content="no-cache" />
<style type="text/css">
Table {
page-break-after: always;
}
</style>
</head><body>
<table width="100%">
<tr><td width="30%"><i>Group:</i></td>
<td width="70%">Test Group 1</td></tr>
<tr><td><i>Title:</i></td>
<td><b>Test Title 1</b></td></tr>
<tr><td> </td></tr>
</table><br/>
<table width="100%">
<tr><td width="30%"><i>Group:</i></td>
<td width="70%">Test Group 2</td></tr>
<tr><td><i>Title:</i></td>
<td><b>Test Title 2</b></td></tr>
<tr><td> </td></tr>
</table><br/>
<table width="100%">
<tr><td width="30%"><i>Group:</i></td>
<td width="70%">Test Group 3</td></tr>
<tr><td><i>Title:</i></td>
<td><b>Test Title 3</b></td></tr>
<tr><td> </td></tr>
</body></html>
When you do a print preview in IE9, the table on the first page is in a different position (higher) than any of the tables on the other pages.
Can anyone see a reason for this?
Thanks
This style causes page breaks after each table:
Table {
page-break-after: always;
}
After the first and second table, you have a <br/> tag, which adds a blank line.
Therefore, your second and third tables are being pushed down by the <br/>.
You can correct this by either removing the <br/> tags or by adding a <br/> tag before the first table.
Note that br is a void element, so the "/" symbol isn't needed. You'll usually see it as simply <br>.
Update
You may also need to add this style:
body {
margin: 0px;
}
Otherwise, the margin may be applied on the first page only. This is not true for IE11, but it is true for Chrome and apparently also true for IE9.
I'm trying to get rid of <center tag in my HTML, but apparently it is not so easy in some cases.
This answer: HTML: Replacement for <center>
also did not work for me.
The following example is supposed to center both Foo and Bar, but it does not center Bar. What is wrong here?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
</head>
<body>
<div style=" margin: 0 auto; text-align:center;">
Foo
<table>
<tr>
<td>Bar</td>
</tr>
</table>
</div>
</body>
</html>
If I replace <div> with <center> then everything works as indended, but <center> tag is deprecated...
Your current code centres the containing div but since it has width: auto (the default), it expands to fill the horizontal space available. This means that being centred puts it in the same position as if it was left (or right) aligned. If you want to centre that element, give it a width … but it doesn't look like that is what you want to do.
If you want to centre inline content (such as the text "Foo"), then apply text-align on the container.
If you want to centre block content (such as that table), then apply the auto margins you are using to that block content (not the container).
See also Centring using CSS
When the following is rendered, the height parameter of image (img) isn't considered. However, if I vary the width in terms of % for example 80%, it resizes and aspect ratio is intact. If I mention height in terms of px it works. Problems occur only for height being in % and in all browsers.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<img src="image.jpg" alt="Image" border="0" height="15%" width="100%" />
</body>
</html>
If we remove "http://www.w3.org/TR/html4/loose.dtd" from doctype as shown below, % works for height but any padding given to image won't be considered in IE but works fine in rest of browsers.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<img src="image.jpg" alt="Image" border="0" height="15%" width="100%" />
</body>
</html>
I have tried using YUI 3 api for CSS Reset. While it removes all default padding of browsers, it wont solve my problem. Any workaround available ?
Thanks.
Adding the following CSS to my CSS file did the trick.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
Thanks me :D
I have an html table nested in an html table cell. I want the nested table to use the full size of the cell it is nested in. When I use firefox or google chrome I get the result I want but when I use Internet Explorer 8 (even if I use td style="height="100%") the height of the nested cell depends on it's content. As a result I get whitespace before and after my nested table. Here is a simple html that will reproduce the problem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
<!--
body, html, table{
height: 100%;
width: 100%;
margin:0;
padding:0;
}
table, td, th {border:#000 medium solid}
</style>
<body>
<table>
<tr>
<th style="margin:0;padding:0;height:100;">
<table><tr><th style="height:100%">nested cell</th></tr></table>
</th>
</tr>
</table>
</body>
</html>
Here is your problem, you have specified <th style="margin:0;padding:0;height:100;"> in inline CSS style for you th inside your main table.
This should solve you problem, try using height:100%; instead.
EDIT:
To get rid of you extra space that requires in IE8 to scroll down you page, you can remove you border and add cellpadding="0" cellspacing="0" to you main table.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
body, html, table{
height: 100%;
width: 100%;
margin:0px;
padding:0px;
}
</style>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<th style="margin:0px;padding:0px;height:100%;">
<table><tr><th>nested cell</th></tr></table>
</th>
</tr>
</table>
</body>
</html>
Using attached code worked for me for both IE and FF but had to remove the borders as they are handled differently by IE and FF
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
<!--
body, html, table{
height: 100%;
width: 100%;
margin:0;
padding:0;
}
table{border:#000 0px solid}
</style>
<body>
<table style="background:#063" cellpadding="0" cellspacing="0" border="0">
<tr>
<th style="margin:0;padding:0;height:100%;">
<table style="background:#0FF;" cellpadding="0" cellspacing="0" border="0"><tr><th style="height:100%">nested cell</th></tr></table>
</th>
</tr>
</table>
</body>
</html>
In your <th>, you have "height:100;" instead of "height:100%;" - missing the "%"
<th style="margin:0;padding:0;height:100%;">
instead of
<th style="margin:0;padding:0;height:100;">
try just adding th{height:100%} to your css style