Forum Moderators: not2easy
With help from an earlier CSS thread --http://www.webmasterworld.com/forum83/4185.htm
(thanks to SuzyUK and Origin)
I was able to throw together a quick site that looked great, and it was fluid! whoot!
Only problem was that when I bumped down the resolution a white bar appeared in Netscape8 and Firefox(I didn't bother seeing if it was happening in any ver of IE). The smaller the resolution the thicker the white bar got. My background is an off white, and it seems as if the page stops at a certain spot and then the window fills itself with #fff not the rest of the site! Is it just me or isn't a fluid layout supposed to fill the size of the window...
here's some css...
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}body {
font-size: 0.7em;
font-family: Verdana, Arial, Helvetica, sans-serif;
behavior: url("csshover.htc");
}
#header{
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
background-image: url(images/header3.gif);
background-repeat: repeat-x;
background-position: 100% 100%;
width: 100%;
height: 100px;
color: #FBFBE5;
z-index: 10;
margin-right: -15px;
}
.content {
position: relative;
display: table;
width: 100%;
margin: 0;
padding: 0;
border: 0;
clear: both;
border-spacing: 0; /* required by Opera 6 */
}
/* hide this from opera6 */
head:first-child+body div.content {
height: 100%;
}
#topcontain {
position: relative;
left: 30%;
top: 45%;
}
.container {
display: table-row;
}
.columns{
display: table-cell;
border: 0;
padding: 0;
margin: 0;
padding-top: 115px;
padding-bottom: 50px;
vertical-align: top;
min-height: 100%;
}
/* hide this from opera6 */
head:first-child+body div.columns {
height: 100%;
}
#footer {
clear: both;
margin-top: -51px;
width: 100%;
background-image: url(images/footer.gif);
background-repeat: repeat-x;
color: #FBFBE5;
z-index: 100;
text-align: center;
min-height: 51px; /* IE needs height though */
position: relative; /* required by operaP6 but correct value fed from hack below */
}
/* hide this from opera6 */
head:first-child+body div#footer {
position: absolute;
}
.foot {
display: inline;
}
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="en" ><head>
<title>Hogar Zelada - Home</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
@import url(css/zelada_main.css);
</style>
<style type="text/css" media="screen">
@import url(css/globalnav.css);
</style>
<script language="javascript" type="text/javascript" src="java/menu_settings.js"></script>
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="css/winIE.css" />
<![endif]-->
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]><script src="/java/ie7/ie7-standard-p.js" type="text/javascript"></script><![endif]-->
</head>
<body>
<div id="header">
<h1>Hogar Zelada</h1>
<table width="100%">
<table id="topcontain">
<tr>
<td id="topnav">
<div style="z-index:1;position:relative;">
<div style="display:none;">
<ul id="imenus0">
......I think you can get the idea... if you need more let me know... here's the last bit if its even necessary...
<div id="footer">
<li class="foot" style="position: relative; top: 15px;">Site Map ¦</li>
<li class="foot" style="position: relative; top: 15px;">Donate ¦</li>
<li class="foot" style="position: relative; top: 15px;">Contact Us</li>
</div>
</body>
</html>
Thanks in advance!
N
cEM
<div id="header">
<h1>Hogar Zelada</h1>
<table width="100%">
<table id="topcontain">
<tr>
<td id="topnav">If this is copied and pasted from your code - there's a missing <tr> and <td> between the two table tags. Make sure your html is valid.
"[edit] It appears in IE6 at any resolution. There is, because I didn't want to copy and paste the entire page. I have actually removed the bale from the page and it still has the bar.[/edit]"
should read:
[edit] It appears in IE6 at any resolution. There is a closing tr and td but I didn't want to copy and paste the entire page. I have actually removed the table from the page and it still has the bar.[/edit]
