?
Solved

Page layout problems

Posted on 2011-05-03
7
Medium Priority
?
226 Views
Last Modified: 2012-05-11
Please look at www.whasocal.org. There are two problems.

(1) There is the "gap" in the middle of the page with the purple background. That should be white.

(2) In Firefox, that is the ONLY problem. In IE, the bottom has some screwed up overlay.

Since this is a php page, it is generated on the server. But I just need the HTML / CSS problems fixed.

Attached are the html and css.

Any help will be appreciated.

Thanks

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Main Page</title>
<link href="/css/mainr3.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#bodyWrapper1 {
   width: 966px;
   height: 645px;;
   margin-left: auto;
   margin-right: auto;
   background-color: transparent;
}
.li1 { margin-left: -1em } 
div#container {
  width: 800px;
}
div#left {
  width: 350px;
  float: left;
}
div#center {
	width: 343px;
	float: left;
}	

.ltbl {font-size: .8em; font-family: Arial; color: #4E6C8E; }

</style>	
<script language="JavaScript">	
<!--
	noblog = false;
	
	sm = false;
			
	jm = false;
			
	function chk_msgs() {
		if (noblog) {
			alert("Blog only available to Board Members.");	
		}
		if (sm) {
			alert("Thank you for sending us a message.  We will respond to you soon. ");
		}	
		if (jm) {
			alert("Thank you for joining our mailing list! - WHA");
		}			
		return true;	
	}
// -->
</script>
</head>
<body style="margin-left: 0px;" onload="chk_msgs();">
<!-- DO NOT MOVE! The following AllWebMenus linking code section must always be placed right AFTER the BODY tag-->
<!-- ******** BEGIN ALLWEBMENUS CODE FOR notLoggedIn ******** -->
<script type="text/javascript">var MenuLinkedBy="AllWebMenus [4]",awmMenuName="notLoggedIn",awmBN="808";awmAltUrl="";</script>

<script charset="UTF-8" src="notLoggedIn.js" type="text/javascript"></script>
<script type="text/javascript">awmBuildMenu();</script>
<!-- ******** END ALLWEBMENUS CODE FOR notLoggedIn ******** -->
<div id="homeWrapper">
  <div id="headerWrapper">
    <div id="headerLogo"><a href="index.php"><img src="images/HeaderLogo.jpg" alt="Women in Health Administration" width="697" height="169" border="0" /></a></div>
    <div id="headerRight">
      <div id="headerSearch"><form action="http://www.whasocal.org/search_results.php" id="cse-search-box" target="_blank">
  <div><img src="images/spacer.gif" width="40" height="13"><br>
    <input type="hidden" name="cx" value="004114537389367705019:xh9_lxgaxq4" />

    <input type="hidden" name="cof" value="FORID:9" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="25" />
    <input type="submit" name="sa" value="Search" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>
</div>
      <div id="headerLogin">
<script language="JavaScript">	
<!--
	function chk_em_pwd() {
		if (document.li.email.value == "" || document.li.pwd.value == "") {
			alert("Email and password required.")
			return false;
		}
	}		
// -->

</script>	
	  	<form method="POST" name="li" action="chk_memb_login.php" onSubmit="return chk_em_pwd();">
	  	<table width="100%" cellpadding="2" cellspacing="0">
			<tr>
				<td colspan="2"><img src="images/spacer.gif" width="100" height="10"></td>
			</tr>
						<tr>
				<td align="right" class="pt8w" width="40%">Email:&nbsp;</td>
				<td><input type="text" class="pt8" name="email" size="20"></td>

			</tr>
			<tr>
				<td align="right" class="pt8w" width="40%">Password:&nbsp;</td>
				<td><input type="password" class="pt8" name="pwd" size="20"></td>
			</tr>	
			<tr>
				<td colspan="2"><img src="images/spacer.gif" width="100" height="4"></td>
			</tr>	
			<tr>

				<td>&nbsp;</td>
				<td><input type="image" src="images/login.jpg"><img src="images/spacer.gif" width="10" height="5"><a href="forgot_pwd.php"><img src="images/forgot_pwd.jpg" border="0"></a></td>
			</tr>						
							
	
		</table>
		</form>	  </div>
      <div id="headerJoin"> Not a Member?<br />
        <a href="memb_application.php" class="wheat">JOIN NOW! </a></div>

    </div>
  </div>
  <div id="bodyWrapper1">
	<table>
		<tr>
			<td valign="top" width="38%"><img src="images/spacer.gif" width="340" height="10"><br><img src="animate/myanimation.gif"></td>
			<td valign="top" width="32%" style="font-size: 14px; font-family: Arial; color: #CAB69E;"><img src="images/spacer.gif" width="315" height="10"><br>
			<b>Welcome to our website!</b> Women in Health Administration of Southern California (WHA) is a nonprofit professional association for women healthcare leaders devoted to:<br><br><br> 
		<ul class="wheat">

			<li class="li1">Providing forums for professional growth & career development.</li>
			<li class="li1">Creating opportunities for quality networking & personal growth.</li>
			<li class="li1">Raising awareness & understanding of current healthcare issues.</li>
		</ul></td>
			<td><img src="images/spacer.gif" width="40" height="5"></td>
			<td valign="top" rowspan="2"><br>

				<h2 style="text-align: center;" class="big">TOUR OF CHILDREN`S HOSPITAL OF LOS ANGELES AND HAPPY HOUR</h2>
			<span style="font-size: 14px; font-family: Arial; color: #4E6C8E;	">Thursday, May 19, 2011<br>5:00 PM<br>Children`s Hospital of Los Angeles<br>Los Angeles</span><br><br>
			<span style="font-size: 14px; font-family: Arial;"><a href="event.php?eid=2011-20">Info/Registration</a></span><br>
				<br>
			<img src="images/gold_horiz.jpg" width="200" height="12"><br><br>
					<h2 style="text-align: center;" class="big">PHYSICIAN GROUP CONSOLIDATION</h2>

			<span style="font-size: 14px; font-family: Arial; color: #4E6C8E;	">Thursday, June 9, 2011<br>6:00 PM<br>Olympic Collection<br>Los Angeles</span><br><br>
			<span style="font-size: 14px; font-family: Arial;"><a href="event.php?eid=2011-21">Info/Registration</a></span><br>
			
	   <img src="images/spacer.gif" width="50" height="30"><br><a href="join_mailing_list.php"><b>Join Our Mailing List</b></a>	
			</td>
			<td width="2%" rowspan="2">&nbsp;</td>
		</tr>

		<tr>
			<td colspan="2" valign="top">
			<table>
				<tr>
					<td><img src="images/spacer.gif" width="20" height="5"></td>
					<td width="310" valign="top" class="pt10"><img src="images/spacer.gif" width="50" height="10"><br><br>Considering joining WHA?  Check out our Member Benefits, <a href="membership.php">here</a>.</td>
					<td><img src="images/spacer.gif" width="9" height="30"><br><img src="images/gold_vert.jpg" width="9" height="153"></td>

					<td><img src="images/spacer.gif" width="10" height="5"></td>
					<td valign="top" class="pt10"><img src="images/spacer.gif" width="50" height="10"><br><br>Congratulations to our 2010 Scholarship winner, Diana Chingos, a Masters of Health Administration student at Cal State Northridge!</td>
				</tr>

			</table>
			</td>
			<td>&nbsp;</td>
		</tr>
	</table>

	<table>
		<tr>
			<td>
			<table width="960" cellpadding="0" cellspacing="0">
	<tr>
		<td><img src="images/spon_head.jpg"></td>
	</tr>
</table>
<table width="960" cellpadding="0" cellspacing="0" bgcolor="white">
	<tr>

		<td width="25"><img src="images/spacer.gif" width="25"></td>
				<td width="420" valign="top">
			<div class="gold">Platinum </div>
							<div class = "pt14s">Foley & Lardner LLP</div>
					
		</td>	
		<td align="center" width="32" valign="top"><img src="images/gold_vert.jpg" width="9" height="120"></td>
		<td width="420" valign="top">
			<div class="gold">Silver </div><br>

							<div class = "pt12s">Citizens Choice Health Plan</div>
							<div class = "pt12s">Fulbright & Jaworski L.L.P.</div>
							<div class = "pt12s">NAMM California</div>
					
		</td>
		<td></td>	
																						
	</tr>
</table>			</td>

		</tr>
	</table>

  </div>
<div id="roundedBottom"><img src="images/RoundedBottom.jpg" width="960" height="17" /></div>
<div id="footerWrapper">

    <div id="footerMenu">
      <ul>
	  	<li><a href="index.php">Home</a></li>

        <li><a href="about_wha.php">About WHA</a></li>
        <li><a href="membership.php">Membership</a></li>
        <li><a href="upcoming_events.php">Events</a></li>
        <li><a href="chk_if_blog_OK.php?wto=blog">Let's Talk</a></li>
        <li><a href="resources.php">Resources</a></li>
        <li><a href="sponsor_benefits.php">Sponsors</a></li>

        <li class="last"><a href="send_message.php">Contact Us</a></li>
      </ul>    
    </div>
    
	<div id="footerCopyright">Copyright 2010 Women in Health Administration of Southern California    |   <a href="privacy_policy.php">Privacy Policy</a><br>
	<img src="images/spacer.gif" width="45" height="3"><br>
	Website development by <a href="http://www.rkassociates.com" target="_blank">RK Associates</a> and design by <a href="http://www.adesigningwoman.com" target="_blank">A Designing Woman</a>.  Logo design by <a href="http://www.vbadesigns.com/" target="_blank">VbaDesigns</a>. </div>    
    
    <div id="socialLinks">

        <a href="http://www.linkedin.com/groups?mostPopular=&gid=116794"><img src="images/SocialLinkedinButton.jpg" width="31" height="28" alt="LinkedIn Link"/></a>
        <a href="http://www.facebook.com/#!/group.php?gid=8763785669"> <img src="images/SocialFacebookButton.jpg" width="30" height="28" alt="Facebook  Link"/></a>
    </div>    
    
  </div>
</div></div>
</body>
</html>

Open in new window

mainr3.css
0
Comment
Question by:Richard Korts
  • 3
  • 2
  • 2
7 Comments
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 1400 total points
ID: 35514844
You cell at "<td valign="top" rowspan="2">" has too much content and it is pushing the bottom down past the div boundaries.  Just removing some of the <br> tags will bring it back up.
0
 
LVL 7

Assisted Solution

by:rgranlund
rgranlund earned 600 total points
ID: 35514852
You can also add or change a background color for the table in CSS.
0
 

Author Comment

by:Richard Korts
ID: 35515358
To all,

I can't remove the <br>'s, I need that vertical spacing.

I can't use background color on the whole table for other reasons.

I used background color on rows & columns. It's getting close.

See www.whasocal.org/index1.php.

Notice the top part is SLIGHTLY too wide (by a few pixels) & there is about a two pixel gap of purple before the sponsors block (at the bottom).

I DID NOT change the css file, I used inline styles.

I've tried a LOT of things to get rid of the extra width. The overall width of the outer table is 960, but now the lower part is wider by a few pixles.

Any help GREATLY appreciated.

Thanks
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 7

Expert Comment

by:rgranlund
ID: 35515447
Around line 158 and 159, your image spacers may be to wide. This may be causing the overflow.

Also try adjusting the height for: bodyWrapper1 (decreasing by 2px)
Also try adding a height to the main Table on line 122
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 35515822
Do what you want but it is the vertical space that is breaking your layout.
0
 
LVL 7

Expert Comment

by:rgranlund
ID: 35515958
@khorts davebaldwin is correct also.
0
 

Author Comment

by:Richard Korts
ID: 35516124
To all.

Dave Baldwin was right. It is now perfect in FireFox. I had to fool around with the CSS, but overall, that did it.

Still has problems in IE; I'm seeing if I can fix those, I think I need a different bodywrapper1 height, depending upon the browser. Can you clue me in on how to do that?

Thanks
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question