DonSailieri
03-30-2008, 03:20 AM
Hey folks,
I'm havin a bit of a problem with designin this site:
http://saugi.pointclark.net/mencoder/
Everything looks fine in Firefox, but IE adds this nasty margin at the bottom of the navigation div. I know WHY that is, but I can't think of a way to fix it. I know that with an image,
display: block;
'd fix it, but here I got multiple images and probably even text upcoming!
I tried to display block the div but that didn't work..
Lookin forward to your suggestions!
Regards,
Don
P.S.: Sourcecode and CSS
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<meta name="description" content="#" />
<meta name="keywords" content="#" />
<title>mEncoder - Main Menu</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body>
<div id="wrap">
<div id="header">
</div>
<div id="nav">
<a href="?content=new"><img src="img/navbutton.png" alt="New Task"/></a>
<a href="?content=schedule"><img src="img/navbutton1.png" alt="Schedule"/></a>
</div>
<div id="content">
<?php
switch($_GET['content'])
{
case "new":
include("new.php");
break;
case "schedule":
include("schedule.php");
break;
default:
include("new.php");
}
?>
</div>
<div id="advanced">
<?php
$content = $_GET['content'];
if ($content == "") {
include('blank.php');
}
elseif ($content == "new" ) {
switch($_GET['advanced'])
{
case "true":
include("advanced.php");
break;
case "false":
include("blank.php");
break;
default:
include("blank.php");
}
}
elseif ($content == "schedule") {
echo "<div align=center><h2>The current time is <u>". date('H:i:s');
echo "</u></h2></div>";
}
?>
</div>
</div>
</body>
</html>
#wrap {
width: 768px;
height: 512px;
position: absolute;
top: 25px;
left: 50%;
margin-left: -384px;
}
#header {
background-image: url(img/header.png) ;
height: 125px;
}
#nav {
width: 768px;
height: 25px;
text-align: left;
margin: 0;
padding: 0;
}
#content {
background: url(img/bg.png) no-repeat;
height: 460px;
padding: 1em;
}
#advanced {
background: url(img/advanced.png) no-repeat;
height: 149px;
padding: 1em;
}
a {
text-decoration: none;
font: 1em arial;
}
a img {
border: none;
}
I'm havin a bit of a problem with designin this site:
http://saugi.pointclark.net/mencoder/
Everything looks fine in Firefox, but IE adds this nasty margin at the bottom of the navigation div. I know WHY that is, but I can't think of a way to fix it. I know that with an image,
display: block;
'd fix it, but here I got multiple images and probably even text upcoming!
I tried to display block the div but that didn't work..
Lookin forward to your suggestions!
Regards,
Don
P.S.: Sourcecode and CSS
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<meta name="description" content="#" />
<meta name="keywords" content="#" />
<title>mEncoder - Main Menu</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body>
<div id="wrap">
<div id="header">
</div>
<div id="nav">
<a href="?content=new"><img src="img/navbutton.png" alt="New Task"/></a>
<a href="?content=schedule"><img src="img/navbutton1.png" alt="Schedule"/></a>
</div>
<div id="content">
<?php
switch($_GET['content'])
{
case "new":
include("new.php");
break;
case "schedule":
include("schedule.php");
break;
default:
include("new.php");
}
?>
</div>
<div id="advanced">
<?php
$content = $_GET['content'];
if ($content == "") {
include('blank.php');
}
elseif ($content == "new" ) {
switch($_GET['advanced'])
{
case "true":
include("advanced.php");
break;
case "false":
include("blank.php");
break;
default:
include("blank.php");
}
}
elseif ($content == "schedule") {
echo "<div align=center><h2>The current time is <u>". date('H:i:s');
echo "</u></h2></div>";
}
?>
</div>
</div>
</body>
</html>
#wrap {
width: 768px;
height: 512px;
position: absolute;
top: 25px;
left: 50%;
margin-left: -384px;
}
#header {
background-image: url(img/header.png) ;
height: 125px;
}
#nav {
width: 768px;
height: 25px;
text-align: left;
margin: 0;
padding: 0;
}
#content {
background: url(img/bg.png) no-repeat;
height: 460px;
padding: 1em;
}
#advanced {
background: url(img/advanced.png) no-repeat;
height: 149px;
padding: 1em;
}
a {
text-decoration: none;
font: 1em arial;
}
a img {
border: none;
}