As you can see, Ie doesn't show the last button, although it's supposed to fit perfectly, below is the css and html code as well as screens from both.
CSS
Code:
<?php
header('Content-type: text/css');
ob_start("compress");
function compress($buffer) {
// remove comments
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
// remove tabs, spaces, newlines, etc.
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer);
return $buffer;
}
?>
/* #004A7F */
/* #C0C0C0 */
html,body {
margin: 0;
background-image: url('bg.png');
background-repeat :repeat-x;
background-color: #C0C0C0;
}
div#wrapper {
margin-left: 75px;
min-height: 900px;
width: 900px;
}
/* header area */
div#header {
overflow: hidden;
background-image: url('header.png');
background-position: left;
background-repeat: no-repeat;
height: 100px;
width: 900px;
background-color: white;
border: 1px solid black;
}
div#navmenu {
overflow: hidden;
color: white;
height: 25px;
width: 900px;
background-color: white;
border-bottom: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
}
.button {
text-align: center;
width: 100px;
line-height: 20px;
display: block;
float: left;
height: 25px;
background-image: url('navbg.png');
background-repeat :no-repeat;
font-family: Tahoma, Arial, Helvetica, Sans-serif;
color: black;
font-size: 90%;
text-decoration: none;
}
.button:hover {
text-decoration: underline;
}
/* content area */
div#main {
overflow: hidden;
padding-top: 1px;
padding-bottom: 1px;
background-color: white;
min-height: 800px;
width: 900px;
border-right: 1px solid black;
border-left: 1px solid black;
}
div#article {
border-left: 1px dotted black;
border-right: 1px dotted black;
width: 880px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
margin-bottom: 5px;
}
div#articledetails {
overflow: hidden;
width: 880px;
background-color: #97B3C6;
height: 77px;
border-top: 1px dotted black;
}
div#articlecontent {
overflow: hidden;
border-top: 1px dotted black;
width: 880px;
height: 150px;
}
div#articleimages {
border-top: 1px dotted black;
overflow: hidden;
border-bottom: 1px dotted black;
border-right: 1px dotted black;
width: 880px;
height: 100px;
}
/* footer area */
div#footer {
overflow: hidden;
line-height: 60px;
text-align: center;
height: 60px;
width: 900px;
background-color: white;
border: 1px solid black;
}
<?php ob_end_flush();?>
HTML
Code:
<!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">
<head>
<title>The Wireless Shack</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iestylesheet.php">
<![endif]-->
<link rel="stylesheet" type="text/css" href="stylesheet.php"/>
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<div id="wrapper">
<a href=index.php><div id="header"></div></a>
<div id="navmenu">
<a href="#" class="button">HomePage</a>
<a href="#" class="button">Downloads</a>
<a href="#" class="button">Articles</a>
<a href="#" class="button">Links</a>
<a href="#" class="button">Stats</a>
<a href="#" class="button">Take Part</a>
<a href="#" class="button">About Us</a>
<a href="#" class="button">Contact Us</a>
<a href="#" class="button">Login</a>
</div>
<div id="main">
<div id="article">
<div id="articledetails">Article Details Go Here</div>
<div id="articlecontent">Article Goes Here</div>
<div id="articleimages">Article Images Go Here</div>
</div>
</div>
<div id="footer">© 2008-2009 The Wireless Shack</div>
</div>
</body>
</html>
--------------------------------
 |
