1 reply [Last post]
tebk77
Offline
Regular
Last seen: 7 years 17 weeks ago
Timezone: GMT-4
Joined: 2009-05-16
Posts: 42
Points: 49

Hopefully this will be easy to answer. I'm getting confused with how % and em units can affect sizing.

I have 2 almost identical web pages except that the

    *1st webpg. has 4 columns and the
    *2nd webpg. has 3 columns.

The columns' widths are in %. Text is in em units.

My main question is:
Why did the size of the "photos" in the 2nd column change on the new webpage?

The first web page that works is:
http://www.frankfordhistoricalsociety.org/fame1ca.html
Its CSS file is:
http://www.frankfordhistoricalsociety.org/HOFstyles3.css

THEN I saved a copy of the 2 files mentioned above for a new web page. In the following files I changed coding to acclimate to 3 columns. Here is the XHTML file:

http://www.frankfordhistoricalsociety.org/fame2.html
---and here is the coding:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>HSF Hall of Fame - 3 Equal Height Columns-CSS</title>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
	<meta name="description" content="4 Column CSS Demo - Equal Height Columns with Cross-Browser CSS" />
	<meta name="keywords" content="4 Column CSS Demo - Equal Height Columns with Cross-Browser CSS" />
	<meta name="robots" content="index, follow" />
	<link href="HOF2styles.css" rel="stylesheet" type="text/css" />
 
<!-- HOFstyles2-col2.css HAS PIC IN COL 2 HANGING OVER COL 3 -->
</head>
 
 
<body>
 
 
<div id="wrapper">
 
<div id="branding">
<img src="art/NEHF-upleft.gif" alt="Northeast Philadelphia Hall of Fame" style="height:100%; float:left;" />
</div>
 
<div id="bluebar">
&nbsp;
</div>
 
<div id="greenbar">
&nbsp;
</div>
 
<div id="container3">
	<div id="container2">
		<div id="container1">
			<div id="col1">
		        <!-- Column one start -->
 
                        <p class="col1head">Sponsored by</p>
 
                    	<br />
                        <p class="col1text">
                        Historical Society of Frankford<br />
			<br />
                        and<br />
			<br />                                
                        The Northeast Times<br />
			<br />
 
                        In Partnership with<br />
			<br />
			Holy Family University<br />
			<br />
                        and<br />
			<br />
                    	State Represent&shy;ative<br />
			Dennis M. O&#146;Brien<br />
                        </p>
			<!-- Column one end -->
			</div>
 
<div id="col2">
<!-- Column two start -->
<p class="right">Benjamin Rush&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
 
<img src="portraits/BenRush_test.gif" width="95%" alt="Benjamin Rush" />
</p>
<br />
 
<p class="left">&nbsp;&nbsp;Robert Purvis<br />
<img src="portraits/RobertPurvis.gif" width="70%" alt="Robert Purvis" /> 
</p>
<br />
 
<p class="right">Katherine Drexel&nbsp;&nbsp;&nbsp;<br />
<img src="portraits/KatherineDrexel.gif" width="90%" alt="Katherine Drexel" /> 
</p>
<br />
 
<p class="left">&nbsp;Henry Disston<br />
<img src="portraits/HenryDisston.gif" width="81%" alt="Henry Disston" /> 
</p>
<br />
 
<p class="right">Stephen Decatur&nbsp;&nbsp;&nbsp;<br />
<img src="portraits/StephenDecatur.gif" width="78%" alt="Stephen Decatur" /> &nbsp;&nbsp;&nbsp;
 
                      </p>
			<br />
			<!-- Column two end -->
			</div>
 
 
			<div id="col3">
			<!-- Column three start -->
			<h3>Suggesting candidates for 
                          the Northeast Philadelphia <br />
                          Hall of Fame
                        </h3>
 
