Tue, 2004-05-11 19:05
I did gather lots of info on CSS, because as a former layout man I welcome any improvement on the rather rough HTML design possiblities. But instead of enforcing some essential rules the W3C seems to exalt in providing us with more and more possibilities that just don't seem to work in most or in some browsers.
I'm into this game to help musicians and friends and provide them with sound and nice looking websites. Certainly not for puzzling for days on end to resolve all those deviations that the makers of browsers may percieve. Still I'm forced to spend most of my time to do just that and I think this is a shame and completely unnecessary.
Recently I made a very simple website - in fact just a 2-column container for an automatic emailsystem and archive of an online jazz-publication. The left content-column is fixed and originally has an subscription-form in it. On the right is the (clickable) archive. And also there is a footer. This seems to work fine in IE, Firefox, Mozilla and Opera, but not so in IE for the Mac.
Here the footer won't stay at the bottom but jumps to the top. What am I to do now? Put a note on the site saying 'dear visitor, you have to get another browser' or revert to good old tables that I hate to begin with? Or is there a work around in this... For display purposes I made a simplified site with the style-code in it.
Maybe someone can help me out... thanks anyway!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
<title></title>
<style>
html, body { color: Navy; background-color: White; font-family: Arial, Helvetica, sans-serif; }
body { margin-left: 140px; margin-top: 50px; font-size: 76%; }
p { font-size: 1 em; line-height: 140%; font-family: Arial, Helvetica, sans-serif; }
p.right { line-height: 100%; background-color: #ccffff; font-family: Arial, Helvetica, sans-serif; }
p.footnote { font-size: 0.8em; text-align: left; }
em { font-size: 1em; color: Blue; font-style: normal; font-weight: bold; }
a { font-size: 1em; color: Blue; font-weight: bold; text-decoration: none; }
a:hover { color: Red; }
h1 { font-weight: bold; font-family: Arial, Helvetica, sans-serif; color: red; font-size: 1.1em; }
strong, b {font-weight: bold; }
#main { position: relative; width: 390px; border: 1px solid #000000;}
#right { position: absolute; top: 50px; left: 580px; width: 175px; background-color: #ccffff; font-size: 1em; color: #993300; padding: 15px; border: 1px solid #000000;}
#bottom { position: relative; width: 100%; heigth: auto; margin-top: auto; border: 1px solid #000000;}
</style>
</head>
<body>
<!-- main content -->
<div id="main">
<h1>MAIN CONTENT</h1>
<p>Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.</p>
<p>Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.</p>
<h1>MORE CONTENT</h1>
<p>Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.
Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum.</p>
</div>
<!-- right column -->
<div id="right">
<h1>ARCHIVE</h1>
<p class="right"><b>Download past publications</b></p>
<p>Lorem ipsum sit dolor amum<br>
Lorem ipsum sit dolor amum<br>
Lorem ipsum sit dolor amum<br>
Lorem ipsum sit dolor amum<br>
Lorem ipsum sit dolor amum<br>
Lorem ipsum sit dolor amum</p>
<p>Lorem ipsum sit dolor amum<br>
Lorem ipsum sit dolor amum<br>
Lorem ipsum sit dolor amum<br>
Lorem ipsum sit dolor amum<br>
Lorem ipsum sit dolor amum<br>
Lorem ipsum sit dolor amum</p>
</div>
<!-- footer -->
<br>
<br>
<div id="bottom">
<p><b>Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum. Lorem ipsum sit dolor amum</b></p>
</div>
</body>
</html>
Tue, 2004-05-11 19:19
#1
Even the most simple things don't seem to work
Have a look here... http://pub.c-o2.net/cssf/hfarmer.htm
You've used absolute and relative positioning when there's no need to. By using floats, you'll get a more consistent cross-browser experience.
I've only checked in Safari and IE5 OS X. Let me know what you think.
Tue, 2004-05-11 21:01
#2
Even the most simple things don't seem to work
This is really great... it seems to perform very well this way. Of course I will carry out some further testing and implement your changes in my original code. This site is in Dutch only, but I'll let you know...
Thank you very much!