wrong display for single quotes with word-break:break-all - html

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<body>
<table style="width:150px; word-break:break-all;">
<tr>
<td>'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''</td></tr>
<tr>
<td>&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;&apos;aaaaaaaaaaaaaaaaaaaa</td></tr>
<tr>
<td>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</td></tr>
</table>
</body>
</html>
but,the display was wrong(all the single quotes display in one line).I used &apos; instead ,but it did't work.

Try adding this to your CSS: -ms-word-break: break-all;

Related

Any html I write wont appear on the browser when I use copy full path

I have recently begun studying html, im trying to make a small crappy website, and when I copy full path and then paste it into the browser it just gives me a blank screen. Im sorry if this is simple, but nothing I do seems to change it.
code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title><strong>Stanislav Stanislavich</strong></title>
</head>
<table>
<tr>
<td>
<img src="Doomer3.jpeg" alt="Sad_Slav_Boi.jpeg">
</td>
<td>
<li>Just your average IT nerd in Eastern Europe</li>
</td>
</tr>
</table>
<hr>
its just not appearing, a blank screen.
You are missing a <body> tag.
Everything you want to display on the page, goes in the <body> tag. Like this:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title><strong>Stanislav Stanislavich</strong></title>
</head>
<body>
<table>
<tr>
<td>
<img src="Doomer3.jpeg" alt="Sad_Slav_Boi.jpeg">
</td>
<td>
<li>Just your average IT nerd in Eastern Europe</li>
</td>
</tr>
</table>
<hr>
</body>

input text field with long text increases table cell in IE7

I have a table in which the second column should have a certain width (50px for example).
When I have a textbox with a width of 100% in this column, but with a lot of text, the width of the column is always as long as the text.
see my code + screenshot
<!DOCTYPE HTML>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
</head>
<body>
<table border="1">
<tr>
<td></td>
<td style="width:50px;"><input type="text" value="very long text which doesn't fit into the whole textbox" style="width:100%" />
</td>
</tr>
</table>
</body>
</html>
How can I force the column to be 50px long in IE7?
You may achieve this by using IE conditional comments as follows
<!DOCTYPE HTML>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style>
.myInput{width: 100%;}
</style>
<!--[if IE 7]>
<style>
.myInput{width: 50px;}
</style>
<![endif]-->
</head>
<body>
<table border="1">
<tr>
<td></td>
<td style="width:50px;"><input class="myInput" type="text" value="very long text which doesn't fit into the whole textbox"/>
</td>
</tr>
</table>
</body>
</html>
I have checked this on IE tester as and looks fine. Hope this helps!

unwanted space before and after nested html table using Internet Explorer 8

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

How do you center text and image in a table cell?

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.

Table doesn't display borders

The following code should display table with borders around cells, but it doesn’t. Any idea why?
<head>
<meta http-equiv=“content-type” content=“text/html; charset=ISO-8859-1” />
<style type=“text/css”>
td, th {border: 1px solid black;}
</style>
<title>Testing Tony’s Travels</title>
</head>
<body>
<table>
<tr>
<th>City</th>
<th>Date</th>
<th>Temperature</th>
<th>Altitude</th>
<th>Population</th>
<th>Diner Rating</th>
</tr>
<tr>
<td>Walla Walla, WA</td>
<td>June 15th</td>
<td>75</td>
<td>1,204 ft</td>
<td>29,686</td>
<td>4/5</td>
</tr>
<tr>
<td>Magic City, ID</td>
<td>June 25th</td>
<td>74</td>
<td>5,312 ft</td>
<td>50</td>
<td>3/5</td>
</tr>
</table>
</body>
</html>
It works for me if you use the html tag around your text and replace your quotes with actual " or ' (you are using ” which isn't the same. Look closely ” != ")
It shows borders for me in IE6, IE7, IE8, FF3, and Chrome 3, but the borders are around each cell individually.
If you want the borders to appear connected, just add this in your style tag:
table { border-collapse: collapse; }
You're missing an opening <html> tag; is that just an accident from copy/pasting your code here? Also, fix the quotes in the meta and style tags:
<meta http-equiv="content-type"
content="text/html;
charset=ISO-8859-1" />
and
<style
type="text/css">
Adding a proper DOCTYPE is probably a good idea too, although you'll get borders to display from just making the above fixes.
For future reference, running your HTML through the W3C Validator or HTML Tidy can instantly identify issues like this.
Is this the whole document?
If it is, you might want to add a document type and html tags.
your double quotes aren't proper double quotes. try
<!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">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<head>
<style type="text/css">
td, th {border: 1px solid black;}
</style>
<title>Testing Tony’s Travels</title>
</head>
<body>
<table>
<tr>
<th>City</th>
<th>Date</th>
<th>Temperature</th>
<th>Altitude</th>
<th>Population</th>
<th>Diner Rating</th>
</tr>
<tr>
<td>Walla Walla, WA</td>
<td>June 15th</td>
<td>75</td>
<td>1,204 ft</td>
<td>29,686</td>
<td>4/5</td>
</tr>
<tr>
<td>Magic City, ID</td>
<td>June 25th</td>
<td>74</td>
<td>5,312 ft</td>
<td>50</td>
<td>3/5</td>
</tr>
</table>
</body>
</html>
I've only tested it on IE6 (sorry - I'm not on my machine) but I think your text editor has inserted 'smart quotes' around the double-quotes strings instead of the straight ones. It seems like just a stylistic change but it is a different character (“\” instead of "). When I replaced them it rendered the borders.