<p class="main">
There are two ways you can suggest individuals for consideration for induction into the Northeast Philadelphia Hall of Fame. Whichever method you choose, please include some background information on your suggested candidate(<img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/drunk.png" title="Drunk" alt="Drunk" class="smiley-content" /> and the reason he/she/they should be considered for the Hall of Fame. Also include your name and contact information (telephone number or email address). Entries without the sender&#146;s name and contact information will not be considered &#8212; this information will be kept confidential and will not be used in any way, but is necessary to ensure that all entries are legitimate.<br /> 
<br />
1) Send an email to <a href="mailto:[email protected]">halloffame@frankfordhistory.org.</a>
<br /> 
<br />
2) Print, fill out, and mail the <a href="art/HalloffameBallot-FinalVersion.jpg">attached ballot</a><br /> 
<br />
All entries must be received by June 12, 2009<br />
<br />
A Hall of Fame Selection Committee composed of 
Northeast Philadelphia historians and community and 
educational leaders will consider all suggestions and 
make the final determinations on inductees.<br />
 
</p>
 
 
<img src="art/HoFlogo.gif" alt="N.E. Philadelphia Hall of Fame" width="55%" />                    
 
				<!-- Column three end -->
			</div>
 
		</div>
	</div>
</div>
 
<div id="footer">
<p>footer text???</p>
</div>
 
</div><!-- end of wrapper -->
 
</body>
 
</html>

Its CSS file is:
http://www.frankfordhistoricalsociety.org/HOF2styles.css

* {
margin : 0;
padding : 0;
}
body {
background : #ccf url(art/cyprbk_pattern.jpg);
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 0.833em;
color : #000000;
}
#wrapper {
width : 45em;
margin : 20px auto;
}
#branding {
height : 4.75em;
background-color : #339;
}
#bluebar {
width : 13%;
font-size : 0.667em;
background-color : #339;
clear : both;
float : left;
}
#greenbar {
margin-left : 13%;
font-size : 0.667em;
width : 87%;
background-color : #696;
}
.col1head {
font-size : 0.625em;
color : #fff;
text-align : center;
}
.col1text {
font-size : 0.625em;
color : #9c9;
text-align : center;
}
.left {
font-size : 0.542em;
text-align : left;
clear : both;
}
.right {
font-size : 0.542em;
text-align : right;
clear : both;
}
h3 {
font-family : 'Times New Roman', Times, serif;
margin-top : 12px;
}
p.main {
font-family : "Times New Roman", Times, serif;
font-size : 0.917em;
line-height : 1.25em;
text-align : left;
padding-top : 12px;
padding-bottom : 12px;
}
#footer {
clear : both;
float : left;
width : 100%;
}
#footer p {
margin-left : 2%;
padding-right : 2%;
}
#container3 {
clear : left;
float : left;
width : 100%;
overflow : hidden;
background : #fff;
}
#container2 {
clear : left;
float : left;
width : 100%;
position : relative;
right : 74%;
background : #696;
}
#container1 {
float : left;
width : 100%;
position : relative;
right : 13%;
background : #339;
}
#col1 {
float : left;
width : 11%;
position : relative;
left : 88%;
overflow : hidden;
}
#col2 {
float : left;
width : 11%;
position : relative;
left : 90%;
overflow : hidden;
}
#col3 {
float : left;
width : 70%;
position : relative;
left : 94%;
overflow : hidden;
}

Please help! Many thanks!

tebk77
Offline
Regular
Last seen: 7 years 17 weeks ago
Timezone: GMT-4
Joined: 2009-05-16
Posts: 42
Points: 49

try this again -- 2 similar web pgs but photo sizes vary

I have 2 almost identical web pages except that the

    *1st webpg. has 4 columns and the
    *2nd webpg. has 3 columns.

The columns' widths are in %. Text is in em units.

My main question is:
Why did the size of the "photos" in the 2nd column change on the new webpage?

The first web page that works is:
http://www.frankfordhistoricalsociety.org/fame1ca.html
Its CSS file is:
http://www.frankfordhistoricalsociety.org/HOFstyles3.css

THEN I saved a copy of the 2 files mentioned above for a new web page. In the following files I changed coding to acclimate to 3 columns.
Here is the XHTML file:
http://www.frankfordhistoricalsociety.org/fame2.html
and here is the CSS file:
http://www.frankfordhistoricalsociety.org/HOF2styles.css

I wasn't able to include the coding in this post. Don't know what the deal is. I hope you don't mind looking at the Page Source.

Please help! Many thanks!