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 ?

[jscheuer1]

Looks good here too. The audi/audi001.html has the cloud background because it shares the common stylesheet:

<link href="../style.css" rel="stylesheet" type="text/css" />

You could remove that, but there are other styles on it that it needs, like:


body {
margin:0px;
padding:0px;
. . .

So, as long as what we have now is working, leaving it is fine because it's already loaded on the top page anyway.

[theremotedr]

I have now added the code to all the pages and now fine.
Did you notice the following when you were on the page.
Go here http://www.theremotedoctor.co.uk/audi_keys.html
Then click on Flip Remote 3 Button.
YOu now see the photo and price to the right.
Put your cursor over Accessories and you will see that the option list available go behind the photo and prices as opposed to in front thus not being about to see a couple on the bottom line.
This is also the same for if you place the cursor over keys and remotes.

[jscheuer1]

That only appears to be an issue in IE 8 and less. You might be able to use an iframe for it instead of an object and have it be covered by the drop downs, but I'm not sure. On the top page, instead of:


<script type="text/javascript">
//<![CDATA[
// written by: Coothead
function updateObjectIframe(which){
document.getElementById('content_price').innerHTML = '<'+'object id="foo" name="foo" height="575" width="300" type="text/html" data="'+which.href+'"><\/object>';
}

//]]>
</script>



try:


<script type="text/javascript">
//<![CDATA[
// written by: Coothead
function updateObjectIframe(which){
document.getElementById('content_price').innerHTML = '<'+'iframe id="foo" name="foo" height="575" width="300" src="'+which.href+'"><\/iframe>';
}

//]]>
</script>



It may have to be tweaked to make sure there are no scrollbars. But just check to see if it takes care of the problem or not first.

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

[theremotedr]

When that code is applied its still behind the photo.
Also when you click on the black/gret box for the item for sale the phot and price open in a new page and not in the container where we sorted the scroll bars ?

[theremotedr]

Forget the last message as i might have done it wrong.
Let me add code to a few so you can check.

[theremotedr]

Ok
I have now applied the code to all the pages and i think its ok now.
Please check a few options and see what you think.
I will pick up reply in the morning.

Thanks very much for your time and help today.

[jscheuer1]

Looks good here.

[theremotedr]

Many thanks,will not mark as resolved.