...

View Full Version : Resolved Works in IE but cannot work in Firefox CSS gap between header and left



erymer
04-08-2009, 04:56 PM
Resolved

Hello,

I am attempting to put an image in both the header and have it connect into the left column of a three column CCS style sheet. http://174.132.168.58/~ccadmin/index.html shows a draft of the images. It works now in Internet explore but has a gap between the header and left column with Firefox. If someone could help me to get it working with Firefox it would be appreciated.

Here is the code - I am using Dreamweaver CSS 3

<!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"><!-- InstanceBegin template="/Templates/Three Column Fixed.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Site Map for Community Church of Portage Lakes</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
.style1 {
font-size: 36px
}
.style4 {font-size: 16px}
-->
</style>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
body {
margin: 0px; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0px;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #103E7A;
background-color: #B1EDE4;
border-top-width: thick;
border-right-width: thick;
border-bottom-width: thick;
border-left-width: thick;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
}
.thrColFixHdr #container {
width: 975px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
text-align: left;
border: 0px double #0855a3;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.thrColFixHdr #header {
background-color: #ffffff;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 0px;
}
.thrColFixHdr #header h1 {
margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.thrColFixHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 150px; /* padding keeps the content of the div away from the edges */
background-color: #FFFFFF;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 0px;
background-position: top;
vertical-align: top;
}
.thrColFixHdr #sidebar2 {
float: right; /* since this element is floated, a width must be given */
width: 160px; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 0px 10px 15px 20px; /* padding keeps the content of the div away from the edges */
background-color: #ffffff;
}
.thrColFixHdr #mainContent {
background-color: #ffffff;
margin-top: 0px;
margin-right: 170px;
margin-bottom: 0px;
margin-left: 160px;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}
.thrColFixHdr #footer {
padding: 0 10px 0 20px;
background-color: #9ACAFA;
}
.thrColFixHdr #footer p {
margin: 0px; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
.thrColFixHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>

<body class="thrColFixHdr">

<div id="container">
<div id="header">
<h1><!-- InstanceBeginEditable name="header " --><!-- #BeginLibraryItem "/Library/header.lbi" -->
<img src="images/upper-logo.jpg" alt="Community Chruch of Portage Lakes" width="900" height="147" align="baseline"><!-- #EndLibraryItem --><!-- InstanceEndEditable --></h1>
<!-- end #header --></div>
<div id="sidebar1"><!-- InstanceBeginEditable name="Left Column" --><!-- #BeginLibraryItem "/Library/Nav-left-column.lbi" --><p><img src="images/left-logo.jpg" alt="" width="116" height="41" align="top" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<!-- #EndLibraryItem --><p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<!-- InstanceEndEditable -->
<!-- end #sidebar1 --></div>
<div id="sidebar2"><!-- InstanceBeginEditable name="right Column" -->
<h3>Sidebar2 Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
<!-- InstanceEndEditable -->
<!-- end #sidebar2 --></div>
<div id="mainContent"><!-- InstanceBeginEditable name="Center Column" -->
<div align="center" class="style1">
<p>Site Map</p></div>
<p>&nbsp;</p>
<table width="573" border="0">
<tr>
<td width="97"><span class="style4"><a href="index.html">Home</a></span></td>
<td width="105"><span class="style4">I'm New</span></td>
<td width="126"><span class="style4">Worship</span></td>
<td width="110"><span class="style4">About us</span></td>
<td width="113"><span class="style4">Community</span></td>
</tr>
<tr>
<td><a href="frames/cal-main.htm">Calendar</a></td>
<td><a href="Im_new/welcome.html">Welcome</a></td>
<td><a href="Worship/sermons.html">Listen to Sermons</a></td>
<td><a href="about us/staff.html">Staff</a></td>
<td><a href="Community/kids.html">Community Kids</a></td>
</tr>
<tr>
<td>Preschool</td>
<td><a href="Im_new/sunday_morning.html">Sunday Morning</a></td>
<td><a href="Worship/music_team.html">Music Team</a></td>
<td><a href="about us/newsletter.html">News Letter</a></td>
<td><a href="Community/edge.html">The Edge Youth</a></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><a href="Im_new/midweek_programs.html">Mid Week Programs</a></td>
<td><a href="Worship/tech_ministry.html">Techincal</a> </td>
<td><a href="about us/visions_statement.html">Vision Statment</a></td>
<td><a href="Community/womens.html">Women</a></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><a href="frames/map-main.htm">Directions</a></td>
<td><a href="Worship/cd_ministry.html">CD Minstry</a></td>
<td><a href="about us/what_we_believe.html">What We Believe</a></td>
<td><a href="Community/mens.html">Men</a></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><a href="Im_new/contract_info.html">Contact Us</a></td>
<td>&nbsp;</td>
<td><a href="about us/how_we_work.html">How We Work</a></td>
<td><a href="Community/adult.html">Adult</a></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><a href="about us/elder_board.html">Elder Board</a></td>
<td><a href="Community/missions.html">Missions</a></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><a href="about us/deacon_board.html">Deacon Board</a></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><p><a href="about us/trustee_board.html">Trustee Board</a></p>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<p>&nbsp;</p>

<!-- InstanceEndEditable -->
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer"><!-- InstanceBeginEditable name="Footer" --><!-- #BeginLibraryItem "/Library/footer.lbi" -->
<p><a href="index.html">Home page</a></p>

<!-- #EndLibraryItem --><!-- InstanceEndEditable -->
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
<!-- InstanceEnd --></html>

Excavator
04-08-2009, 06:25 PM
Hello erymer,
Try adding this bit in red to the top of your CSS -
<!--
* {
margin: 0;
padding: 0;
border: none;
}.style1 {
font-size: 36px
}
.style4 {font-size: 16px}
-->

<!--
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #103E7A;
background-color: #B1EDE4;
border-top-width: thick;
border-right-width: thick;
border-bottom-width: thick;
border-left-width: thick;
border-top-styl

Instead of zeroing out margin on the body only (margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */) using the * removes default margin/padding from everything.



When you post code in the forum, enclosing it in [code] tags will make a little scroll box (see the box surrounding the code I quoted?) that greatly helps the readability of your post. You can go back to your original post and edit them in. Use the * button in the Message: window.

drhowarddrfine
04-08-2009, 07:37 PM
Yes. This is a bug in IE. Firefox is performing correctly as usual. IE is collapsing margins incorrectly.

Never look to IE as a reference for how things should work.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum