CSS, Overflow, IE, Firefox, Safari, MAC and PC, damn!

[arturo]

Hi guys, I did a website using some portions of CSS to control the aspect of some portions of the elements within the site, I'm having a problem with a iframe, in the Internet Explorer and Safari isn't working, using Firefox works pretty good, but my problem it's with IE 6 and 7, and Safari ( I'm working on a mac ), the way I call the iframe is like this:

<center>
<iframe src="Restaurants.php" width="375" height="192" scrolling="auto"></iframe>
</center>

and the style to that is:

iframe {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
overflow-x: hidden;
}

Can someone tell me what I'm doing wrong please?

This is the site:

http://www.provotownsquare.net/

Thanks a lot guys

Arturo

[wes_design]

maybe try putting CSS on the scroll bar too?http://forums.devshed.com/css-help-116/iframe-css-39797.html

or try over-flow:auto;

[BetaWar]

Okay, I would say a couple of things.

<center>
<iframe src="Restaurants.php" width="375" height="192" scrolling="auto"></iframe>
</center>

You have the above already, but that gives the scrolling style for the iframe. Later in the CSS you attempt to append the scrolling style, it will just confuse a browser doing it this way. So either take out the scrolling="auto" in the iframe tag or the overflow-x: hidden; in the CSS, they can't both work.

iframe {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
overflow-x: hidden;
}

Above if your current style for the iframe. The problem here is that IE and some other browsers are not quite using standard style sheets and things to make them a bit different from other browsers. This causes problems, as you know. border-*-style for instance does not exist in IE. So you will have to use border-* instead. It is a lucky/good thing that border-* does work in the other browsers (like FF) too.

So here is what I would say you should change your code in the 2 areas to:

<center>
<iframe src="Restaurants.php" width="375" height="192"></iframe>
</center>

and the style of:

iframe {
border: 0px;
overflow-x: hidden;
}