Hi All,
I have a problem that is two fold. First a little about the enviroment I'm
using; I am running Microsoft Windows XP with all security patches applied.
I use Mozilla 1.6 for all testing before I test on IE 6 w/ all updates. I
am editing my style sheet with StyleMaster 3.5.2 and am hand coding. I use
Dreamweaver MX 2004 and am also hand coding.
I have a problem that is easily solved by using tables however I don't want
to use tables for layout I want to use CSS2.1. All my HTML complies with
XHTML-STRICT DTD 1.0.
Problem Context:
The owner of MGINVENTS, INC. hired me to improve his site and the current
site may be viewed at http://www.mginvents.com. Currently the site uses
frames and tables for layout. I'm trying to eleminate both the use of
frames and tables for layout. Note that I'm not really trying to emulate
the functionality provided by frames...just trying to get rid of them.
Problem Explanation:
I have a flash file "sidenav.swf" that servers as the navigation for the
mginvents.com site. This flash file has a gradient background that I need
to contiune down from the end of the .swf file to the footer of the page. I
can't seem to figure out how I can make implement this using CSS positioning
and other attirbutes.
Here is the contents of my style sheet:
/*
Redefine browser defalut style sheet rules for basic tages.
*/
body {
margin: 0px;
padding: 0px;
}
object {
margin: 0px;
padding: 0px;
}
div {
margin: 0px;
padding: 0px;
}
img {
margin: 0px;
padding: 0px;
}
/*
Setup site framework of page
*/
div#framework_container {
position: inherit;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
}
div#framework_header {
}
div#side_navigation1 {
}
div#side_navigation_2 {
margin: 0px;
padding: 0px;
left: 0px;
top: 369px;
width: 224px;
height: auto;
background-image: url(../pics/framework/sidenav/sidenav_background.gif);
background-repeat: repeat-y;
}
div#body_content {
}
div#footer {
left: 0px;
top: auto;
right: 0px;
bottom: 0px;
margin: 0px;
padding: 0px;
}
Here is the HTML for my page:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../css/framework.css" rel="stylesheet" type="text/css" />
</head>
<body id="body">
<div id="framework_container" dir="ltr" lang="en">
<div id="framework_header" dir="ltr" lang="en">
</div>
<div id="side_navigation_1" dir="ltr" lang="en">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.ca
b#version=6,0,29,0" width="224" height="368">
<param name="movie" value="../pics/framework/sidenav/sidenav.swf" />
<param name=quality value=high />
<embed src="../pics/framework/sidenav/sidenav.swf" quality=high
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_
Version=ShockwaveFlash" type="application/x-shockwave-flash" width="224"
height="368"></embed>
</object>
</div>
<div id="side_navigation_2" dir="ltr" lang="en">
</div>
<div id="body_content" dir="ltr" lang="en">
</div>
<div id="footer" dir="ltr" lang="en">
</div>
</div>
</body>
</html>So to put the problem in a diferent light I'm trying to get the
side_navigation_2 divto expand and contact depending on the size of the
browser window between side_navigation_1div and the footer div. Note that
I've yet to create the real style for the footer, header orbody_content
div's. One other issue I'm having with Mozilla is that mozilla puts a
spaceof about five pixels between side_navigation_1 and side_navigation_2
this doesn't happenon IE6 and I don't know why it's happening in Mozilla.All
help, suggestions or general feedback is greatly appricated.Best
regards,Theo
