17 replies [Last post]
thomasemery
Offline
newbie
Last seen: 17 years 18 weeks ago
Joined: 2005-02-23
Posts: 7
Points: 0

After trawling the net for a possible solution or example of my layout, I stumbled across these forums.

My problem is the way in which different browsers render my layout.

Firefox displays how I would want the site to look whereas Internet Explorer does not place my sub columns alongside each other and stretches the overall layout. Eventually, I would like al of the divs to have an unspecified height so that they stretch to fit content.

My work in progress currently resides at http://www.thomasemery.co.uk/test.

My css is at http://www.thomasemery.co.uk/test/css/layout.css

Does anybody have any ideas why the layout is being shunted in INternet Explorer?

Many thanks, Tom.[/url]

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 40 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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.

thomasemery
Offline
newbie
Last seen: 17 years 18 weeks ago
Joined: 2005-02-23
Posts: 7
Points: 0

Layout different in IE and Firefox.

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.

Helen
Offline
Enthusiast
NYC
Last seen: 17 years 24 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

Layout different in IE and Firefox.

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.

thomasemery
Offline
newbie
Last seen: 17 years 18 weeks ago
Joined: 2005-02-23
Posts: 7
Points: 0

Layout different in IE and Firefox.

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

It definately looks like a 3 pixel gap.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 40 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Layout different in IE and Firefox.

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 Smile

thomasemery
Offline
newbie
Last seen: 17 years 18 weeks ago
Joined: 2005-02-23
Posts: 7
Points: 0

Layout different in IE and Firefox.

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.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 40 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Layout different in IE and Firefox.

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?

thomasemery
Offline
newbie
Last seen: 17 years 18 weeks ago
Joined: 2005-02-23
Posts: 7
Points: 0

Layout different in IE and Firefox.

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 25 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Layout different in IE and Firefox.

Tom that needs to be

* html #left

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

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thomasemery
Offline
newbie
Last seen: 17 years 18 weeks ago
Joined: 2005-02-23
Posts: 7
Points: 0

Layout different in IE and Firefox.

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 Laughing out loud

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

Helen
Offline
Enthusiast
NYC
Last seen: 17 years 24 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

Layout different in IE and Firefox.

Look A-1 on all the major Mac browsers. Smile

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

thomasemery
Offline
newbie
Last seen: 17 years 18 weeks ago
Joined: 2005-02-23
Posts: 7
Points: 0

Layout different in IE and Firefox.

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

Thankyou all.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 40 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Layout different in IE and Firefox.

slightly off topic Cool

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

thanks in advance

Smile

Helen
Offline
Enthusiast
NYC
Last seen: 17 years 24 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

Layout different in IE and Firefox.

Sure - how what looks? Wink

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 40 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Layout different in IE and Firefox.

Helen
Offline
Enthusiast
NYC
Last seen: 17 years 24 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

Layout different in IE and Firefox.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 40 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Layout different in IE and Firefox.

thanks muchly.

Laughing out loud