Hey 
I'm developing a website for a friend and having almost finished the layout after many issues already with the CSS I have overcome most and am left with just a few more, which after trying to solve them I'm just not getting anywhere with them.
IE Issues
As you can see from the screenshots below IE, as always, is spitting out the code wrong and doesn't want to play ball with aligning the right menu and also continuing the content area all the way to the end of the page.
General Problem
Another issue is the padding on both menus, as you can see from the code I have managed to get the curves working properly but if I apply padding to the box the curve images will also be padded, making the curves fail to align properly. Is there a way of getting round this? if so, how?
I've included the code below in hope that someone will be able to help.
Thanks for any help given,
Steven.
Index File
CSS Document
I'm developing a website for a friend and having almost finished the layout after many issues already with the CSS I have overcome most and am left with just a few more, which after trying to solve them I'm just not getting anywhere with them.
IE Issues
As you can see from the screenshots below IE, as always, is spitting out the code wrong and doesn't want to play ball with aligning the right menu and also continuing the content area all the way to the end of the page.
General Problem
Another issue is the padding on both menus, as you can see from the code I have managed to get the curves working properly but if I apply padding to the box the curve images will also be padded, making the curves fail to align properly. Is there a way of getting round this? if so, how?
I've included the code below in hope that someone will be able to help.
Thanks for any help given,
Steven.
Index File
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" lang="en" xml:lang="en">
<head>
<title>Baboski - Computer Systems & Technical Support</title>
<link type="text/css" rel="stylesheet" href="styles.css" />
<link rel="shortcut icon" href="images/favicon.ico" />
<meta name="description" content="" />
<meta name="keywords" content="" />
</head>
<body>
<div id="container">
<div id="topbar">
<div id="topbar-top">
<div class="curve-left"> </div>
<a title="Baboski" href="http://www.baboski.co.uk/"><img style="position: relative; left: 15px; bottom: 5px;
border: 0px;" width="166px" height="70px" alt="Baboski" src="images/logo.jpg" /></a>
</div>
<div id="topbar-bottom"> </div>
</div>
<div id="menu-left">
<div class="cm-top"> </div>
<?php include("menu-left.php"); ?>
</div>
<div id="content"><?php include("page.php"); ?></div>
<div id="menu-right">
<div class="cm-top"> </div>
<?php include("menu-right.php"); ?>
</div>
</div>
</body>
</html>CSS Document
Code:
/*======= Body =======*/
/*====================*/
body
{
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
font-family: arial, helvetica;
font-size: 10pt;
color: #B2C6FF;
}
#container
{
background-color: #FFFFFF;
margin: 10px;
position: relative;
padding: 0px;
color: #B2C6FF;
}
/*====== Topbar ======*/
/*====================*/
#topbar
{
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
width: 100%;
position: absolute;
}
#topbar-top
{
background: #F3F3F3 url('images/curve-right.jpg') top right no-repeat;
margin: 0px;
padding: 0px;
width: 100%;
height: 90px;
}
.curve-left
{
background: url('images/curve-left.jpg') top left no-repeat;
width: 15px;
height: 15px;
z-index: -1;
}
#topbar-bottom
{
background-color: #B2C6FF;
margin: 0px;
padding: 0px;
width: 100%;
height: 15px;
}
/*======= Menu =======*/
/*====================*/
.cm-top
{
background: url('images/cm-top.jpg') top no-repeat;
width: 160px;
height: 15px;
}
#menu-left
{
background: #F3F3F3 url('images/cm-bottom.jpg') bottom no-repeat;
margin: 0px;
padding: 0px;
width: 160px;
position: absolute;
top: 115px;
left: 0px;
font-family: arial, helvetica;
font-size: 10pt;
color: #5395E0;
}
#menu-right
{
background: #F3F3F3 url('images/cm-bottom.jpg') bottom no-repeat;
margin: 0px;
padding: 0px;
width: 160px;
position: absolute;
top: 115px;
right: 0px;
font-family: arial, helvetica;
font-size: 10pt;
color: #5395E0;
}
/*====== Content =====*/
/*====================*/
#content
{
background: #FFFFFF;
position: absolute;
top: 115px;
margin-left: 170px;
margin-right: 170px;
font-family: arial, helvetica;
font-size: 10pt;
color: #B2C6FF;
border: 1px solid #000;
}
h1 { font-size: 16pt; font-weight: normal; }
h2 { font-size: 14pt; font-weight: normal; }
h3 { font-size: 12pt; font-weight: normal; }
/*====== Links ======*/
/*===================*/
a:link, a:active, a:visited
{
color: #5395E0;
text-decoration: none;
}
a:hover
{
color: #5395E0;
text-decoration: underline;
}