Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Resolved Works in IE but cannot work in Firefox CSS gap between header and left

    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>
    Last edited by erymer; 04-09-2009 at 07:14 PM. Reason: Resolved

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello erymer,
    Try adding this bit in red to the top of your CSS -
    Code:
    <!--
    * {
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    erymer (04-09-2009)

  • #3
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •