some parent CSS ignored from child

[peterpann]

parent page
#divmotto{
font-size:100%;
font-style:italic;
font-weight:bold;
float:center;
width:100%;
text-align:center;
background-color:#E4521E;
padding:0%;
clear:both;
color:#DCED8F;
margin:0%;
border:0%;
}
<div id="divmotto">my motto</div>
//page shows motto in centre of row across page
var usedLater = document.getElementById("divmotto").scrollHeight;
document.getElementById("divmotto").style.display = "none";
//then link to child page in iframe

child page
parent.document.getElementById("divmotto").style.display = "inline";
parent.document.getElementById("divmotto").style.visibility = "visible";
//motto shows text on left, width only sufficient for text, but font and colours okay.
//width:100%;text-align:center; properties seemingly ignored, all browsers.
How can I get width:100%; and text-align:center; correct ?
Thanks.

 

[ChrisHirst]

there is no such thing as float: center;

And you cannot centre an element that is 100% wide.

To horizontally center a block element in it's parent, the child has to have a width of less than 100% and it's left and right margins set to auto.

display: inline; makes a block element behave as an inline element would ie. it is only as wide as it's content plus left and right padding, so text-align center; has no visible effect.



Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[vacunita]

Also, pages in iframes are not affected by the parent page's CSS since they complete pages they have their own structure and CSS to go with it.



----------------------------------
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.

Web & Tech

 

[peterpann]

Chris, thanks for your help, okay now with parent.document.getElementById("divmotto").style.display = "block";