Forum Moderators: not2easy
---------------------
Layout
<div id="container">
#banner
#horizonatal navigation
#left side navigation
#contents
#footer
</div>
--------------------
Properties
body{
background-color: #000033;
color: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
font-size:100%;
}
#container{
width: 750px;
background-color: #FFFFFF;
margin: 0px auto 10px;
border: 1px solid #000000;
text-align: left;
background-image:url(sidebar .jpg);
background-repeat:repeat-y;
}
#banner {
padding: 0px;
height: 100px;
background-color: #EFF1F0;
background-image: url(banner.jpg);
background-repeat: no-repeat;
}
#horinav {
background-color: #ECE9D8;
}
#leftside {
margin: 0px;
width: 150px;
float: left;
background-image: url(sidebar%20.jpg);
}
#contents {
background-color: #FFFFFF;
padding: 10px;
margin-top: 0px;
margin-bottom: 10px;
margin-left: 150px;
margin-right: 5px;
}
#footer{
border-top: 1px solid #000000;
background-color: #EFF1F0;
color: #990002;
clear: both;
margin: 0px;
}
------------------
Basically it is a very simple layout. But problem is that I want "left side navigation" column's height to expand equal to the "contents' column" height.
And I also found the solution on this site: Faux columns. So as you see in the "#container" tag, I put a small image that matches with my "left side column" background image. After this, "left side" column's height expands equally with "contents column" height. But only in IE and not in Firefox (currently using 1.06 version). I don't understand where it went wrong. I appreciate any help from you guys. Thanks
Welcome to webmasterworld.
First validate, if you have not done so your html/xhtml and css.
This should work in firefox.
Also, do you have your image in an image folder? If so, you need to indicate this in your style rules.
Dan Cedarholm wrote an article on faux columns that is a pretty good read.
[edited by: createErrorMsg at 8:29 pm (utc) on Aug. 27, 2005]
[edit reason] site reference [/edit]
I've run your code through both browsers and unfortunately I'm unable to replicate the problem. The faux column works fine in both browsers for me. Are you sure that what you posted is exactly the same code as whats on your page? In particular, is there any chance that the source order of the elements is different on the page than it is in your post?
Also, are you using a valid doctype? And finally, the image names in your posted code have spaces in them. This would cause the link to the image to break and no image to display (although it would do so in both browsers, not just FF).
As a next step, I would suggest this: take your page code and "examplify it," then post it here as a test page. Examplifying simply means stripping out all the specific text and link hrefs and replacing them with short, generic sample text. This will give us a test page to work from that exactly mirrors the source order, nesting, etc of your page code.
Here's the test page I made based on the information in your post above. See if it behaves in a similar way as your original code. If not, check to see where it is different from the code that you have.
cEM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<title></title>
<style>
body{
background-color: #000033;
color: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
font-size:100%;
}
#container{
width: 750px;
background-color: #FFFFFF;
margin: 0px auto 10px;
border: 1px solid #000000;
text-align: left;
background-image:url(orange.gif);
background-repeat:repeat-y;
}
#banner {
padding: 0px;
height: 100px;
background-color: #EFF1F0;
background-image: url(banner.jpg);
background-repeat: no-repeat;
}
#horinav {
background-color: #ECE9D8;
}
#leftside {
margin: 0px;
width: 150px;
float: left;
background: #f60;
}
#contents {
background-color: #FFFFFF;
padding: 10px;
margin-top: 0px;
margin-bottom: 10px;
margin-left: 150px;
margin-right: 5px;
}
#footer{
border-top: 1px solid #000000;
background-color: #EFF1F0;
color: #990002;
clear: both;
margin: 0px;
}
</style>
</head>
<body>
<div id="container">
<div id="banner">#banner</div>
<div id="horinav">#horizonatal navigation</div>
<div id="leftside">#left side navigation</div>
<div id="contents">
<p>#contents</p>
<p>#contents</p>
<p>#contents</p>
<p>#contents</p>
<p>#contents</p>
<p>#contents</p>
<p>#contents</p>
</div>
<div id="footer">#footer</div>
</div>
</body>
</html>
Here is my external CSS file
/* CSS Document */
body{
background-color: #000033;
color: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
font-size:100%;
}
/****************** Wrapper/container *****************/
#wrapper{
width: 750px;
background-color: #FFFFFF;
margin: 0px auto 10px;
border: 1px solid #000000;
text-align: left;
background-image:url(sidebar.jpg);
background-repeat:repeat-y;
}
/********************** banner *****************/
#banner {
padding: 0px;
height: 100px;
background-color: #EFF1F0;
background-image: url(banner.jpg);
background-repeat: no-repeat;
}
/********************** Horizontal Navigation *****************/
#horinav {
background-color: #ECE9D8;
}
#horinav p{
font-size: 80%;
margin: 20px;
text-align: center;
word-spacing: 1px;
color: #990002;
display: inline;
font-weight: bold;
}
/**********************Leftside Bars *****************/
#leftside {
margin: 0px;
width: 150px;
float: left;
background-image: url(sidebar%20.jpg);
}
#leftside p {
font-size: 70%;
margin: 15px 2px;
color: #FFFFFF;
font-weight: bold;
line-height: 1.5em;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: none;
}
/**********************Contents *****************/
#contents {
background-color: #FFFFFF;
padding: 10px;
margin-top: 0px;
margin-bottom: 10px;
margin-left: 150px;
margin-right: 5px;
}
#contents p{
font-size: 80%;
margin: 20px;
text-align: justify;
word-spacing: 1px;
color: #000000;
}
#contents h1{
font-size: 120%;
color: #003366;
padding: 0;
margin: 20px;
text-transform: none;
}
/***this "rightside" is actually for a small flash banner 330x16, that resides within "banner id" I should have give a better name*****/
#rightside {
width: 300px;
float: right;
margin-top: 80px;
margin-right: 2px;
}
/**********************Footer *****************/
#footer{
border-top: 1px solid #000000;
background-color: #EFF1F0;
color: #990002;
clear: both;
margin: 0px;
}
Now my web 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"><!-- InstanceBegin template="/Templates/real_templ.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable --><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
<link href="file:///D¦/Dreamweaver%20Web%20Folder/mysite%20Site/real_css.css" rel="stylesheet" type="text/css" />
<!-- saved from url=(0013)about:internet -->
</head>
<body>
<div id="wrapper">
<div id="banner">
<div id="rightside">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="300" height="16">
<param name="movie" value="file:///D¦/Dreamweaver%20Web%20Folder/RealTech%20Site/scrol.swf" />
<param name="quality" value="high" />
<embed src="file:///D¦/Dreamweaver%20Web%20Folder/RealTech%20Site/scrol.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="300" height="16"></embed>
</object>
</div>
</div>
<div id="horinav">
<div align="center">
<p align="center">¦ Welcome ¦ ¦Articles¦ ¦About Us¦ ¦Contact Us¦ ¦Disclaimer¦</p>
</div>
</div>
<div id="leftside">
<p><u>ITEM 1</u></p>
<p>ITEM2<br />
ITEM3<br />
</p>
</div>
<!-- InstanceBeginEditable name="contents" THIS IS WHAT DM TEMPLATE DID-->
<div id="contents">
</div>
<!-- InstanceEndEditable -->
<div id="footer">Content for id "footer" Goes Here
</div>
</div>
</body>
<!-- InstanceEnd --></html>
I think something that you should REALLY keep in mind is it's bad practice to use spaces in file names. You have both examples of "%20" (code inside quotes that presemts a space) and a file with a space before the period.
This may or may not effect what you're doing and I'm just skimming the posts but I saw you posting it a second time.
Also try to keep your file and directory names in all lowercase as if you switch to a case sensitive server you'll have hell to pay if you don't follow this good practice with clients complaining about "404".
According to "4css"
I checked my css file through w3c validation service : results > found no error
Checked: web page coding: found some errors but all related with the flash code.
According to errorCreatermsg:
I removed the space between image names: Results: nothing happened and I have not much knowledge of "Doctype" but I
followed a tutorial posted on macromedia suppert site and the same doctype was used there that I am using. But please let me know if I need to know more about it in this case.
And I also copied the modified code you posted in the dreamweaver in a pure blank coding page and I previewed it after saving. But column's height does not expand in firefox. I don't know what's going on.
According to JABcreation:
I could not find where space is. Are you talking about real_css.css file? And what is %20 thing? I think dreamweaver always does that.
Again thanks a lot everybody. And I am still hoping for some more help. And one thing more. I am using the same image 150x10 for container background as well as for the leftside column.
I also copied the modified code you posted in the dreamweaver in a pure blank coding page and I previewed it after saving. But column's height does not expand in firefox.
There would be a necessary step to get that test page going, and I apologize for not mentioning it before. You would need to change the image path in the #container div's background property to match an image on your local machine. If you did that and the background still did not show up, then dreamweaver is doing something funky to the page.
A Question: When you say "previewed," do you mean you used DWs preview feature, or that you actually loaded the page, independent of DW, in a browser?
Another Question: is the background image showing up in the floated left column div, or is it absent from there, too?
A Suggestion: copy that test page code again, open Notepad or some other simple text editor, paste it in and alter the image path to match your own bg image, then save it with an .htm extension. Now load that, without DWs help, into FF and see what happens.
I suspect that DW might be doing strange things with your image paths, and that the reason the background is not showing up to create the Faux column is that th ebrowser isn't finding the image where the code says it is.
cEM
Here is what difference I got:
Before:
Container: background-image:url(sidebar.jpg);
"leftside" column: background-image: url(sidebar%20.jpg);
and after reapplying background images:
"Container": background-image:url(sidebar%20.jpg);
"leftside" column: background-image: url(sidebar%20.jpg);
So as you see DM added %20 after the name of the image I am using. "%20" I don't know what difference it makes but it worked. And according to "JAB creations" post it may be a space. But now it is working. And other Dreamweaver users can get some help from it if this code is right. But anyhow I think my problem has been solved with the help of all of you guys. Thanks again errorCreateMsg for your special efforts to solve my problem.
