HTML (YES HTML) and CCS troubles...

**toast** · November 10th, 2003, 04:22 AM

uoba, you could use Tantek's mid pass to filter ie5mac problems... www.tantek.com

Also, I've looked your site, you don't need any table here, come on... that's simple to do !

<div id="top"></div>
<div id="content"></div>

#top { height: /* your image height + your text's height + a few pixels */;
background: url(your_picture.jpg) no-repeat left bottom; }
#content { margin: 10px; background: #999; }
body { background: #fff; }

**uoba** · November 10th, 2003, 07:36 AM

Toast, this doesn't stretch the to bottom of the screen! Thanks anyway

**toast** · November 10th, 2003, 08:04 AM

Fix the height yourself (height: unit) and/or tell the float to shut up if the text wraps (float: none).

**uoba** · November 10th, 2003, 08:30 AM

Trying to fix the height as so it sticks to 10px away from the bottom of the screen at all times just doesn't work. This is what I was trying to achieve (which I've done with the current site)... the bottom positioning property works on every browser except... _ _ _ _ _ _ _ _ _ _

You've got 3 guesses

**toast** · November 10th, 2003, 12:05 PM

I'd say MSIE because of Big John : www.positioniseverythig.net I think the URL is. Doesn't fit your gaps, but still. Get the last line of your code with a big padding-top to throw it downscreen, that should do. But this problem does have a non-table solution. I recommend asking the css-discuss.com (or .org) list.

**Excalibur** · November 20th, 2003, 10:29 AM

Not sure if you guys got that CSS layout to work. if not, give this a shot should work for you.

CSS Code:

Code:

body {
	height: 100%;
}
.matte
{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #300;
}
.header
{
	width: 100%;
	height: 150px;
	background-color: #eee;
}
.main
{
	color: #fff;
}

HTML Code

Code:

<body>
<div class="matte">
	<div class="header">
		header
	</div>
	<div class="main">
		body
	</div>
</div>
</body>

**uoba** · November 20th, 2003, 01:57 PM

Almost... don't work in IE5 Mac

Roll up, roll up... next!

**Excalibur** · November 20th, 2003, 03:08 PM

Originally Posted by uoba

Almost... don't work in IE5 Mac

Roll up, roll up... next!

Oh well, I got a work around that works if you are javascript fluent. If the position of the .matte class is relivent the code works on IE 5, for Mac, BUT... breaks the other browsers.

Code:

Opera/NS/Safari code

.matte
	{
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #300;
	}

IE 5 modification

.matte
	{
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #300;
	}

So what you can do is have a browser detect for IE5 and have it just doa document write and swap out absolute to relative... hope that makes sense. Seems that there is just a bug with IE 5 on this issue with it basically doing all its formatting from the top

Thread: HTML (YES HTML) and CCS troubles...

LinkBack

Thread Tools

Give this a shot...

Bookmarks

Bookmarks

Posting Permissions