... very CSS-noob question here. This is my first stab at a layout with CSS rather than tables, so bear with me on this inane problem.
i wanted to float some text to the right of the other copy on the page, which shouldn't be a problem. What i want though is the page's white background to extend past the bottom of the floated text. As it is right now, looking at it in Firefox the white background contracts because there us no text to "push it" down past the bottom of the floated copy. But IE, Netscape and Opera all show it the way i want it to.
i know Firefox is pretty touchy about CSS and i've looked it over, but what am i missing?? Code for the stuff is below and the page is live at <!-- m --><a class="postlink" href="http://www.usssterlet.info/index_new.html">http://www.usssterlet.info/index_new.html</a><!-- m -->
******************************************************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>USS Sterlet (SS-392)</title>
<link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"sterlet_style2.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onLoad="window.defaultStatus='Home of the USS Sterlet (SS-392)'">
<div id="pagebody">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"img/header_v2main.jpg" width="602" height="281" alt="header image" border="0">
<div id="toplinks"><span class="class4"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html"> Home </a> |
<a href=http://www.webdeveloper.com/forum/archive/index.php/"sterlet_data.html"> Sterlet Data </a> |
<a href=http://www.webdeveloper.com/forum/archive/index.php/"ww2.html"> WWII </a> | <a href="cold_war.html"> Cold
War </a> | <a href=http://www.webdeveloper.com/forum/archive/index.php/"sea_stories.html"> Sea
Stories </a> | <a href=http://www.webdeveloper.com/forum/archive/index.php/"links.html"> Links </a> |
<a href=http://www.webdeveloper.com/forum/archive/index.php/"reunion.html"> Reunion Info </a> |
<a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.html"> Contact </a> </span> </div>
<div id="textwindow">
<div id="rightbox"><span class="title_gold">Welcome Aboard!</span><br>
From the boiling waters of the Pacific in World War II to the silent battles
of the Cold War, the USS Sterlet helped to ensure the defence of this country
along with so many other diesel submarines. This website pays tribute to
this submarine and the dedicated men who served aboard her.
<p>Diesel Boats Forever!</p>
</div>
text text text text text text text text text text text text text text text text text text
</div>
</div>
</body>
</html>
***********************************************************
/* <!-- m --><a class="postlink" href="http://www.usssterlet.info">http://www.usssterlet.info</a><!-- m --> - v1.2 - December 2004 */
body {
font-family: Arial, Tahoma, sans-serif;
font-size: 9pt;
color: #fff;
background: #7E95B5 url(/img/blu_btgrdk.gif) repeat-x fixed 0% 100%;
border: 0 none inherit;
border-top:5px;
padding-bottom:25px;
text-align:center;
}
#pagebody {
padding:0;
margin:0 auto;
width:602px;
border:0 none inherit;
text-align:center;
color:#000;
background: transparent;
}
#toplinks {
position:relative;
text-align:left;
margin:0;
padding:5px;
width:590px;
voice-family: inherit;
background:#eee;
border:1px solid #000;
border-top:none;
}
/* secondary page top links */
.class4 a:link { text-decoration:none; color:#336699; font-weight:bold;}
.class4 a:visited { text-decoration:none; color:#336699; font-weight:bold;}
.class4 a:active { text-decoration:none; color:#336699; font-weight:bold;}
.class4 a:hover { text-decoration:underline; color:#90AE79; font-weight:bold;}
/* secondary page footer links */
.class4a a:link { text-decoration:none; color:#336699; background:#eee; font-weight:bold;}
.class4a a:visited { text-decoration:none; color:#336699; background:#eee; font-weight:bold;}
.class4a a:active { text-decoration:none; color:#336699; background:#eee; font-weight:bold;}
.class4a a:hover { text-decoration:underline; color:#90AE79; background:#eee; font-weight:bold;}
/* secondary page body links */
.class4b a:link { text-decoration:underline; color:#336699;}
.class4b a:visited { text-decoration:underline; color:#336699;}
.class4b a:active { text-decoration:underline; color:#336699;}
.class4b a:hover { text-decoration:underline; color:#90AE79;}
/* #B7D3A2 */
#textwindow {
position:relative;
text-align:left;
margin:0;
padding:5px;
width:590px;
voice-family: inherit;
background:#fff;
border:1px solid #000;
border-top:none;
}
#whatis {
float:right;
text-align:left;
margin:0;
padding:5px;
width:250px;
voice-family: inherit;
background:#B7D3A2;
border:1px solid #000;
}
#leftbox {
position:relative;
float:left;
text-align:left;
margin:0;
padding:5px;
padding-right:15px;
width:250px;
voice-family: inherit;
background:#fff;
border:none;
}
#rightbox {
position:relative;
float:right;
text-align:left;
margin:5px;
padding:5px;
padding-left:15px;
width:250px;
background:#fff;
border:none;
}
#battleflag {
float:left;
margin:5px;
width:261px;
}
.title_gold {
font-family: Tahoma, sans-serif;
font-size: 10pt;
color: #951007;
font-weight: bold;
}Just add a float:left in the #textwindow declaration. This should cure
your problem.
This used to happen to me and this seems to fix it always.
Asino... thanks, i'll give that a shot
Asino - that did the trick. Thanks again.
i wanted to float some text to the right of the other copy on the page, which shouldn't be a problem. What i want though is the page's white background to extend past the bottom of the floated text. As it is right now, looking at it in Firefox the white background contracts because there us no text to "push it" down past the bottom of the floated copy. But IE, Netscape and Opera all show it the way i want it to.
i know Firefox is pretty touchy about CSS and i've looked it over, but what am i missing?? Code for the stuff is below and the page is live at <!-- m --><a class="postlink" href="http://www.usssterlet.info/index_new.html">http://www.usssterlet.info/index_new.html</a><!-- m -->
******************************************************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>USS Sterlet (SS-392)</title>
<link rel="stylesheet" href=http://www.webdeveloper.com/forum/archive/index.php/"sterlet_style2.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onLoad="window.defaultStatus='Home of the USS Sterlet (SS-392)'">
<div id="pagebody">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"img/header_v2main.jpg" width="602" height="281" alt="header image" border="0">
<div id="toplinks"><span class="class4"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html"> Home </a> |
<a href=http://www.webdeveloper.com/forum/archive/index.php/"sterlet_data.html"> Sterlet Data </a> |
<a href=http://www.webdeveloper.com/forum/archive/index.php/"ww2.html"> WWII </a> | <a href="cold_war.html"> Cold
War </a> | <a href=http://www.webdeveloper.com/forum/archive/index.php/"sea_stories.html"> Sea
Stories </a> | <a href=http://www.webdeveloper.com/forum/archive/index.php/"links.html"> Links </a> |
<a href=http://www.webdeveloper.com/forum/archive/index.php/"reunion.html"> Reunion Info </a> |
<a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.html"> Contact </a> </span> </div>
<div id="textwindow">
<div id="rightbox"><span class="title_gold">Welcome Aboard!</span><br>
From the boiling waters of the Pacific in World War II to the silent battles
of the Cold War, the USS Sterlet helped to ensure the defence of this country
along with so many other diesel submarines. This website pays tribute to
this submarine and the dedicated men who served aboard her.
<p>Diesel Boats Forever!</p>
</div>
text text text text text text text text text text text text text text text text text text
</div>
</div>
</body>
</html>
***********************************************************
/* <!-- m --><a class="postlink" href="http://www.usssterlet.info">http://www.usssterlet.info</a><!-- m --> - v1.2 - December 2004 */
body {
font-family: Arial, Tahoma, sans-serif;
font-size: 9pt;
color: #fff;
background: #7E95B5 url(/img/blu_btgrdk.gif) repeat-x fixed 0% 100%;
border: 0 none inherit;
border-top:5px;
padding-bottom:25px;
text-align:center;
}
#pagebody {
padding:0;
margin:0 auto;
width:602px;
border:0 none inherit;
text-align:center;
color:#000;
background: transparent;
}
#toplinks {
position:relative;
text-align:left;
margin:0;
padding:5px;
width:590px;
voice-family: inherit;
background:#eee;
border:1px solid #000;
border-top:none;
}
/* secondary page top links */
.class4 a:link { text-decoration:none; color:#336699; font-weight:bold;}
.class4 a:visited { text-decoration:none; color:#336699; font-weight:bold;}
.class4 a:active { text-decoration:none; color:#336699; font-weight:bold;}
.class4 a:hover { text-decoration:underline; color:#90AE79; font-weight:bold;}
/* secondary page footer links */
.class4a a:link { text-decoration:none; color:#336699; background:#eee; font-weight:bold;}
.class4a a:visited { text-decoration:none; color:#336699; background:#eee; font-weight:bold;}
.class4a a:active { text-decoration:none; color:#336699; background:#eee; font-weight:bold;}
.class4a a:hover { text-decoration:underline; color:#90AE79; background:#eee; font-weight:bold;}
/* secondary page body links */
.class4b a:link { text-decoration:underline; color:#336699;}
.class4b a:visited { text-decoration:underline; color:#336699;}
.class4b a:active { text-decoration:underline; color:#336699;}
.class4b a:hover { text-decoration:underline; color:#90AE79;}
/* #B7D3A2 */
#textwindow {
position:relative;
text-align:left;
margin:0;
padding:5px;
width:590px;
voice-family: inherit;
background:#fff;
border:1px solid #000;
border-top:none;
}
#whatis {
float:right;
text-align:left;
margin:0;
padding:5px;
width:250px;
voice-family: inherit;
background:#B7D3A2;
border:1px solid #000;
}
#leftbox {
position:relative;
float:left;
text-align:left;
margin:0;
padding:5px;
padding-right:15px;
width:250px;
voice-family: inherit;
background:#fff;
border:none;
}
#rightbox {
position:relative;
float:right;
text-align:left;
margin:5px;
padding:5px;
padding-left:15px;
width:250px;
background:#fff;
border:none;
}
#battleflag {
float:left;
margin:5px;
width:261px;
}
.title_gold {
font-family: Tahoma, sans-serif;
font-size: 10pt;
color: #951007;
font-weight: bold;
}Just add a float:left in the #textwindow declaration. This should cure
your problem.
This used to happen to me and this seems to fix it always.
Asino... thanks, i'll give that a shot
Asino - that did the trick. Thanks again.