Page layout problems
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
(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: </td>
<td><input type="text" class="pt8" name="email" size="20"></td>
</tr>
<tr>
<td align="right" class="pt8w" width="40%">Password: </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> </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"> </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> </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>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
Also try adjusting the height for: bodyWrapper1 (decreasing by 2px)
Also try adding a height to the main Table on line 122
Do what you want but it is the vertical space that is breaking your layout.
@khorts davebaldwin is correct also.
ASKER
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
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
ASKER
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