Forum Moderators: not2easy
1) The footer is missing when viewed with Firefox, Opera and IE 7.
2) The navbar and mainbody scroll unexpectedly with both Firefox and Opera when the browser is resized.
3) The layout goes haywire when the browser is resized to 800x600, even though it was designed with 780x600 dimension.
This is a very basic design with all layout images specified in the CSS file and a rollover menu which is done completely with CSS. I've been pulling my hair out for the last 24 hours trying to tweak it to work for all 3 browsers and even though it looks fine, i'm determined to make it look perfect.
All you CSS guru's out there, please help a brotha who's persevered with some pearls of wisdom. Oh, and thank you in advance for the time you've spent reading this (and the time you'll spend in hopefully pointing me to the right direction)
Here's the (stripped down) HTML code for the site:
<body><div id="wrapper">
<div id="navmenu">
<div id="navbar">
... NAV BAR IS WORKING FINE [ Code ommited for clarity ]
</div>
</div>
<div id="textframe">
<div id="textbody">
... TXT HERE
</div>
</div>
<div id="footerarea">
<div id="footertext">
<p>Site deisgn by Quivver © 2008 Optimized for 1280x720. Currently testing with IE 6.0+, 7.0+, FireFox 2.0+ & Opera 9.0</p>
</div>
</div>
</div>
</body>
</html>
and here is the CSS
<style type="text/css">
html,div,span,p,h1,h2,h3 {
margin:0;
padding:0;
}
body {
background-color:#383838;
text-align:center;
padding:0px;
margin:0px;
display:table;
width:100%;
}
#wrapper {
margin: 0 auto;
width:780px;
text-align:left;
height:540px;
position:relative;
padding:0px;
overflow: hidden;
background: fixed top no-repeat url(images/PC_Header.jpg);
z-index:1;
}
#navmenu {
margin:0px;
position:relative;
top:106px;
left:0px;
height:103px;
width:780px;
background-image:url(images/PC_NavBar.jpg);
padding:0px;
overflow:hidden;
z-index:2;
}
#navbar {
position:relative;
top:20px;
left:90px;
width:595px;
height:50px;
background: fixed top no-repeat url(images/PC_Header.jpg);
overflow:hidden;
margin:0px;
padding:0px;
z-index:3;
}
#footerarea {
position:relative;
top:99px;
left:0px;
padding:0px;
margin:0px;
background: fixed top no-repeat url(images/PC_Footer.jpg);
width:780px;
height:50px;
z-index:7;
}
#textframe {
position:relative;
top:99px;
left:0px;
margin:0px;
width:780px;
height:300px;
background:fixed top repeat-y url(images/PC_Body.jpg);
padding:0px;
z-index:5;
}
#textbody {
position:relative;
top:10px;
left:20px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
padding:10px 30px 10px 30px;
margin:0px;
width:680px;
height:240px;
overflow:scroll;
overflow-x: hidden; overflow-y: auto;
}
#footertext {
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
padding:15px 30px 15px 30px;
}
</style>
No problems with either the footer visibility and/or browser resizing
? ? ?
I suspect the bugs are to be found in the
[ Code ommited for clarity ]
