Forum Moderators: not2easy
Can anyone tell me why the following doesnt work in IE? Its a nested table, so content is centered in the window. Inside the main cell is a good old absolute div nested in a relative one so the absolute positioning targets the relative div, not the body. But it doesnt work in IE : The element is positioned correctly horizontally but not vertically (The absolute div's 'top' is static ). It's fine in Moz. Does anyone have a fix that works for both? In my design the second table had lots more content in it so it is necessary.
Thanks a lot everyone
----
<html>
<head>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
<tr>
<td style="vertical-align:middle">
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td>
<div style="position:relative" >
<div style="position:absolute; top:-10px; left:-10px;">A</div>
</div>
X
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
xhtml 1.0 - [w3.org...]
xhtml 1.1 - [w3.org...]
html 4.01 - [w3.org...]
note: the xhtml specification says you may want to put this line above the doctype
<?xml version="1.0" encoding="UTF-8"?>if you're familiar with xhtml use the suitable xhtml doctype. if you just want to use html use the html 4.01 doctype. this code isn't "valid" for any of the doctypes, though. all doctypes require a
<title><head>heightalign
Thanks for the lowdown on doctypes, I think I removed the one that homesite created automatically to see if it helped with the problem. But now I will look at those links to try and get a better understanding of their different effects.
By the way to replace a table align="center" is it best to use style="text-align:center"?
Thanks again
style="text-align: center"style="margin: 0 auto"
all i did to check and see if adding the doctype would fix the problem in IE was to add the XHTML 1.1 doctype (the one i happened to have laying around at the moment) and loaded it in IE and it seemed to fix it..
so to learn how to fix your current problem you'd be better off searching for information about IE quirks mode and box model stuff. the w3c reference doesn't contain information about how IE handles documents with doctypes, it just sets forth a specification for browsers to use.
where it depends on which doctype you use is for the actual syntax you use to compose your code, so it would be a good idea to look at the XHTML specification, and run some of your current code through an XHTML validator ( [validator.w3.org...] ) to help you learn which types of things are and allowed in XHTML and which are deprecated.
Thanks a lot for the detailed reply, I think I understand the role of doctypes much better now. Also I'll make the W3C validator my first port of call to help look for the source of bugs.
Kindest regards,
Ultraniblet
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#div_outer{
position:relative;
width:200px;
height:200px;
border:1px solid #000;
background:#369;
}
#div_inner {
position:absolute;
top:-10px;
left:-10px;
width:100px;
height:100px;
color:#fff;
background:#123;
}
#table_outer{
width:100%;
height:100%;
border:0;
text-align:center;
}
#table_inner{
margin:0 auto;
text-align:left;
}
</style>
</head>
<body>
<table id="table_outer" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align:middle">
<table id="table_inner" cellspacing="0" cellpadding="0">
<tr>
<td>
<div id="div_outer">
<div id="div_inner">A</div>
</div>
X
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<added>I think your original problem may have been margin related. When I set the margins on the divs to 0, it actually displayed as you describe.</added>
Note that unless there is another compelling reason for you to add a doctype to this page (i.e., unless there is some other issue that would be fixed by adding a doctype) you might not want to add one. You may note in the above test page that it is not vertically centered. That's because vertical centering via standards doesn't work the way it does via tables. Remove the doctype from that page and your vertical centering returns, but nothing else breaks. Vertical centering via CSS is a bear, and usually requires that you know the exact dimensions of the element you are centering. If vertical centering of the page is important to you, and since you're using tables, anyway, you might find it easier to stick with the older method and not use a doctype.
I'm not saying I'm an advocate of not using DTDs, but it's something to consider in this situation.
cEM
Thanks cEM, I see what you mean, if you are going to use the stricter doctypes then it's probably best not to mix up older stuff like tables with css based design. But I've cleaned my page up a lot now thanks to the help on this forum, so I think I can keep a doctype on there now.
Its fixed now but in my page, the letters A & X were meant to stay in the same position relative to each other when you resized the page, this worked in Moz but not IE, where one letter was static on the page.
All the best
