input text field with long text increases table cell in IE7 - html

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!

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>

How do I limit the maximum width of a text field?

I have a simple html page with just one text field and a button.
However, the text field is so wide. How can I limit the maximum width (visual length not character number) to like 200px?
If possible without Javascript and if possible, the width should be kept at 100%. I played with maxlength and size but without success.
https://jsfiddle.net/Smolo/udh9s6j2/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen" />
</head>
<body>
<div class="container">
<div class='col-sm-12'><form action='' method='post'>
<table class='table table-hover table-responsive table-bordered'>
<tr>
<td>Password</td>
<td><input type='password' name='password' class='form-control' required></td>
</tr>
<tr>
<td></td>
<td><button type='submit' class='btn btn-primary'>Reset</button></td>
</tr>
</table>
</form></div></div>
</body>
</html>
Using CSS max-width should do the trick.
Explanation: CSS's max-width makes sure that the width of the target element does not exceed 200px (even with width:100% set), i.e. the actual width of the element in your case will evaluate to either 100% or 200px, whichever is smaller.
.form-control {
max-width:200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen" />
</head>
<body>
<div class="container">
<div class='col-sm-12'><form action='' method='post'>
<table class='table table-hover table-responsive table-bordered'>
<tr>
<td>Password</td>
<td><input type='password' name='password' class='form-control' required></td>
</tr>
<tr>
<td></td>
<td><button type='submit' class='btn btn-primary'>Reset</button></td>
</tr>
</table>
</form></div></div>
</body>
</html>

Internet Explorer renders element’s width incorrectly

I hope that this is just a bad dream, but when I measure the width of both element in Photoshop, I get an incorrect size.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>* { margin: 0; padding: 0; border: 0: border-collapse:collapse;}</style
</head>
<body>
<table width="129" border="0" cellpadding="0" cellspacing="0" style="width:129px; height:18px;background-color:black;">
<tr>
<td> </td>
</tr>
</table>
Renders above table as 134 pixels
<br/>
<div style="width:29px;height:18px;background-color:Black;"></div>
​
Renders above div as 30 pixels
</body>
</html>
Is your browser zoom level 100%? Tested with IE7/8/9 the measurements match to 129px and 29px but zoomed in one level (105%) they become as you mentioned 134px and 30px.

Fluid height in Internet explorer

I've been trying to make an image resize as you resize the window of the browser. It works in all but Internet explorer. I was requested to do this without external sheets.
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%; margin:0; padding:0;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tidsaxel</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="dstyle.css" rel="stylesheet" type="text/css" />
</head>
<body style="height: 100%; margin:0;">
<table cellpadding="10" height="100%" width="100%" style="margin:0;">
<tr>
<td rowspan="20" height="100%" style="margin:0;">
<img src="pil.png" height="100%" width="48" />
</td>
<td class="Rubrik">Tidsaxel för krav, program, granskning och beslut</td>
</tr>
<tr>
<td>Sverige satsar på utveckling av kärnkraft (1945). Kärnavfallet betraktas inte som något problem.</td>
</tr>
And then it goes on with 20 more rows, I don't think it's nessessary to print them all.
</body>
</html>
The picture doesn't even take up 100% of the height to begin with, and when I resize the window it just gets smaller. Is there a way to fix this? I've read that it's possible with javascript, but I haven't found a solution. It's IE 7 and IE 8 that I've tried on.
In the table, set cellpadding="0" cellspacing="0". But this affects the content area as well. You might want to look into designing your site with DIVs instead.
You might want to look into a CSS solution:
<style type="text/css">
body {
background-image:url(background.png);
background-repeat:repeat-y;
}
</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.