IE8 vs Chrome

HTML & CSS
1

New Upload . . .

Please take a look at this page in IE8 and Chrome

http://www.propertieswithstyle.com/cdmmap.html

There is a background-image behind the search map.

In viewing this in IE 8 you can see where the background image should end. Where the white stops just above the three flags.
That white is in the iframe.

Now look at this page in Chrome. Remember I asked about transparency? Messy for sure.

Also, the width of the background image is different than in IE8. WHY?

My background image covers that portion of the transparency that Chrome does not.

Should I remove the image from the #maincontent so I can give it a margin-top?

I need to move it down without moving the paragraph or map title.

How would I accomplish that in css?

Here is the css where the map and other content is located.


#maincontent{float:right;
	     width:880px;
	     position:relative;
	     background-image: url(gray4b32.jpg);  /* background image for the iframe */				
	     margin-left:320px;
}

Any ideas?

Thanks . . . Rick

2

Hi,

I’ve already given you the answer to the transparency question in the other thread so I’m not sure what you didn’t understand.

If you want the iframe to be transparent in IE8 then add the allowtransparency="true attribute to the iframe.

e.g.
<iframe allowtransparency=“true” etc…

If on the other hand you want all browsers to have a white background then remove that attribute and set the iframe’s background to white with css.

iframe{background:#fff}

Also, the width of the background image is different than in IE8. WHY?

I’ve no idea what you mean there or where you are talking about. A background image won;’ change but maybe the area the image occupies is different but I didn’t notice anything specific apart from normal differences but then again I may be looking at something else as it is unclear which image you are talking about.

3

I’m not sure I understand what you’re asking either, but in my view your page has a much bigger problem. I’m using a 1280px x 1024px monitor, with my default font size set to a standard 16px, and even then it’s not wide enough to accommodate your page; the navigation is disappearing under the map.

On a smaller screen size, even less of the menu is visible.

4

I’ve seen that also - in Chrome but not in IE8.

See the attached as of this morning.

I’m sorry everyone but this is still Greek to me!

Thanks . . … Rick

5

It looks like the font you are using is being rejected by Firefox/Chrome:

Error console message:


Error: downloadable font: rejected by sanitizer (font-family: "Tangerine" style:normal weight:normal stretch:normal src index:0)
source: http://www.propertieswithstyle.com/css/fonts/Tangerine_Regular-webfont.eot
Source File: http://www.propertieswithstyle.com/css/mapsearch.css
Line: 0
Source Code:
@font-face {   font-family: "Tangerine";   font-style: normal;   font-weight: normal;   src: url("../css/fonts/Tangerine_Regular-webfont.eot"); }

I don’t know why its being rejected as I haven’t felt the need to mess about with extra fonts but maybe you need to go back to font-squirrel and get them all packaged up properly again.

Referring to my earlier answer you can apply a class to the iframe in question and then apply the background colour using the class if that’s what you wanted. If you want the iframe transparent then add the allowtransparency=“true” directly into the iframe tag.