[sleepingfish]

Putting the basics together for a web interface.

I'm designing the page so that it fits perfectly when maximized in a 1024 x 768 resolution (but also works at other resolutions). But I'm having problems with either the padding or margin differences between Mozilla and IE.
At the moment, it fits fine in IE, but is about 15 pixels short in Mozilla. I know it's some simple tweak somewhere but I can't find the bugger and want to get it sorted at this early stage before the interface gets any more complex.

The file's here

(css here)

Thanks muchly in advance

[sleepingfish]

One more thing, I was hoping to use Trebuchet MS but it doesn't seem to be working, is this because:

a) Trecuchet isn't exactly a system font, what a fool

b) The css font family needs some jiggery-pokery

More muchly thanks

[smallbeer]

I'm drunk but put

body {
margin: 0;
padding: 0;
}
in, and see what happens.

[cam]

drunk at 7pm! day off or lightweight?

[smallbeer]

Originally Posted by i_am_cam

drunk at 7pm! day off or lightweight?

day off.

hic.

bit of a lightweight too actually.

[sleepingfish]

You're a drunken (or hungover by now I'm guessing) legend Smallbeer, cheers.

[sleepingfish]

Ok then, now I've got the grey area (#calendarView) at 100% width (relative positioning). It's pushing further than the browser window because of padding and margins (I assume) so I'm trying to clip the area, but it's not playing ball, anybody know why?

(lazy scrollers click here)

[smallbeer]

Just get rid of the width: 100% and all that other crap.

Does this work?

#calendarView {
	border: 1px solid #CCCCCC;
	padding: 5px;
	background-color: #CCCCCC;
	margin: 0px 5px 5px;
	position: relative;
	
}

[smallbeer]

If you do get rid of the height: 510px you'll have to put in a clearer div...

<div id="calendarView">

	<div id="time">time</div>
	<div id="diary">diary 1</div>
	<div id="diary">diary 2 </div>
	<div id="diary"></div>
<div class="clear">&nbsp;</div>
</div>

.clear {
clear: both;
height: 0;
line-height: 0;
}
* html .clear {
font-size: 0;
}

[sleepingfish]

Thanks, works a treat in Mozilla, but not in IE.

[smallbeer]

Get rid of the position: relative?

[sleepingfish]

Bingo! If you're ever in Leicester i'll buy you a small beer

[sleepingfish]

Argh

I'm not really trying to get Smallbeer to do the whole thing, honest.

It's just that, it all works fine in IE, it has a minimum width of 975ish, if the browser goes any smaller you have to scroll, any larger and it fills the window: great.

The problem is that if the browser goes smaller in Mozilla, then the diary boxes wrap below - they don't stay in a line like in IE, causing the grey area to scroll to cope with the height of two diary boxes. Is this a "Display" property that I'm missing?