Greetings,
This is my first foray into CSS and indeed my first website in general.
My goal is to use a liquid(ish) design, no javascript and no tables for
layout positioning. Rather foolishly I embarked on a "frame emulation"
type of layout for no real reason other than to see if it could be
done. Predictably I have come across many obstacles along the way, and
predictably most of them are found in IE.
(I have emulated position: fixed; in IE as outlined in;
http://tagsoup.com/-dev/null-/css/fixed/ )
I have a fixed DIV across the top of every page that has caused some
problems with internal anchors as they will focus at the top of the
viewport underneath the fixed DIV. I came up with an ugly solution that
requires a little extra markup HTML, but I can live with that.
HTML:
<ol>
<li><a href="#h2.intro">Introduction</a></li>
<li><a href="#h2.whats_new">What's New?</a></li>
</ol>
[~]
<div id="h2.intro" class="anchor"><div>
<h2>Introduction</h2></div></div>
CSS:
div.anchor {
position: relative;
top: -9em;
}
div.anchor div {
position: relative;
top: 9em;
}
URL:
http://www.boozers.net.au/
The fixed DIV at the top of the page is 9em high. This works in Firefox
1.5 and Opera 8.5, however it doesn't play nice in IE6.
Does anybody know an alternate method that will work in IE6?
(2)
I also have another quick query regarding forcing the width of a
floated DIV. Basically I have;
HTML:
<div id="content_wrapper">
<div id="content">
Some Content
</div>
<div id="navtop">
Some Content
</div>
<div id="footer">
Some Content
</div>
</div>
CSS:
#content_wrapper {
float: left;
width: 100%;
}
#content {
float: left;
margin: 0 10em 0 0;
}
#navtop {
float: left;
margin: 0 0 6em -10em;
width: 10em;
}
#footer {
clear: both;
width: 100%;
}
example URL:
http://www.boozers.net.au/library/
Is there any way to force the content DIV to use all the available
width?
Sorry for the long post. I would also appreciate any and all
suggestions regarding the site (excluding content which is non-
existent).
TIA
--
Rob McKenna,
Rain God.