I'm currently fighting with IE. Before I get some rants about tables I know "dont use them", but I didn't write this, I'm just debugging it. I'd like to know if there is some hack to get the table spacing out of the flow on IE, when I absolute position a table. I included some style to help see the issue better. There is a bar of white space that doesn't belong to anything. This works great on FF and Chrome, IE just breaks the flow on this.
<html>
<head>
<style type="text/css">
.button{
float:left;
Background:#0F0;
}
#testCont{
Background:#F00;
}
#testUnder{
Clear:both;
Background:#00F;
Color:#FFF;
}
.tablePop{
position: absolute;
top:60px;
left:60px;
Background:#CACACA;
}
</style>
</head>
<body>
<div id="testCont">
<div class="button">
Button1
</div>
<div class="button">
Button2
</div>
<div class="button">
Button3
</div>
<table border=0 cellspacing=0 cellpadding=0 class="tablePop">
<tbody>
<tr>
<td>
Row 1
</td>
</tr>
<tr>
<td>
Row 2
</td>
</tr>
<tr>
<td>
Row 3
</td>
</tr>
</tbody>
</table>
</div>
<div id="testUnder">
Hello World
</div>
</body>
</html>
Put your page in standards mode:
<!DOCTYPE html>
<html>
<head>
You can test this out quickly by pressing F12 and switching the document mode to standards.
Alternatively, you could also use display:inline instead of float:left for .button.
Related
I do support for an older, large website that was written without the DOCTYPE being set. The test example below shows the discrepancies, but is there a way to make the sizes render identically using the same style sheet?
(WHY?: Adding the DOCTYPE to this site will have to be a gradual and carefully tested implementation for the several thousand pages of code, and before I get started I'm seeing if it's possible to avoid maintaining two separate CSS sheets).
Source Code (with doctype):
<!DOCTYPE html>
<head><title>Untitled 1</title>
<style type="text/css">
input, div{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
input[type=text],input[type=password]{
border:1px #AAAAAA solid;
height:24px;
line-height:24px;
margin:0px;
padding:0px 0px 0px 3px;
}
</style>
</head>
<html>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<input type="text" value="Too big with doctype" style="width:200px" onclick="alert(this.offsetHeight)">
</td>
<td>
<div style="height:24px;width:100px;background-color:#dddddd;">100 x 24px</div>
</td>
<td>
<input type="text" value="Too small without doctype" style="width:200px;height:22px" onclick="alert(this.offsetHeight)">
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="height:24px;width:200px;background-color:#dddddd;">200 x 24px</div>
</td>
<td>
<div style="height:24px;width:100px;background-color:silver;">100 x 24px</div>
</td>
<td>
<div style="height:24px;width:200px;background-color:#dddddd;">200 x 24px</div>
</td>
</tr>
</table>
</body>
</html>
So to me it appears that without the doctype, the sizes of text inputs render exactly as you specify them. But with the doctype, it adds the border and any padding to the height or width. Can I get around this without creating a separate stylesheet?
Look at the following code to see my problem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div style='width:100%; background:#CCCCCC; padding:0px; margin:0px; margin-bottom:20px; border:1px solid #CCC;'>
<div style='float:left'>
<a href='#' title='CSS TEST'><span style='font-size:30px;'>TEST for CSS DIV</span></a>
</div>
<div style='float:right'>
Stuff on the right
</div>
<div style='clear:both;'></div>
</div>
<table cellspacing='0' cellpadding='2' align='center' width='1200' border='1'>
<tr>
<td> COL1 </td>
<td> COL3 </td>
</tr>
</table>
</body>
</html>
The above cuts my div down from 100% if viewed on a tablet. But works fine on the pc.
If I remove the table, the div spans 100%
Any help would be appreciated.
You can see this code live at http://zeissimages.com/test.html
Again it works fine on a tablet ONLY if you remove the table definition.
don't you mean:
<div style="width:100%">
bla bla bla
</div>
<table style="width:800px;">
..
..
</table>
Can't suggest much without the real code...
OK. I can not reproduce on any browser (including switching user agents to mimic a tablet) but I see the error on 2 HP touchpads (one with stock WebOS, the other with Android ICS). If I put the code in jsfiddle and view it on a tablet (in embedded mode) the issue doesn't exist.
First, you should move your <div style="clear:both"></div> so that it is between your first main div and the table, like:
<div>
</div>
<div style="clear:both"></div>
<table></table>
Does that resolve it?
Just in case, I'll mention that you shouldn't include all those inline styles unless it's the only option. Additionally, you can exclude the clearing div altogether if you clear the table.
I am having some problems getting a small piece of text to be centered while floating next to an image.
<html>
<head>
<style type="text/css">
img
{
float:right;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<div>
<img src="logocss.gif" width="95" height="84" />
<div style="position:relative; top: 20px;">
This
</div>
<div>
Other stuff...
</body>
</html>
(You can copy and paste this code into http://www.w3schools.com/CSS/tryit.asp?filename=trycss_float to see it in action.
What I would like is a way to vertically center the text while floating beside this image. and also not mess up text that comes after it. (as you can see, "Other Stuff..." is on top of "This")
I would prefer a pure CSS approach(or possibly restructuring of divs and such) because this is just an example showing the problem. The application it is being used in is very complex and having it all go into a table would require quite a bit of work, and possibly wouldn't look right.
UPDATE
Ok, I have ripped out part of my asp.net generated page that shows the problem I am having. I realize the code is ugly and apologize. It was generated by machine
<html>
<head>
<style type="text/css">
img
{
float:right;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<div>
<table>
<tr>
<td>
<div style="line-height:84px;">
<img src="logocss.gif" width="95" height="84" />
<span>This </span>
</div>
</td>
</tr>
</table>
Other stuff...
<br>
<br>
Actual application:
<br>
<div style="width:300px;">
<div style="width:300px;">
<input type="hidden"/>
<table border="0" style="border-collapse:collapse;border-spacing:1px;">
<tr>
<td style="width:250px;"><div style="line-height: 50px;">
<input type="image" title="Calculate Field" src="logocss.gif" style="border-width:0px;float: right;" /><span style="display:inline-block;color:Black;width:250px;">Email</span>
</div></td><td style="width:350px;"><table border="0">
<tr>
<td><input style="background-color:White;height:100%;width:300px;" /></td><td style="width:300px;"></td></tr></table></td><td style="width:300px;"></td>
</tr><tr style="height:0px;">
<td></td><td colspan="2" style="width:300px;"><span style="display:inline-block;height:0px;width:300px;"></span></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Sorry for big code but its a working example of my problem. I did the line height trick but it seems to have no effect here. Basically what I want is for the edit control to be vertically centered in the middle of the image(which is easy because of the table) and for the "Email" text to be vertically centered in the middle of the image. I can not make it work though in this arrangement. What am I doing wrong?
What about this? (note that the line-height value equals the image's height):
<html>
<head>
<style type="text/css">
img
{
float:right;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<div>
<div style="text-align:right;line-height:84px;">
<img src="logocss.gif" width="95" height="84" />
This
</div>
Other stuff...
</body>
</html>
UPDATE:
Considering the updated code, I came up with this:
<div style="width:300px;">
<div style="width:300px;">
<input type="hidden"/>
<table border="0" style="border-collapse:collapse;border-spacing:1px;">
<tr>
<td style="width:250px;"><div style="line-height: 84px; width:250px; text-align:right;">
<input type="image" title="Calculate Field" src="logocss.gif" style="border-width:0px;float: right;" />Email
</div></td><td style="width:350px;"><table border="0">
<tr>
<td><input style="background-color:White;height:100%;width:300px;" /></td><td style="width:300px;"></td></tr></table></td><td style="width:300px;"></td>
</tr><tr style="height:0px;">
<td></td><td colspan="2" style="width:300px;"><span style="display:inline-block;height:0px;width:300px;"></span></td>
</tr>
</table>
</div>
</div>
I'm not saying it's the best way to do it, but I tried not to modify your code too much.
You don't need to wrap the text in a span in my opinion.
If you want to stick to using tables, then try looking at the valign="middle" property of the td element : http://www.w3schools.com/TAGS/att_td_valign.asp
But if you want to do that, you'll have to separate the image from the text and put them in different tds.
Slightly different solution than the one from Glennular. I'm not entirely sure how you want to do this, but the following centers the text This..., floats the image to its right (and it would wrap the text if it stretches to the image) and puts the Other stuff... below it.
<html>
<head>
<style type="text/css">
img
{
float:right;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<div>
<div style="position:relative; top: 20px; text-align:center;">
<img src="logocss.gif" width="95" height="84" />
This
</div>
<div style="clear:right;">
Other stuff...
</body>
</html>
This might be what you're looking for.
I think you mean you want the image on the right side of the DIV. The float right will put it on the Right end of the container. Which has no size, ie. the whole screen.
<html>
<head>
<style type="text/css">
img
{
float:left;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<div>
<div style=" top: 20px;float:left;">
This
</div><img src="logocss.gif" width="95" height="84" />
</div>
Other stuff...
</body>
</html>
I'm trying to scale down an image by percentage and this renders correctly in Firefox, but not in Internet Explorer. The img tag needs to be inside a table.
<TABLE>
<TR>
<TD>
<img src="test.gif" width="60%" height="60%">
</TD>
</TR>
</TABLE>
Is there a better way to do this so it works in both browsers?
Try defining the dimensions in CSS instead:
<style type="text/css">
.myImg{
width:60%;
height:60%;
}
</style>
<table>
<tr>
<td>
<img src="test.gif" class="myImg" />
</td>
</tr>
</table>
I don't think some browsers like when you define width/height inline as anything but a numeric value (i.e., width="200");
Anyway, give that a shot - good luck
Check out the source on http://www.joelonsoftware.com/ - the images within articles scale quite nicely. Use FireBug to help you with figuring out the CSS that will accomplish the scaling you want.
Please try the following code:
<html>
<head>
<style>
table.full-width-table{
width:100%;
}
td.center-text-td{
text-align: center;
}
img.sixty-percent{
width:60%;
height:60%;
margin:0 auto;
}
</style>
</head>
<body>
<table class="full-width-table">
<tbody>
<tr>
<td class="center-text-td">
<img src="test.gif" class="sixty-percent"/>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I am trying to construct a simple, one-column layout. I want the top two rows to have smaller, fixed heights. The third row should expand to fill the rest of the page. Here is my current source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
html, body
{
height:100%;
width:100%;
border:0px;
margin:0px;
}
</style>
</head>
<body>
<table style="width:100%;height:100%;" cellpadding="0" cellspacing="0">
<tr>
<td style="height:50px;background:red;">Header 1</td>
</tr>
<tr>
<td style="height:10px;background:blue;">Header 2</td>
</tr>
<tr>
<td style="background:green;">Content</td>
</tr>
</table>
</body>
</html>
This works wonderfully in Safari, Firefox, and Opera. However, it fails miserable in both IE6 and IE7. In these two browsers, the first two rows are rendered much bigger than their specified heights. Not only that, but they actually dynamically resize with the height of the browser window. It's like IE is converting the constant pixel height to a percentage height.
It is important to me that the browser window not display scrollbars unless the content of the third row is big enough to require it. Setting the height of the 3rd <td> to 100% will cause these scrollbars to always appear since the height of that row will actually be set equal to the height of the entire table (it will be 100% of its containing element).
Removing the doctype declaration and reverting to quirks mode seems to make the issue go away in IE, but I need to use HTML 4.01 transitional as that is what all of the other existing pages in this application expect.
Here is an article for you that tells you how this can be done. I just tested the example that they provided in IE 6 and it works.
It appears that you must use the height property of the table, and NOT do it via a style attribute.
How about adding position:fixed to the table? I tested it in IE8 and seemed to work.
Set the height of your last td to 100%:
<tr>
<td style="background:green;height:100%;">Content</td>
</tr>
Does this work:?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
html, body
{
height:100%;
width:100%;
border:0px;
margin:0px;
}
</style>
</head>
<body>
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td height="50" style="background:red;">Header 1</td>
</tr>
<tr>
<td height="10" style="background:blue;">Header 2</td>
</tr>
<tr>
<td style="background:green;">Content</td>
</tr>
</table>
</body>
</html>
If you're using this to layout a page why not use div's instead?
This sort of works:
<style>
.outer {
position:relative;
height: 100%;
width: 500px;
background-color: blue;
}
.top {
height: 30px;
background-color: red;
width: 100%
}
.middle {
height:30px;
background-color: green;
width: 100%
}
</style>
<div class="outer">
<div class="top">
content1
</div>
<div class="middle">
content2
</div>
content3
</div>