Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS and iFrame

Status
Not open for further replies.
k4ghg

k4ghg

Technical User
Dec 25, 2001
191
US
I am having problems using CSS with the following iframe that displays a rotating banner exchange image and was wondering if someone might see something I am missing:

<iframe src=" width="468" height="60" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" vspace="0" hspace="0"><br></iframe>

I have tried using the following CSS as both a named class and a <div> with the iframe, without too much luck:

iframe{
display: block;
padding: 0;
margin-bottom:auto;
margin-top: auto;
margin-left: auto;
margin-right: auto;
width: 468px;
height:60px;
border:none;
overflow:hidden;
}

The size (even-though, I used the original dimensions) is not correct and the banner is not centered in the iframe. Also, the scrollbars appear.

I was wondering if I could replace the iframe with an < a href...></a>. Also, does anyone have an idea why the "&size=2" is passed on with the php?

Any help and or suggestions are appreciated. Thanks... Ronnie
 
Sort by date Sort by votes
Also, does anyone have an idea why the "&size=2" is passed on with the php?
Click to expand...
means what exactly?

It's part of the URL you call to show in the iframe so it will have some relevance as to which remote page is returned one would assume.

The CSS rules applied to the iframe affect ONLY the iframe itself NOT the page contained in the frame.


Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Upvote 0 Downvote
Hi Chris - Thanks for getting back to me. Do I understand correctly that the "...width="468" height="60" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" vspace="0" hspace="0"..." relates to the iframe; and my css relates to how this iframe is displayed? Therefore for example, if the iframe is width= "468", than the css should be {width: 468+x;}? Is there a way to have my page's CSS display the style of the iframe? Thanks again... Ronnie
 
Upvote 0 Downvote
Both sets relate to how your iframe is displayed.

However they do not affect the contents of the iframe.

In your case your iframe will appear centered in its container, with no border, and no scrollbar. However its contents, that is whatever image.php produces with those parameters may not necessarily be centered inside the iframe.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
Thanks... I think I get it and have one more question. If currently the iframe contain tent is centered, would there be a reasonable explanation why it's not centered when I use the CSS to center the iframe in my container? As I understand the explanations my CSS, supports how the iFrame (not its content) is displayed and should have no impact on the content of the iframe. Thanks... Ronnie
 
Upvote 0 Downvote
It depends in what the content is centered in and how its being centered.

For instance this would appear centered in an iframe:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head><title>iframe</title>
<style type="text/css">

#mydiv{
margin-left:auto;
margin-right:auto;
width:300px;
height:60px;
border:2px groove #ffffff;
background-color:#ececec;
color:#464646;
line-height:60px;
text-align:center;
}

</style>
</head>
<body>

<div id="mydiv">This is a centered DIV</div>

</body>
</html>


This would not:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head><title>iframe</title>
<style type="text/css">
#wrapper{
width:800px;
margin-right:auto;
margin-left:auto;
}

#mydiv{
margin-left:auto;
margin-right:auto;
width:300px;
height:60px;
border:2px groove #ffffff;
background-color:#ececec;
color:#464646;
line-height:60px;
text-align:center;
}

</style>
</head>
<body>
<div id="wrapper">
<div id="mydiv">This is a centered DIV</div>
</div>
</body>
</html>

Since the wrapper div in the second example is larger than the frame, it simply starts flush with the left side of the ifrmae, and the centered div inside is centered in relation to that, not the iframe.

So you would see this:

iframe1.jpg


When this happens:
iframe2.jpg






----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
690
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
651
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
533
PeDa
PeDa
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
170
lmcate
lmcate

Part and Inventory Search

Sponsor

Back
Top