Forum Moderators: not2easy
The codes' as follow:
.middle {
background-image:url(../images/leavesbackground2.jpg);
background-repeat:no-repeat;
width:800px;
height:100%;
}
<div id="middle">
<div id="middle-left">
...
</div>
<div id="middle-right">
<div id="middle-right-top">
...
</div>
<div style="clear:both"></div>
<div id="middle-right-bottom">
...
</div>
</div>
</div>
what did i do wrong?
.middle(preceeded by a '.'). But your HTML contains an
id="middle".
To target the id in your CSS you'll need:
#middle {
:
}
Thanks for the correction.
I found out something else. After making the correction, It still didnt work until I change the 'middle' id height attribute from percentage to specific pixel value.
While this works fine in Firefox (the page takes just the right height size if you specify a pixel value above that required.), but IE uses as much pixel as you specify, leaving the page not so neat a times.
If I specify too short a height size it distorts the page in both browsers.
It would be nice having the percentage specification work for both.
Or is there a cooler way? I wonder.
I found out something else. After making the correction, It still didnt work until I change the 'middle' id height attribute from percentage to specific pixel value.
A percentage height is based on the height of the containing block (parent DIV or page container), providing the containing block actually has a height specified. So, a percentage height is going to be very much dependent on the structure of your page.
While this works fine in Firefox (the page takes just the right height size if you specify a pixel value above that required.), but IE uses as much pixel as you specify, leaving the page not so neat a times.
Are you refering to your 'middle' container, or some other page container? It almost sounds as if you are not using the correct DOCTYPE? What DOCTYPE are you using? If this results in IE rendering the page in quirks mode then it will use a different box-model and width/height dimensions could appear different to standards compliant browsers such as Firefox. (?)
<body>
<div id="top"/>
<div id="cover">
<div id="envelop">
<div id="page">
<div id="region-nav">
...
</div>
<div id="middle">
<div id="middle-left">
...
</div>
<div id="middle-right">
...
</div>
</div>
<div id="footer">
...
</div>
</div>
</div>
</div>
</body>
</html>
/* CSS Document */
/*#cover {
width:806px;
margin-left:auto;
margin-right:auto;
background-color:#FFFFFF;
}*/
#envelop {
width:800px;
margin-left:auto;
margin-right:auto;
}
#page {
margin:auto;
width:100%;
background-color:#FFFFFF;
padding:0px 0px 0px 0px;
}
#header {
clear:both;
width:100%;
height:80px;
background-image:url(../images/foutainoflife.jpg);
}
#middle {
background-image:url(../images/leavesbackground2.jpg);
background-repeat:no-repeat;
width:800px;
height:940px;
}
#footer .container{
width:100%;
}
The idea is to create a template page from which other pages could be built. The difference between these pages will be the content of the 'middle-right' div container. Since these contents will be dynamic, the height of these can not be determined before hand. If I leave out the height attribute of the 'middle' CSS class the background image will not display in Firefox. If I specify a height I get the result i mention in the my last message.
How do I work around this?
And does this tie to my choice of 'DOCTYPE' as you mentioned above?
