i can see why devs like firefox...

its the little things..

for example - you have a site with a black background - and an iframe. on top of it.

there is a link to an image (not on a page - just the image) in the iframe.

Firefox:  auto inherits the black background of site.  It also auto zooms out anyimage that doesnt fit within iframe height

IE: uses white bg - ignores that background is black - and any big image it opens full - even when no scrolling is the default on the iframe


**im in ie7 - does ie8 fix this?

heres a sample:
http://www.jamiegrant.com/brand.htm  (these arnt the images - just a test.  yes.. i love coverflow

does above work in ie8 - like FF displays it?

ps - i "optimised html" ... happy?

It doesn't. Your pages do all cause whatever page is loaded after that to have a "shadow" of your page over them.

And it still loads way, way, way, way, way, waaaaaaaaaaaaaaaaaaaaaay too slow.

Sven Groot said:

It doesn't. Your pages do all cause whatever page is loaded after that to have a "shadow" of your page over them.

And it still loads way, way, way, way, way, waaaaaaaaaaaaaaaaaaaaaay too slow.

i get loading images icon for 3 seconds = 17 - 640-ish size images in the flow

*this page is fast...  http://www.jamiegrant.com/

jamie said:

Sven Groot said:

*snip*

i get loading images icon for 3 seconds = 17 - 640-ish size images in the flow

*this page is fast...  http://www.jamiegrant.com/

It takes about 30 seconds here.

It's insane! That page contains 33 objects. That's about 23 more than I'd normally recommend. And the total size is nearly 2MB! That's 1.9MB more than I'd recommend.

Sven Groot said:

jamie said:

*snip*

It takes about 30 seconds here.

It's insane! That page contains 33 objects. That's about 23 more than I'd normally recommend. And the total size is nearly 2MB! That's 1.9MB more than I'd recommend.

well... i could use tiny coverflow images... but whats the point then?

i figure they are already small - 604w x height

edit - what is your net speed?

also - is there a way to tell IE to have a black background when it opens a page with just an image?
i tried playing around with style - bg black on the iframe itself- didnt work (youd think it would)

jamie said:

Sven Groot said:

*snip*

well... i could use tiny coverflow images... but whats the point then?

i figure they are already small - 604w x height

edit - what is your net speed?

also - is there a way to tell IE to have a black background when it opens a page with just an image?
i tried playing around with style - bg black on the iframe itself- didnt work (youd think it would)

I don't see the point of the page at all. It loads a whole bunch of images, but apparently only shows one of them. How do I get to the others?

My speed is 40Mbps. That's not the issue. The issue is that I'm on the other side of the pacific and have a considerable lag to your server. It's fast for you because you're probably close to your server.

Sven Groot said:

jamie said:

*snip*

I don't see the point of the page at all. It loads a whole bunch of images, but apparently only shows one of them. How do I get to the others?

My speed is 40Mbps. That's not the issue. The issue is that I'm on the other side of the pacific and have a considerable lag to your server. It's fast for you because you're probably close to your server.

use the scroll wheel?  or the slider?  or click the images?

