Interent explorer display issue

[theremotedr]

I have made a site with the help of my friend & checking out things as i go along.

I have noticed that my search option on the site works as it should in Firefox / Chrome & Safari, but Internet explorer is a different situation.

Below is the site in question.
http://www.theremotedoctor.co.uk/

If you do the following steps in IE you will see the problem.
Hover over keys & remotes
Then select Audi.

The problem is now see.
You should just click on Flip Remote 3 Button and a photo of this is then shown to the right.
If you cancel out the error message then select the option you then see a part of the home screen instead ?
This is the same result for the other search options.

As mentioned above FRirefox/Chrome & safari all work correct.
Is there some code i could add to each page so IE shows the correct item with no error message.

[jscheuer1]

It works in IE 9+. In IE 8 it does what you're saying. This has little to do with css. I say little because in IE 9 and 10 there are scrollbars on the content once it loads. Setting:

object {
overflow: hidden;
}

in the stylesheet may help that, or inline with the code that generates the new object tag. Or simply increasing the width and/or height of the generated tag, or getting rid of overflow on the page that it loads into, etc.

The problem in IE 8 is with the use of the object tag, specifically its data attribute. You have it set initially to "" (nothing). Try using "about:blank" - that might fix it. I'm thinking the browsers where it works see the empty data attribute as empty, whereas IE 8 sees it pointing to the page itself.

But that might not be the problem at all. It's worth a try though.

The browser cache may need to be cleared and/or the page refreshed to see changes.


Later it occurred to me that instead of setting the data to "about:blank", simply having no data attribute might work.

[theremotedr]

Thanks for the input.
I have added "about:blank" as suggested and there is now no error message.
What i see now is a blank box as you would expect.
I then continue to click on the selection and the item for sales photo is then shown.

I just need to see now how i can change from this blank box to a blue square,this would be after selecting the car manufacturers name and before making the selection of items for sale.

[jscheuer1]

Make a blank page with a blue background. Use it's address as the initial address for data instead of "about:blank". Or, instead of having an initial object tag there at all, just have a square empty div of the desired dimensions and background color.

I did a little experimenting and setting overflow hidden on the object doesn't seem to get rid of its scrollbars. Setting overflow hidden on the html and body tags on the page(s) you show through the object should take care of it.

This is very similar to using an iframe. Any reason why you're not?

[theremotedr]

Hi
What would be the correct code to use if my new file is called blank_page
Line of text in use at the moment <object data="about:blank" type="text/html" name="foo" width="300" height="525" align="center" id="foo">

[theremotedr]

This is a learning curve for me.
I have used <a href="blank_page" type="text/html" name="foo" width="300" height="525" align="center" id="foo" /></a> and seems top be ok.
I am now looking at removing the scrollbars

[jscheuer1]

Well, you shouldn't have a blank page named blank_page. The browser might not know what to do with it. You should do like blank_page.htm. But it would really be easier and make more sense to just have a blank blue div there instead of:

<!-- Show the price information when link clicked -->
<div class="price" id="content_price">
<object data="" type="text/html" name="foo" width="300" height="520" align="center" id="foo">
 
</object>
<!-- end of price and information screen -->

</div><!-- end content_price -->

Do this:

<!-- Show the price information when link clicked -->
<div class="price" id="content_price">
<div style="width: 300px; height: 520px; background-color: blue; margin: 0 auto;">
 
</div>
<!-- end of price and information screen -->

</div><!-- end content_price -->

The highlighted part gets overwritten anyway. It gets replace, not modified, so you can have anything you want there. When the button is clicked, a new object tag will replace it.

[theremotedr]

Hi,
I have now changed all my pages to the div suggestion above.
I have resized the container in the css file called content price & key image with various tests and what you now see when using Internet Explorer is just the scroll bar at the bottom of the listing.
These sizes now applied result in just the bottom scroll bar without the side scroll bar.
With this in place Chrome & Firefox show a small amount of cloud background.

I am unable to totally remove both the scroll bars,or with two scroll bars Chrome & Firefox then show a full photo without the cloud background at the bottom.

Any advise regarding this issue or is it a catch 22 situation ?

Many thanks for the help so far.

[jscheuer1]

IE 8 still has a scrollbar at the bottom. IE 9 + do not, and show a little of the cloud background there.

There are conditional comments that can be used to set browser specific styles for IE 9 and less. If the dimensions for the object tag are set in a stylesheet, which they can be, those conditionals could be used to tweak it for IE 8 and less in a separate stylesheet.

But, before we try that, try setting the width and height to what they were when you liked how it looked in the other browsers.

Then on the page that shows through the object tag (audi/audi001.html), put this in the head of the page:

<style type="text/css">
html, body {overflow: hidden;}
</style>

That could take care of the scrollbars in any browser, and if it works for IE, will solve the problem.

I would ask though, why is there even a cloud background on that page (audi/audi001.html)? It could have a solid blue background, then if part of the background were to show through, it wouldn't look so bad.

[theremotedr]

Hi,
I have put the sizes back so Chrome & Firefox are shown how i like.
I then added the code to the head as advised.
Looks good to me.

Please would you mind checking at your end.

The cloud background gives the page a bright fresh look.
Within the container of where we are cocentrating at the moment i do not know why the background is shown there ?