Sent by Paul Manzotti on 18 January 2005 22:10
Now that I have managed to get passsed my case-sensitive muppetry, I can
get onto some actual CSS issues. And I certainly do have some issues.
In addition to the fixed left-side menu and top banner, I want to have a
central area that can contain two columns, and I want to be able to span
those two columns when needed (in a colspan stylee).
And, true to form, I've done it, but it doesn't work in IE. I've had a
read about IE's issues with float and the box model, but I can't work
out if they apply in this instance.
The basic problem is that every div in the content div acts like a block
element, so that no other div can occupy the same "row".
Any suggestions as to what I'm doing wrong?
Cheers,
manzo
<http://www.vinylvulture.co.uk/new/Lounge/lounge.php>
----------------------
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 STRICT//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Vinyl Vultures</title>
<link rel="stylesheet" type="text/css" href="../style.css" />
<!--[if gte IE 5]>
<link rel="stylesheet" href="../IE6Hack.css" type="text/css" />
<![endif]-->
</head>
<body>
<div id="banner">
<div id="bannerImage">
<a href="index.php">
<img border="0" src="images/title_bar_grey.jpg" width="400"
height="88" alt="Vinyl Vulture Logo" /></a>
</div>
<!-- Atomz Search HTML for Vinyl Vulture -->
<div id="searchForm">
<form action="http://search.atomz.com/search/" method="get">
<p><input size="15" name="sp-q" /></p>
<p><input id="searchBoxSubmit" type="submit" value="Search" /></p>
<input type="hidden" name="sp-a" value="sp1002e716" />
<input type="hidden" name="sp-p" value="all" />
<input type="hidden" name="sp-f" value="ISO-8859-1" />
</form>
</div>
</div>
<div id="menu">
<div id="rollover">
<div id="features">
<a href="Lounge/lounge.php">Lounge</a>
Other Links
</div>
<div id="siteStuff">
<a href="">Licorice Soul</a>
Other Links
</div>
</div>
</div>
<div id="content">
<div id="header">
<img src="../images/lounge_index_bar.gif" width="571"
height="101" border="0" alt="Lounge" />
<h1>December 2004</h1>
<h2>A site for those of us who measure space and time by vinyl</h2>
</div>
<div class="leftColumn">
<h1 class="update">Left hand column</h1>
<p></p>
</div>
<div class="rightColumn">
<p>Right hand column</p>
</div>
<div class="singleColumn">
<p>single spanning column single spanning column single spanning
column single spanning
spanning column single spanning column </p>
</div>
<div class="leftColumn">
<h1 class="update">Left hand column</h1>
<p></p>
</div>
<div class="rightColumn">
<p>Right hand column</p>
</div>
</div>
</body>
</html>
----------------------
style.css
----------------------
body
{
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
margin: 0px;
padding: 0px;
width: 100%;
height:100%;
}
div#banner
{
width: 750px;
height: 88px;
position: fixed;
top: 0px;
left:0px;
background-color:#c8c7c7;
float:right,bottom;
z-index: 2;
}
div#menu
{
width: 179px;
height: 100%;
position: fixed;
top: 88px;
left:0px;
background-color:#c8c7c7;
z-index: 0;
}
div#content
{
width: 571px;
height: 100%;
position: absolute;
top: 88px;
left:179px;
background-color:#FFFFFF;
z-index: 1;
}
#banner div#bannerImage
{
position:absolute;
top: 0px;
left:179px;
}
#banner div#searchForm
{
float:right;
margin-right: 10px;
margin-top: 10px;
}
div#header
{
}
div.singleColumn
{
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
width: 526px;
float: left;
}
div.rightColumn
{
margin-left: 10px;
margin-top: 10px;
width: 325px;
float: left;
}
div.leftColumn
{
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
width: 201px;
border-style: solid;
border-width:1px;
border-color: #000000;
padding: 3px;
font-size: 11px;
float: left;
}
h1
{
text-align: right;
font-size: 16px;
font-weight: bold;
color: #400080;
}
h1.update
{
text-align: center;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
background-color: #c8c7c7;
}
h2
{
text-align: right;
font-size: 12px;
padding: 1px;
font-weight: normal;
color: #400080;
}
#menu p
{
margin-top: 10px;
margin-left:10px;
}
#menu #rollover
{
margin-left:10px;
width:169px;
background-color: #c8c7c7;
color: #FFFFFF;
}
#menu #rollover #features
{
border-style: solid;
border-width:1px;
border-color: #FFFFFF;
margin-bottom: 10px;
border-right-color:#c8c7c7;
}
#menu #rollover #siteStuff
{
border-style: solid;
border-width:1px;
border-color: #FFFFFF;
margin-bottom: 10px;
border-right-color:#c8c7c7;
}
#menu #rollover a
{
display: block;
margin-left:10px;
width:154px;
background-color: #c8c7c7;
color: #FFFFFF;
font-weight: bold;
padding: 2px;
text-decoration: none;
}
#menu #rollover a:hover
{
background-color: #FFFFFF;
color: #000000;
text-decoration: none;
}
..maintext
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
..header
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #400080;
}
..mainheader
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #400080;
font-weight: bold;
}
a:link
{
color: #0000cc;
}
a:visited
{
color: #cc0000;
}
a:hover
{
color: #000000;
}
----------------------
--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.300 / Virus Database: 265.7.0 - Release Date: 17/01/2005
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
