Forum Moderators: not2easy
I'm having trouble with the following:
1) In Firefox the footer does not appear at the bottom of the screen.
2) In Firefox click the link to display the lightbox - it should appear the same size as in IE (I assume this is to do with 1?)
3) In Firefox 2.0.0.7 (but not in 2.0.0.2?!) the header does not stretch to the whole width of the browser.
4) In IE 6.0 the fading when clicking the lightbox does not fade the whole screen.
I've been playing and playing but can't get these issues sorted in both IE and FF at the same time so decided it was time to ask the experts.
Thanks for your advice in advance,
Andy
Please create a tiny image for content_wrap_bg.gif which should appear fixed at the bottom of the screen in all browsers. If the length of the text is more than one page the footer should scroll to the end of the text.
Here is the *cut down* code with only the main items:
index.html
---------
<!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=UTF-8" />
<title>Title</title>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6_or_less.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="lightbox.css" media="screen" />
</head>
<body id="type-c">
<div id="fade" class="black_overlay"></div>
<div id="wrap">
<div id="header">
<div id="site-name">Welcome</div>
</div>
<div id="content-wrap">
<div id="content">
<p>Display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
<div id="light" class="white_content">
This is the lightbox content that should fill most of the screen and not be scrollable
<br/>...
<br/>...
<br/>...
<br/>...
<br/>...
<br/>...
<br/>...
<br/>...
<br/>...
<br/>...end
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
</div>
</div>
</div>
</div>
</body>
</html>
screen.css
----------
* {margin:0;padding:0}
body {padding: 0 0 20px;background: #fff url("images/body_bg.gif") repeat-x 0 100%;color:#333;font:83%/1.5 arial,tahoma,verdana,sans-serif}
.clear {clear:both;position:relative;font-size:0px;height:0px;line-height:0px}
#header {background: #666 url("images/sprites.gif") repeat-x 0 100%; margin: 0 0 25px;padding: 0 0 8px}
#header #site-name {font: 265% arial;letter-spacing: -.05em;margin:0 0 0 40px;padding:3px 0;color:#ccc;border:none}
#wrap {min-width:770px;max-width:1200px;margin: 0 auto;position:relative}
#content-wrap {position:relative;width:100%}
#content {margin: 0 50px}
#content #breadcrumb {margin-top:-5px;font-size:93%;font-weight:bold}
#content #breadcrumb a:link, #content #breadcrumb a:visited {text-decoration:none}
#content #breadcrumb a:hover, #content #breadcrumb a:active {text-decoration:underline}
#type-c #content-wrap {background: transparent url("images/content_wrap_bg.gif") repeat-y 30px 0}
#type-c #content {margin: 0 25% 0 235px}
#footer {clear:both;border-top: 1px solid #E3E8EE;padding: 10px 0 30px;font-size:86%;color:#999}
#footer p {margin:0}
lightbox.css
------------
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
ie6_or_less.css
---------------
#header {width:100%}
#nav-secondary a {width:143px}
#resultslist-wrap li dl {display:inline}
ol.code, .featurebox, #content ul, #sidebar ul {position:relative}
[edited by: SuzyUK at 11:13 pm (utc) on Oct. 26, 2007]
Thanks
[edited by: Xapti at 11:35 pm (utc) on Nov. 1, 2007]
www.mollio.org
Do you have any idea how I can fix it?
Thanks