*is this 1998? are you in netscape?  (hah--err..kidding.  i could probably make the jpgs low or medium res - they are hi (or gifs)

that should get the page size down (ps the page size is tiny- its just the 17 images in CF

jamie said:

Sven Groot said:

*snip*

use the scroll wheel?  or the slider?  or click the images?

*is this 1998? are you in netscape?  (hah--err..kidding.  i could probably make the jpgs low or medium res - they are hi (or gifs)

that should get the page size down (ps the page size is tiny- its just the 17 images in CF

Using the scroll wheel works, but it's completely not obvious. I don't see a slider. Clicking the images opens them in an iframe but I don't see what I can do after that.

Sven Groot said:

jamie said:

*snip*

Using the scroll wheel works, but it's completely not obvious. I don't see a slider. Clicking the images opens them in an iframe but I don't see what I can do after that.

yes - it opens them in an iframe - and in IE the bg is white.. in ff its black

in ie - its zoomed in with no way to zoom out.  in ff its zoomed out with a way to zoom in





ps - also there will be a back button and a message about the scroll wheel.  im just trying to get it to work first

jamie said:

Sven Groot said:

*snip*

yes - it opens them in an iframe - and in IE the bg is white.. in ff its black

in ie - its zoomed in with no way to zoom out.  in ff its zoomed out with a way to zoom in





ps - also there will be a back button and a message about the scroll wheel.  im just trying to get it to work first

You really need to spend some quality time with Photoshop's Save for web feature. Pretty much all of your images are too large. Even the background gradient is over 12KB.

jamie said:

Sven Groot said:

*snip*

yes - it opens them in an iframe - and in IE the bg is white.. in ff its black

in ie - its zoomed in with no way to zoom out.  in ff its zoomed out with a way to zoom in





ps - also there will be a back button and a message about the scroll wheel.  im just trying to get it to work first

Ok, that isn't remotely what the site looks like in IE8.

This is what it does look like:


So I don't know where you got that coverflow stuff from, but it's horribly broken in IE8. Add to that the slow loading times and the errors it causes when you navigate away from any page on your site, and you've got one useless page there.

Sven Groot said:

jamie said:

*snip*

Ok, that isn't remotely what the site looks like in IE8.

This is what it does look like:


So I don't know where you got that coverflow stuff from, but it's horribly broken in IE8. Add to that the slow loading times and the errors it causes when you navigate away from any page on your site, and you've got one useless page there.

IE8 in Compatibility Mode doesn't match IE7's rendering of sites at times. Maybe because it's beta? I don't know. Is that what you were using Sven? The Compat button isn't visible on your toolbar.

W3bbo said:

Sven Groot said:

*snip*

IE8 in Compatibility Mode doesn't match IE7's rendering of sites at times. Maybe because it's beta? I don't know. Is that what you were using Sven? The Compat button isn't visible on your toolbar.

The page has no DOCTYPE, so it renders in quirks mode; compatibility mode doesn't apply (that's why the button is missing). Why IE8 would give different results in quirks mode than IE7, I don't know. Possibly the script involved in this coverflow stuff doesn't identify IE8 correctly?

EDIT: If I use the IE8 dev tools to force the browser into IE7 mode, it works correctly. Looks like a browser sniffing error to me.

For your issue, try this in your primary screen mode stylesheet:

iframe { background-color: inherit; }

IE uses the color defined in the Windows settings for the Window background color in input and text fields as its default. Not inheriting the background color in iframes is the right behavior by the way, this means Firefox does it wrong, also with resizing the image.

PS: Put a DOCTYPE in. For design only purposes, the XHTML1.0 Transitional is best. Make sure this is the first in any Document you have:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

thanks - ill add those

for the record - this site works here in FF, chrome, safari and IE7

all but IE7 render the iframe BG black (auto inherit)
and I guess IE8 breaks it entirely

*no wonder I used IE8 for 15minutes and uninstalled it months back.
and that was due to normal sites not rendering correctly like CNN

* i also havent optimized any of the graphics yet

Dodo said:

For your issue, try this in your primary screen mode stylesheet:

iframe { background-color: inherit; }

IE uses the color defined in the Windows settings for the Window background color in input and text fields as its default. Not inheriting the background color in iframes is the right behavior by the way, this means Firefox does it wrong, also with resizing the image.

PS: Put a DOCTYPE in. For design only purposes, the XHTML1.0 Transitional is best. Make sure this is the first in any Document you have:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

What makes you say Firefox does it wrong, source? It's only a default value anyway - the browser is allowed to set its own defaults.

And Jamie, this isn't why developers like Firefox, we like it mostly because of Firebug and other handy addons.

Rowan said:

Dodo said:

*snip*

What makes you say Firefox does it wrong, source? It's only a default value anyway - the browser is allowed to set its own defaults.

And Jamie, this isn't why developers like Firefox, we like it mostly because of Firebug and other handy addons.

Because according to the standards, iframes do NOT inherit the parent's background, nor resize it's content to fit inside it's boundaries, if not specified otherwise. The default behaviour for iframes with larger content than their own size is displaying scrollbars, if they are not turned off just like an ordinary frame. And as you say, the default value is used, it is defined by either by the browser, or a value in the standards (where I think I read somewhere in a certain doctype or draft it's white, but I'm not so sure).

jamie said:

thanks - ill add those

for the record - this site works here in FF, chrome, safari and IE7

all but IE7 render the iframe BG black (auto inherit)
and I guess IE8 breaks it entirely

*no wonder I used IE8 for 15minutes and uninstalled it months back.
and that was due to normal sites not rendering correctly like CNN

* i also havent optimized any of the graphics yet

Jamie, I would recommend you do not put an XHTML DOCTYPE in. I agree wholeheartedly that you should use a DOCTYPE; this triggers standards mode in most browsers, and gets your CSS to render more consistently across browsers. However, your page is very obviously not XHTML, it's not even close. The primary requirement of XHTML is that the code is well-formed XML, and your page definitely isn't.

I don't mind your page not being XHTML, that's not a bad thing. Putting an XHTML DOCTYPE on it and lying about it, however, would be bad.

Instead I would suggest you use a HTML 4.01 Transitional DOCTYPE, which is what the page comes closes to (it still probably won't validate entirely, but nothing else comes closer).

This means your pages should start with the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

The "lang" attribute is optional, but never a bad idea.