By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,625 Members | 2,261 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,625 IT Pros & Developers. It's quick & easy.

Problem with CSS not resizing form controls within IFRAMES

P: n/a
Ben
Hi,

I'm having trouble with the CSS apparently not working fully on the form
input fields when inside an iFRAME. The problem is that if I resize the
text size on the test.html page(see below) the controls inside the iframe do
not resize. However, if I view the source.html by itself I'm able to resize
both text and input box size.

I'm using IE 6.0, but this is also broken on Netscape 7.0 as well. Can
anyone think of work arounds that don't include removal of iframes? :)

Here's the simple HTML page:

test.html
<IFRAME
title=iFrame name=iFrame
src="source.html" frameBorder=0
width=560 height=500></IFRAME>
source.html
------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<LINK href="foo.css" type=text/css rel=stylesheet>
<table class="myBody" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="small">
Search Title
<select class="small-input" name="searchBy">
<option value="0" selected="selected">Item One</option>
<option value="1">Item Two</option>
<option value="2">Item Three</option>
</select>
<input class="small-input" name="searchValue" value="" type="text"
size="24">
</td>
</tr>
<tr>
<td class="small">This is an example of some small text</td>
</tr>
</table>

foo.css
-------
..myBody
{
background-color: #FFFFFF;
font-family:tahoma;
color:#000000;
padding-left:0px;
padding-right:0px;
padding-top:0px;
padding-bottom:2px;
text-align=left
}
..myBody .small-input
{
border: 1px solid #999999;
font-family:tahoma;
font-size:100%
}
Jul 20 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
Ben wrote:
I'm having trouble with the CSS apparently not working fully on the form
input fields when inside an iFRAME. The problem is that if I resize the
text size on the test.html page(see below) the controls inside the iframe do
not resize. However, if I view the source.html by itself I'm able to resize
both text and input box size.

I'm using IE 6.0, but this is also broken on Netscape 7.0 as well. Can
anyone think of work arounds that don't include removal of iframes? :)


The iframe is a separate document so you will need to reference any
stylesheets in that document as well.

The stylesheet in the main document does not apply to the iframe.

--
Klaus Johannes Rusch
Kl********@atmedia.net
http://www.atmedia.net/KlausRusch/
Jul 20 '05 #2

P: n/a
Ben
Klaus,
As you can see from my original post in source.html I have the link to
the style sheet. Where are you suggestion I put the reference to the style
sheet? I believe I have it in the correct place where the CSS should be
rendered.

Thanks,
Ben

"Klaus Johannes Rusch" <Kl********@atmedia.net> wrote in message
news:2k*************@uni-berlin.de...
Ben wrote:
I'm having trouble with the CSS apparently not working fully on the form
input fields when inside an iFRAME. The problem is that if I resize the
text size on the test.html page(see below) the controls inside the iframe do not resize. However, if I view the source.html by itself I'm able to resize both text and input box size.

I'm using IE 6.0, but this is also broken on Netscape 7.0 as well. Can
anyone think of work arounds that don't include removal of iframes? :)


The iframe is a separate document so you will need to reference any
stylesheets in that document as well.

The stylesheet in the main document does not apply to the iframe.

--
Klaus Johannes Rusch
Kl********@atmedia.net
http://www.atmedia.net/KlausRusch/

Jul 20 '05 #3

P: n/a
> From: "Ben" <mo*****************@yahoo.com>
.myBody .small-input
{
border: 1px solid #999999;
font-family:tahoma;
font-size:100%
}


I believe that code has a mistake. You're supposed to have a comma, not
a space, between selectors that apply to the same group of styles.
See the following document:
http://www.w3schools.com/css/css_syntax.asp
in particular the following example:
h1,h2,h3,h4,h5,h6
{
color: green
}
Jul 20 '05 #4

P: n/a
On Sun, 08 Aug 2004 21:49:34 -0700, re*****@Yahoo.Com
<Ro********@YahooGroups.Com> wrote:
From: "Ben" <mo*****************@yahoo.com>
.myBody .small-input
{
border: 1px solid #999999;
font-family:tahoma;
font-size:100%
}


I believe that code has a mistake. You're supposed to have a comma, not
a space, between selectors that apply to the same group of styles.


As it stands, the above style applies to any element classed as
"small-input" which is a descendant of an element classed as "myBody".
Perhaps the OP intended this, I do not have the rest of the thread in my
newsreader.
Jul 20 '05 #5

P: n/a
Neal <ne*****@yahoo.com> wrote in news:opscf8btrs6v6656
@news.individual.net:
On Sun, 08 Aug 2004 21:49:34 -0700, re*****@Yahoo.Com
<Ro********@YahooGroups.Com> wrote:
From: "Ben" <mo*****************@yahoo.com>
.myBody .small-input
{
border: 1px solid #999999;
font-family:tahoma;
font-size:100%
}
I believe that code has a mistake. You're supposed to have a comma, not a space, between selectors that apply to the same group of styles.


As it stands, the above style applies to any element classed as
"small-input" which is a descendant of an element classed as "myBody".
Perhaps the OP intended this, I do not have the rest of the thread in

my newsreader.


Here is the code from the other post, so Robert is incorrect and Neal is
insightful:

<table class="myBody" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="small">
Search Title
<select class="small-input" name="searchBy"> ...

--
In a room with thirty-seven people, never have everybody shake each
other's hand.
Jul 20 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.