Fine in Firefox 0.9, Bad in IE6

pasha · 07-21-2004, 02:06 AM

I've been trying out a new site design and it's been viewing fine in Firefox 0.9, but it's totally skewed in IE6. Stupid me didn't think of testing it in another browser til it was almost done.

What do you guys see?: http://wurh.com/test/wurh.html If you have Opera or Safari that'd be great too.

I've run it through the validators and it's valid HTML and CSS, so I don't know what's wrong.

My stylesheet:

Code:

/* BASIC ELEMENTS -------------------------------------*/

body { border-top: 2px solid #465568; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-align: center; background: #ffffff; }

a:link { color: #86342B; text-decoration: none; padding-bottom: 0px; border-bottom: 1px solid #CCC; }
a:visited { color: #222; text-decoration: none; padding-bottom: 0px; border-bottom: 1px solid #CCC;} 
a:active { color: #777; text-decoration: none; padding-bottom: 0px; border-bottom: 1px solid #CCC;} 
a:hover { color: #465568; text-decoration: none; padding-bottom: 0px; border-bottom: 1px solid #CCC;} 

p { font: 90% verdana, arial, helvetica, sans-serif; margin-top: 6px; text-align: left; }
h1 { font: 19px Georgia, verdana, arial; margin-top: 5px; text-align: left; }
h2 { font: 17px Georgia, verdana, arial; margin-top: 5px; text-align: left; }
h3 { font: 16px Georgia, verdana, arial; margin-top: 5px; text-align: left; }


table { font-family: verdana, eneva, Arial, sans-serif; font-size: 9px; margin: 0px 5px 0px 0px; padding: 0px 0px 0px 0px; }
td { padding: 0px 0px 0px 0px; margin: 0px 1px 0px 0px; }

blockquote { border-left: 2px solid #BBB; border-right: 0px solid #BBB; margin: 10px 30px 0px 14px; padding: 5px 10px 5px 13px; font-size: 10px; line-height: 13px; font-family: Verdana, Geneva, Arial, sans-serif; }

.floatright { float: right; margin: 0px 0px 0px 0px; border: 1px solid #666; padding: 2px; }
.floatleft { float: left; margin: 0px 7px 0px 0px; border: 1px solid #666; padding: 2px; }
.floatquote { float: left; margin: 0px 5px 0px 6px; border: 0px; padding: 2px; }
.floatdate { float: left; margin: 0px 0px 0px 0px; border: 0px; padding: 0px; }

.comments { font-family: georgia, Geneva, Arial, sans-serif; font-size: 11px; color: #B10000; text-align: right; padding: 0px 5px 0px 0px; margin: 0px; }

/* SPECIFIC DIVS --------------------------------------*/

#container { width: 100%; height: 100%; margin-right: auto; margin-left: auto; text-align: center; }	

#topbit { position: relative; height: 30px; width: 820px; margin: 0px auto 0px auto; border-bottom: 3px double #CCC; }
#topleft { position: absolute; left: 14px; top: 13px; text-align: left; }
#topright { position: absolute; left: 760px; top: 13px; text-align: right; }

#header	{ position: relative; height: 280px; width: 800px; margin: 0px auto 0px auto; padding:0px; }
#headertxt { position: absolute; left: 25px; top: 23px; font-family: Verdana, Geneva, Arial, sans-serif; color: #FFFFFF; font-size: 11px; line-height: 15px; text-align: left; width: 300px; }

/* CoLUMNS --------------------------------------*/

#columns { width: 820px; margin-right: auto; margin-left: auto; margin-top: 32px; margin-bottom: 0px; text-align: center; border-top: 3px double #CCC; }
#one { border-left: 1px dashed #CCC; border-right: 0px solid #CCC; padding: 25px 50px 14px 30px; margin: 0px 0px 0px 10px; text-align: left; float: left; }
#onetext { width: 450px; font-size: 12px; line-height: 17px;}

#two 	{ border: 0px; padding: 10px 0px 20px 0px; margin: 0px 0px 0px 0px; text-align: left; float: left; }
.twotext { border-top: 0px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc;border-bottom: 1px solid #ccc; width: 269px; font-size: 11px; line-height: 15px; margin: 10px 0px 10px 0px; }
.colbits { font-family: verdana, eneva, Arial, sans-serif; font-size: 9.5px; margin: 0px 0px 0px 0px; padding: 8px 10px 14px 15px; }
.midtext { border: 0px; width: 269px; font-size: 9px; text-align: center; line-height: 15px; margin: 10px 0px 5px 0px; }
.mixtape{ font: 100% verdana, arial, helvetica, sans-serif; line-height: 13px; }

/* FOOTER --------------------------------------*/
			
#bottombit { position: relative; width: 820px; height: 120px; border-top: 3px double #CCC; text-align: left; padding-top: 5px; margin: 0px auto 0px auto; text-align: center; clear: both;	}

HTML:
????: NamePros.com http://www.namepros.com/web-design-discussion/39741-fine-firefox-0-9-bad-ie6.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="Content-Type" CONTENT="text/html; charset=ISO-2022-JP">
		<meta name="description" content="for moments like these">
		<title>:: wurh.com | for moments like these</title>
		<link rel="stylesheet" href="wurh.css" type="text/css">
		<base target="_self"> 
	</head>


<body>

<div id="container">

<!-- TOPBIT -->

<div id="topbit">
<img style="padding-top:2px;" src="topbit.gif" alt="for moments like these">
</div>

<div id="header">
<img src="header.gif" alt="On the Jubilee line, Feb 2004">
</div>

<div id="columns">
<div id="one">
<div id="onetext">
<h3>Lorem Ipsum Dolor Sit Amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet dui a magna ultrices varius. Proin eget lacus. Vestibulum mattis erat. Morbi orci enim, elementum a, luctus id, sagittis et, erat. Morbi vitae neque at sapien viverra gravida. Nunc eu tortor. Sed non tellus pulvinar nulla ornare bibendum. Pellentesque blandit nulla vel mauris. Fusce adipiscing nonummy wisi. Praesent risus justo, sodales id, porta sit amet, laoreet ac, augue. Nunc at pede. Nam felis. Nunc pellentesque hendrerit est. Aliquam et dui. Nam risus mauris, interdum et, sollicitudin a, nonummy quis, nisl. Ut nonummy sapien. Nullam auctor velit ac leo.</p>

<blockquote>Vestibulum consectetuer placerat pede. Etiam consectetuer risus ut ante. Sed eu leo. Morbi velit sapien, pretium vel, congue vel, rhoncus vitae, pede. Integer vitae elit non ante sollicitudin imperdiet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris sodales lobortis purus. Phasellus porttitor pretium sapien. Cras semper fringilla orci. Aenean pharetra. Donec urna purus, aliquet ut, tincidunt non, tincidunt non, elit. Maecenas ultricies.</blockquote>

<p>Donec at urna eu leo dignissim malesuada. Duis mattis lacus ac metus. Aliquam erat volutpat. Quisque et odio. Donec venenatis. Nulla facilisi. Etiam vel ligula in enim commodo hendrerit. Phasellus at massa. In malesuada, felis in elementum facilisis, mi sapien pharetra urna, in euismod orci massa et nisl. Suspendisse dolor. Etiam accumsan tincidunt velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla gravida est ac mi. In turpis libero, vehicula sed, commodo vitae, tincidunt eget, massa. Sed ullamcorper dui ut metus. Duis mollis.</p>
</div>
<div class="comments">§ 13 Jul 2004 | 5 comments </div>
</div>

<div id="two">
<div class="midtext" style="padding: 10px 0px 6px 10px">
<img class="floatquote" src="quote.gif" alt="quote"><h2>I've said it before, and I'll say it again...<br>Ay Caramba!</h2></div>

<div class="twotext">
<img src="nav2.gif" alt="navigate">
<div class="colbits"><a href="wurh.html">Home</a><br>
<a href="#">About</a><br>
<a href="#">Lucid</a><br>
<a href="#">Elsewhere</a><br>
</div>
</div>

<div class="midtext">
<a href="#"><img style="padding: 8px 0px 9px 0px;" src="pictures.gif" border="opx" alt="i take pictures."></a>
</div>

<div class="twotext">
<img src="mixtape2.gif" alt="mixtape">
<div class="colbits">
<p class="mixtape"><img class="floatleft" src="felt.gif" alt="Goldfrapp - Felt Mountain" width="50" height="50"><b><a href="#">Utopia by Goldfrapp</a></b><br>
For annoying the hell out of the neighbours. Lorem ipsum dolor sit amet.

<p class="mixtape"><img class="floatleft" src="alphabetical.gif" alt="Phoenix - Alphabetical" width="50" height="50"><b><a href="#">Run by Phoenix</a></b><br>
For eating croissant with. Lorem ipsum dolor sit amet.<br><br>

<p class="mixtape"><img class="floatleft" src="win.gif" alt="The Vines - Winning Days" width="50" height="50"><b><a href="#">Ride by The Vines</a></b><br>
Just like in the iPod ad. Lorem ipsum dolor sit.<br><br>
</div>
</div>

<div class="twotext">
<img src="links.gif" alt="links">
<div class="colbits">
<table width="100%">
<tr><td valign="top">
<a href="#">28mm</a><br>
<a href="#">anonymous lawyer</a><br>
<a href="#">a.wholelottanothing</a><br>
<a href="#">clikbang</a><br>
<a href="#">chromogenic</a><br>
</td>
<td valign="top">
<a href="#">28mm</a><br>
<a href="#">anonymous lawyer</a><br>
<a href="#">a.wholelottanothing</a><br>
<a href="#">clikbang</a><br>
<a href="#">chromogenic</a><br>
<b><a href="#">more >></a></b><br>
</td>
</tr>
</table>
</div>
</div>

</div>

<div id="bottombit">
<p style="text-align:center;font: 8px verdana;">© 2004 XCE. <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/">SOME RIGHTS RESERVED</a></p> 
</div>
</div>
</div>
</body>
</html>

Thanks for helping!

armstrong · 07-21-2004, 02:11 AM

Error 404 here, using Netscape 7.1.

pasha · 07-21-2004, 02:55 AM

Sorry, my bad - the correct address is: http://www.wurh.com/test/wurh.html

Really sorry about the horizontal scroll, I didn't realise there wasn't page breaks.

07-21-2004, 02:11 AM	#2 (permalink)
armstrong Man from Manila Join Date: Jul 2003 Location: The Net Posts: 6,025	Error 404 here, using Netscape 7.1. __________________ Apollo's excellent 3-letter .BIZ auction; $1 starting bid!

07-21-2004, 02:55 AM	THREAD STARTER #3 (permalink)
pasha New Member Join Date: Jul 2004 Posts: 2	Sorry, my bad - the correct address is: http://www.wurh.com/test/wurh.html Really sorry about the horizontal scroll, I didn't realise there wasn't page breaks.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)