2 replies [Last post]
HenkFarmer
Offline
newbie
Netherlands
Last seen: 18 years 8 weeks ago
Netherlands
Timezone: GMT+1
Joined: 2004-05-11
Posts: 2
Points: 0

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 -->

&nbsp;<br>
&nbsp;<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>

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 12 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

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.

Wink

The next sentence is true. The previous sentence is false. Discuss...

HenkFarmer
Offline
newbie
Netherlands
Last seen: 18 years 8 weeks ago
Netherlands
Timezone: GMT+1
Joined: 2004-05-11
Posts: 2
Points: 0

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!