Layout different in IE and Firefox.

drop the width from #right

according to IE's warped logic 100% is the full width of the body. since the #left and #sidebar have widths you should be ok to let #right do without. It will expand to fill the available space naturally.

Cheers Chris, that has definately sorted thigs out a tad, there is now, however, a slight gap between #left and #right.

I guess I am just going to have to fiddle around with margins to sort that one.

Tom.

That gap is not visible in any Mac browser, for what it's worth, Thomas - might be the WinIE 3-pixel gap problem?

Looking very nice.

Thanks for that Helen. Better rush of to Google to do some research on that then.

It definately looks like a 3 pixel gap.

yeh, i noticed that. I am not sure what is causing it, especially as I added a div {margin:0; padding:0} to make sure there were no extraneous bits sneaking in.

FYI - the margin-left on #right is missing its "px".

if you can get away without designing things that have to be pixel perfect your life will be a whole lot easier

I know what you mean about pixel perfect layouts Chris, it is such a pain.

But the charity I am designing for want the layout of their site to be similar to http://www.stopdesign.com/, so unmfortuneately, there is no way around it.

To be honest, I spend a lot more time on a backend Content Management System for these types of people so dont have the time to get into the nitty gritty of CSS too often.

Thanks everyone for the help so far, I appreciate it.

Tom.

i guess you are using a CMS then - moveable type? or mambo/postNuke et. al.?

Did you grab stopdesign's css and checkout how they have done it?

I usually write my own custom CMS using php and mysql and am doing so in this case. Other times, I make use of Textpattern, which I find to be a beautiful and lightweight CMS which is very easy to create good templates for. http://www.textpattern.com

I did take a look at stopdesigns css, but they use a massive amount of DIVS and I couldnt make head nor tale of it,

Using a CSS hack and hiding the a style from all browsers except IE/WIN, i have been able to eliminate the gap between the two divs with this css:

/* Hide from IE5-mac. Only IE-win sees this. \*/
* #left {
margin-right: -3px;
}
/* End hide from IE5/mac */

Unfortuneatley, there is a slight overhang on the right of my #right DIV now which as yet I have been unable to resolve.

Many thanks, Tom.

Tom that needs to be

* html #left

If IE is to be the only one to read it .

Hugo.

Thankyou hugo.

I think I have finally cracked it!

* html #left {
margin-right: -3px;
}
* html #right {
margin-right: 3px;
}

I always try to develop in a way in which all browsers display the content correctly and Internet Explorer consistently cause me problems

Can anyone confirm that the layout looks ok opn a MAC?

Look A-1 on all the major Mac browsers.

http://www.bpdresources.com/thomasemerysafari.jpg for example. (snap is blurry, bad quality -looks great onscreen)

Thanks a lot Helen. One day, i'm gonna get me one of those purty power books.

Thankyou all.

slightly off topic

Helen (or any other Mac users), can you tell me how this looks in a mac browser.

thanks in advance

Sure - how what looks?

:oops:

http://assedatioun.jalakai.co.uk/test.php

Here ya go:

http://www.bpdresources.com/assedasafari.jpg

http://www.bpdresources.com/assedafirefox.jpg

http://www.bpdresources.com/assedamacIEi.jpg

http://www.bpdresources.com/assedaomniweb.jpg

http://www.bpdresources.com/assedanetscape.jpg

Lookin' sharp!

thanks muchly.