Hello,
I have a very perplexing (at least to me) problem that hopefully
someone can help me with. I'm making a site with a 3 column layout. In the
middle column (my fluid column) I am trying to put a table of 99% width.
When I do this the table actually extends to the right over my right column
and off the screen. After much debugging and trying of different things, I
change this line in my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
....i changed to...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
and voila! the table was sized perfectly. The problem is though, that after
this change, my right column completely disappeared, even though there is
space left for it and all my CSS formatting to input boxes, fonts, etc... is
being ignored. Can anyone shed some light as to why this is happening? It
seems as if I am stuck with a choice between two poisons.
Thanks,
Robert.
Here is my code:
style sheet:
#top {
height:122px;
text-align: center;
voice-family: "\"}\"";
voice-family: inherit;
height:121px;
}
html>body #top {
height:121px;
}
body {
margin:10px 10px 0px 10px;
padding:0px;
}
#leftcontent {
position: absolute;
left:10px;
width:200px;
}
#centercontent {
margin-left: 199px;
margin-right:199px;
border:1px solid #000;
text-align: center;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 201px;
margin-right:201px;
}
html>body #centercontent {
margin-left: 201px;
margin-right:201px;
}
#rightcontent {
position: absolute;
right:10px;
width:200px;
}
input {
border: solid 1px CCCCCC;
background-color: 9999CC;
}
..login { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:
11px; line-height: 12px; color: FFCC00;
background-color: 9999CC;}
..copy { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:
x-small; line-height: 12px; color: FFCC00;}
----------------------------------------------------------------------------
----------------------
html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Co Sie Dzieje</title>
<link rel="stylesheet" href="CoSieDzieje.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length;
i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] =
new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) !=
null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) !=
null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])?
args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn :
img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up;
img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) !=
null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
</head>
<body bgcolor='black' class='copy'
onLoad="MM_preloadImages('images/btn_kluby_over.gif','images/btn_muzyka_over
..gif','images/btn_oldies_over.gif','images/btn_street_over.gif','images/btn_
disco_over.gif','images/btn_filmy_over.gif')">
<div id="top"><img src='images/top_bar.jpg' width=99% height=122
border='0'></div>
<div id="centercontent">
<table border=1 width='99%'>
<tr>
<td align='center'>Puntanga</td>
</tr>
</table>
</div>
<div id="leftcontent">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="#" target="_top"
onClick="MM_nbGroup('down','group1','btnMuzyka','' ,1)"
onMouseOver="MM_nbGroup('over','btnMuzyka','images/btn_muzyka_over.gif','',1
);" onMouseOut="MM_nbGroup('out');"><img src="images/btn_muzyka.gif" alt=""
name="btnMuzyka" width="148" height="21" border="0" onload=""></a></td>
</tr>
<tr>
<td><a href="#" target="_top"
onClick="MM_nbGroup('down','group1','btnOldies','' ,1)"
onMouseOver="MM_nbGroup('over','btnOldies','images/btn_oldies_over.gif','',1
)" onMouseOut="MM_nbGroup('out')"><img src="images/btn_oldies.gif" alt=""
name="btnOldies" width="148" height="21" border="0" onload=""></a></td>
</tr>
<tr>
<td><a href="#" target="_top"
onClick="MM_nbGroup('down','group1','btnStreet','' ,1)"
onMouseOver="MM_nbGroup('over','btnStreet','images/btn_street_over.gif','',1
)" onMouseOut="MM_nbGroup('out')"><img src="images/btn_street.gif" alt=""
name="btnStreet" width="148" height="21" border="0" onload=""></a></td>
</tr>
<tr>
<td><a href="#" target="_top"
onClick="MM_nbGroup('down','group1','btnDisco','', 1)"
onMouseOver="MM_nbGroup('over','btnDisco','images/btn_disco_over.gif','',1)"
onMouseOut="MM_nbGroup('out')"><img src="images/btn_disco.gif" alt=""
name="btnDisco" width="148" height="21" border="0" onload=""></a></td>
</tr>
<tr>
<td><a href="#" target="_top"
onClick="MM_nbGroup('down','group1','btnFilmy','', 1)"
onMouseOver="MM_nbGroup('over','btnFilmy','images/btn_filmy_over.gif','',1)"
onMouseOut="MM_nbGroup('out')"><img src="images/btn_filmy.gif" alt=""
name="btnFilmy" width="148" height="21" border="0" onload=""></a></td>
</tr>
<tr>
<td><a href="#" target="_top"
onClick="MM_nbGroup('down','group1','btnKluby','', 1)"
onMouseOver="MM_nbGroup('over','btnKluby','images/btn_kluby_over.gif','',1)"
onMouseOut="MM_nbGroup('out')"><img src="images/btn_kluby.gif" alt=""
name="btnKluby" width="148" height="21" border="0" onload=""></a></td>
</tr>
</table>
<br>
<TABLE WIDTH=153 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=3>
<IMG SRC="images/login_top.gif" WIDTH=153 HEIGHT=27 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/login_left_border.gif" WIDTH=6 HEIGHT=154 ALT=""></TD>
<TD class='login' align='center' valign='top'
background="images/login_bg.gif" width=139 height=154>
Pseudonim:<br><input class='login' type='text' maxlength='20' size='15'
name='txtUserName'><br>
Haslo:<br><input class='login' type='text' maxlength='20' size='15'
name='txtPW'><br>
<br>Not a member? <br>Click <a href='#'>here</a><br>
<br>Why become a member? Click <a href='#'>here</a> to find out.<br>
</TD>
<TD>
<IMG SRC="images/login_right_border.gif" WIDTH=8 HEIGHT=154 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=3>
<IMG SRC="images/login_bot.gif" WIDTH=153 HEIGHT=19 ALT=""></TD>
</TR>
</TABLE>
</div>
<div id="rightcontent">
nionoi sfodisfonosd fsdoifnsdo fsdfio sdf sdf sd fsd fsdfsd fsd fsd f sdf
sdf sd fs dfdsfsdfsd fs df sdf sd f sdf sd fsd
fsd fds fs df sdf sd fsdfsdf sd sdfsdfs dfdsdsf fsdfsdf sdfsdfsd fsd fsd fsd
f sdfsdf sdf sd fs df sd f sdfsdfsd f dsfsdfsd
</div>
</body>
</html>
