SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    May 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Alignment Help

    Hi Guys,

    I'm designing a site using CSS for placement of elements. I'm having an issue with properly aligning things. Here's the problem. I have a left content cell and a main content cell. The main content cell is supposed to be on the right side of the webpage and the left content should float on the left (the page should be divided). In IE, my page looks just like I intend it to. However, in Firefox, Netscape, and God only knows what other browsers, my main content doesn't place properly.

    The problem occurs when I add a second left content section. The main content on the right will drop to align with the second window of left content, leaving a gap at the top of the page.

    How do I fix my CSS to keep the main content at the top of the page in other browsers? Why the heck does it work right in IE, but not others?

    Here's the CSS you'll probably need to see: (You'll notice three different left content cells, but the error occurs even if I use the same content cell twice)

    Thanks for the help and suggestions, and please let me know if you need more information!

    Code CSS:
    #frame {
    	background-image:  url("images/background5.jpg"); 
    	background-position:center;
    	background-repeat:repeat-y;
    	background-color:#D2B48C;
    	/*border-left:3px solid #856C48;
    	border-right:3px solid #856C48;
    	border-bottom:3px solid #856C48;
    	border-top:3px solid #856C48;*/
    	margin:0px auto 10px auto;
    	padding:5px;
    	width:750px;
     
    }
     
    #footer {
    	clear:both; 
    	/* margin:0px auto 10px auto; */ 
    	margin:10px 10px 20px 10px;
    	padding:0px 0px 0px 0px; 
    	width:701px;
    	font-size:10px; 
    }
     
     
    /************* Content Styles *************/
     
     
    #pageContent {
    	float: left;
    	margin:10px 10px 0px 10px;
    	width:475px;
    }
     
     
    #navigation { 
    	float: left;
    	clear: left;
    	margin:10px 0px 10px 10px;
    	padding:0px; 
    	width:190px;  
    }
     
    #leftContentCell { 
    	float: left;
    	clear: left;
    	border-top:1px solid #856C48;
    	border-right:1px solid #856C48;
    	border-bottom:1px solid #856C48;
    	border-left:1px solid #856C48;
    	text-indent: 3em
    	font-family: Verdana, Geneva, Arial, sans-serif;
    	font-size:14px;
    	font-weight:none;
    	color:#000;
    	line-height:125%;
    	margin:10px 0px 10px 10px;
    	padding:0px; 
    	width:190px; 
    	background-color:#D2B48C;
     
    }
     
    #leftContentCell2 { 
    	float: left;
    	clear: left;
    	border-top:1px solid #856C48;
    	border-right:1px solid #856C48;
    	border-bottom:1px solid #856C48;
    	border-left:1px solid #856C48;
    	text-indent: 3em
    	font-family: Verdana, Geneva, Arial, sans-serif;
    	font-size:14px;
    	font-weight:none;
    	color:#000;
    	line-height:125%;
    	margin:10px 0px 10px 25px;
    	padding:0px; 
    	width:150px; 
    	background-color:#D2B48C;
     
    }
     
     
    #leftContentCellA { 
    	margin:10px 0px 10px 10px; 
    	padding:0px; 
    	width:130px; 
    	text-indent: 3em 
    	margin:3px 0px 7px 0px;
    	font-family: Verdana, Geneva, Arial, sans-serif;
    	font-size:14px;
    	font-weight:none;
    	color:#000;
    	line-height:125%;
    	/*border-left:1px solid #CCCCCC; */
    	border-right:1px solid #856C48; 
    	/*border-bottom:1px solid #CCCCCC;
    	border-top:1px solid #CCCCCC;*/
    	background-color:#D2B48C; 
    }
     
     
    #fullWidthContentCell {
    	clear:both; 
    	margin:10px 20px 0px 20px; 
    	padding: 0px 15px 0px 0px
    	width:730px; 
    }
    Last edited by Dan Schulz; Mar 13, 2008 at 05:19. Reason: wrapped highlight tags around the CSS to make it easier for people to read

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Goocher,

    Would you happen to be able to post the HTML code that goes with the CSS by any chance?

  3. #3
    SitePoint Member
    Join Date
    May 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Html

    Below is the HTML for one of my pages that is "experiencing" the problem.


    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    
    
    <head>
    <title>Walking Through Time with Indiana Jones</title>
    <link rel="stylesheet" href="../style.css" type="text/css">
    </head>
    
    <body>
    <div id="frame">
    <!-- Top Include -->
    <div align="center">
    <table width="730"  border="0" cellpadding="0" cellspacing="1">
      <tr>
        <td colspan="9">
    	<img alt="IndyintheClassroom.com" src="http://www.indyintheclassroom.com/images/indy_banner.jpg" width="730" height="110"></td>
    
      </tr>
      </table>
     </div>
    <!-- End Include -->
    <div id="FullWidthContentCell"><div class="sectionHeader1">Walking Through Time with Indiana Jones</div></div>
    
    <div id="leftContentCell">
    <div class="leftcontent">
    
    <!-- Menu Include-->
    <table width="100&#37;"  border="0" cellpadding="0" cellspacing="1">
     <tr bordercolor="#CCCCCC" bgcolor="#FF6600">
    <tr><td nowrap><a href="/index.asp" class="topNavLink">Home</a></td></tr>
       <tr> <td nowrap><a href="/about.asp" class="topNavLink">Our Mission</a></td></tr>
       <tr> <td nowrap><a href="/lessons/index.asp" class="topNavLink">Lesson Plans</a></td></tr>
       <tr> <td nowrap><a href="/projects/walking.asp" class="topNavLink">Walking Through Time<br> With Indiana Jones</a></td></tr>
       <tr> <td nowrap><a href="/links.asp" class="topNavLink">Links</a></td></tr>
       <tr> <td nowrap><a href="/use.asp" class="topNavLink">Using the site</a></td></tr>
       <tr> <td nowrap><a href="/contact.asp" class="topNavLink">Contact</a></td></tr>
         </table>
    <!-- End Include-->
    
    </div>
    </div>
    <div id="leftContentCell2">
    <div class="leftcontent">
    <img title="Kindgom of the Crystal Skull Banner" src="/images/skulls_vert_banner.jpg">
    </div>
    </div>
    <div id="pageContent">
    
    <center><img title="Walking Through Time with Indiana Jones" src="/images/exhibit_poster_small.jpg"></center>
    
    <h4>Exhibition Overview</h4>
    <p>
    Walking through Time with Indiana Jones is a project resulting in an exhibition that
    requires students to research and create museum-style displays based on a variety of
    cross-curricular topics. Throughout his life, Indy comes into contact with a number of
    historical figures and witnesses events that will shape the Twentieth Century. These encounters
    have been divided into numerous themes for student investigation. A class (or
    classes) will select a theme, research all aspects of it, determine its historical significance,
    identify its major players, and then create a display that includes artifacts, documents and
    other visuals that will aid in illustrating.</p>
    <p>
    It is the responsibility of a class (or classes) of students to select one of these
    themes and thoroughly research that theme. Such research will be carried out under the
    supervision of the teacher and with the assistance
    of the project manager and project
    scholar. Libraries and Internet sites such as
    online collections of documents and photos
    will be utilized as part of the research process.</p>
    
    <p>Students and their teacher will decide
    upon the artifacts that will be displayed,
    the text that will be written to describe
    the events and any documents or
    photographs that support theme as well. All
    suggested content for the exhibition will be
    reviewed by the project manager as well as the project scholar.</p>
    
    <p>
    Classes may work on the project during the course of the year, striving to complete
    their research in stages to meet set deadlines provided by the project manager. Project
    standards and benchmarks will be used in order to enhance the accuracy and quality
    of the completed exhibition.</p>
    
    <p>Check out the facility at <a target="_blank" title="Roper Mountain Science Center" href="http://www.ropermountain.org/">Roper Mountain Science Center</a> where <em>Walking Through Time with Indiana Jones</em> will be held.</p>
    
    
    </div>
    
    
    <div id="footer">
    
    <!-- Begin Footer Include -->
    <div align="center">
    <table width="730"  border="0" cellpadding="0" cellspacing="1">
      <tr bgcolor="##996633">
        <td colspan="9">
    		<table width="100%" border="0" cellspacing="0" cellpadding="0">
    			<tr>
    			  <td align="center">
    			  </td>
    			</tr>
    		  </table>
    	  </td>
      </tr>
      <tr bordercolor="#CCCCCC" bgcolor="#996633">
        <td nowrap><a href="/index.asp" class="topNavLink">Home</a></td>
       <td nowrap><a href="/about.asp" class="topNavLink">Our Mission</a></td>
        <td nowrap><a href="/lessons/index.asp" class="topNavLink">Lesson Plans</a></td>
       <td nowrap><a href="/projects/walking.asp" class="topNavLink">Projects</a></td>
       <td nowrap><a href="/links.asp" class="topNavLink">Links</a></td>
       <td nowrap><a href="/use.asp" class="topNavLink">Using the site</a></td>
       <td nowrap><a href="/contact.asp" class="topNavLink">Contact</a></td>
      </tr>
      <tr align="center">
        <td colspan="9"><strong> Copyright &#169; 2008 <a href="http://www.indyintheclassroom.com">IndyintheClassroom.com</a>
    </strong></td>
      </tr>
      <tr align="center">
        <td colspan="9"><h6>Send questions & comments to</h6>
    </strong></td>
    </tr>
    <tr align="center">
        <td colspan="9"><a href="mailto:Webmaster@indyintheclassroom.com">Webmaster</a>
        </td>
        </tr>
    <tr align="center">
        <td colspan="9"><h6>Site last updated on <% =date %></h6>
        </td>
    </tr>
    </table>
    <table width="730"  border="0" cellpadding="0" cellspacing="1">
    <tr align="center">
    <td colspan="9">This site is in no way affiliated with Lucasfilm Ltd., Paramount Pictures, or CBS. Copyrights and trademarks for the films, books, articles, and other promotional materials are held by their respective owners and their use is allowed under the <a target="_blank" href="http://www4.law.cornell.edu/uscode/html/uscode17/usc_sec_17_00000107----000-.html">fair use clause</a> of the <a target="_blank" href="http://www4.law.cornell.edu/uscode/html/uscode17/usc_sup_01_17.html">Copyright Law</a>.</td>
    </tr>
    </table>
    </div>
    <!-- End Footer Include -->
    </div>
    
    </div>
    </body>
    </html>
    Last edited by Goocher; Mar 13, 2008 at 06:01.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is in the includes? (By the way, could you please use the [html ][/html] tags, but without the space between [html and ]?)

  5. #5
    SitePoint Member
    Join Date
    May 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I added in the code for the includes in my previous post. Thanks for the tip, I don't post a lot and never knew how to create the window.

    Thanks for your help!

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Goocher, there's no need for the tables there. Do you have a link to the complete page so I can have a point of reference available while I clean this bad boy up?


Bookmarks

Posting Permissions

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