SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with Firefox not IE!

    I am attempting to make a page with an outline of 800px wide, adjustable height. http://800.twincitiesrailfan.com/ This page looks how I would like it IE; it does not work in Firefox.

    Initially, I had two separate pages of css (created in GoLive 5). I now have broken up the border into two sections: one for the title [ #outer ] and [ #outer1 ] for the rest of the page.

    Code:
    	<body>
    		<div id="outer">
    			<div id="title">
    				<div class="title"></div>				
    			</div>	
    		</div>
    		<div id="outer1">			
    			<div id="left">
    				<h1>TCR By the Count:</h1>
    
    					<span class="menus">
    						<p>3,349 in database</p>
    						<p>42 blog entries</p>
    						<p>kfdkfjas</p>	
    					</span>	
    				<h1>Quick Links:</h1>
    					<span class="menus">
    						<p><a href="http://twincitiesrailfan.com/forums/">Forums</a></p>
    
    						<p><a href="email.php">Contact Us</a></p>
    						<p><a href="about.php">About Us</a></p>	
    					</span>	
    				<h1>TCR Bloggers</h1>
    					<span class="menus">
    						<p><a href="blog.php">Aaron</a></p>
    						<p><a href="blog.php">MilwuakeeRoadMatt</a></p>	
    					</span>
    
    			</div>			
    			<div id="right">
    				<div class="heading"><span class="heading_title">The last 4 photos added</span></div>
    				<div id="last_box">					
    						 <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3349" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206b.jpg" class="last" title="Photo 3349."></a></span> <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3348" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206a.jpg" class="last" title="Photo 3348."></a></span> <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3347" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206.jpg" class="last" title="Photo 3347."></a></span> <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3346" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/derail_trucks_061206.jpg" class="last" title="Photo 3346."></a></span>				</div>
    				<div class="heading"><span class="heading_title">Search TwinCitiesRailfan.com</span></div>	
    				<div class="heading"><span class="heading_title">The last 4 photos added</span></div>
    
    				<div id="last_box">					
    						 <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3349" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206b.jpg" class="last" title="Photo 3349."></a></span> <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3348" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206a.jpg" class="last" title="Photo 3348."></a></span> <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3347" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206.jpg" class="last" title="Photo 3347."></a></span> <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3346" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/derail_trucks_061206.jpg" class="last" title="Photo 3346."></a></span>				</div>
    				<div class="heading"><span class="heading_title">Search TwinCitiesRailfan.com</span></div>
    				<div class="heading"><span class="heading_title">The last 4 photos added</span></div>
    				<div id="last_box">					
    						 <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3349" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206b.jpg" class="last" title="Photo 3349."></a></span> <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3348" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206a.jpg" class="last" title="Photo 3348."></a></span> <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3347" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206.jpg" class="last" title="Photo 3347."></a></span> <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3346" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/derail_trucks_061206.jpg" class="last" title="Photo 3346."></a></span>				</div>
    
    				<div class="heading"><span class="heading_title">Search TwinCitiesRailfan.com</span></div>
    
    				<div class="heading"><span class="heading_title">The last 4 photos added</span></div>
    				<div id="last_box">					
    						 <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3349" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206b.jpg" class="last" title="Photo 3349."></a></span> <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3348" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206a.jpg" class="last" title="Photo 3348."></a></span> <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3347" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206.jpg" class="last" title="Photo 3347."></a></span> <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3346" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/derail_trucks_061206.jpg" class="last" title="Photo 3346."></a></span>				</div>
    				<div class="heading"><span class="heading_title">Search TwinCitiesRailfan.com</span></div>
    
    						<div class="heading"><span class="heading_title">The last 4 photos added</span></div>
    				<div id="last_box">					
    						 <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3349" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206b.jpg" class="last" title="Photo 3349."></a></span> <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3348" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206a.jpg" class="last" title="Photo 3348."></a></span> <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3347" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206.jpg" class="last" title="Photo 3347."></a></span> <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3346" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/derail_trucks_061206.jpg" class="last" title="Photo 3346."></a></span>				</div>
    				<div class="heading"><span class="heading_title">Search TwinCitiesRailfan.com</span></div>	
    				<div class="heading"><span class="heading_title">The last 4 photos added</span></div>
    				<div id="last_box">					
    						 <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3349" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206b.jpg" class="last" title="Photo 3349."></a></span> <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3348" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206a.jpg" class="last" title="Photo 3348."></a></span> <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3347" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206.jpg" class="last" title="Photo 3347."></a></span> <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3346" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/derail_trucks_061206.jpg" class="last" title="Photo 3346."></a></span>				</div>
    
    				<div class="heading"><span class="heading_title">Search TwinCitiesRailfan.com</span></div>
    				<div class="heading"><span class="heading_title">The last 4 photos added</span></div>
    				<div id="last_box">					
    						 <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3349" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206b.jpg" class="last" title="Photo 3349."></a></span> <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3348" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206a.jpg" class="last" title="Photo 3348."></a></span> <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3347" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206.jpg" class="last" title="Photo 3347."></a></span> <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3346" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/derail_trucks_061206.jpg" class="last" title="Photo 3346."></a></span>				</div>
    				<div class="heading"><span class="heading_title">Search TwinCitiesRailfan.com</span></div>
    
    				<div class="heading"><span class="heading_title">The last 4 photos added</span></div>
    				<div id="last_box">					
    						 <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3349" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206b.jpg" class="last" title="Photo 3349."></a></span> <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3348" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206a.jpg" class="last" title="Photo 3348."></a></span> <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3347" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206.jpg" class="last" title="Photo 3347."></a></span> <span class="photo"><a href="http://twincitiesrailfan.com/photo.php?photo_id=3346" target="blank"><img src="http://twincitiesrailfan.com/images_sm/derail/derail_trucks_061206.jpg" class="last" title="Photo 3346."></a></span>				</div>
    				<div class="heading"><span class="heading_title">Search TwinCitiesRailfan.com</span></div>		
    			</div>
    		</div>
    		</div>
    
    		<div id="footer" class="clear">Copyright © 2002-2006 TwinCitiesRailfan.com</div>
    	</body>
    The CSS is here: http://800.twincitiesrailfan.com/css/index_ff.css

    This is also an example of what happens in FF when I attempt to make the left menu full height of the border http://800.twincitiesrailfan.com/index4.php

    I would like to keep the silver borders x4 and #left and #right 100% of #outer1.
    I have spent 3 days working on research and trying multiple solutions. I am at the brick wall. Any help will be greatly appreciated.

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    no DTD that gets IE in the same box model as FF NS Moz OP
    only one container can have 100% height / min-height
    floats are not cleared for FF NS Moz OP
    to many height's set
    to many width's set
    to many classes and or div's
    and maybe use width 768px for wrapper and 593px for right column


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>Twin Cities Railfan.com - Capturing Twin Cities Railroad Action</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Language" content="en">
    <meta http-equiv="ImageToolbar" content="no">
    <meta name="Description" content="TCR.com is a collection of railroad related photography.">
    <meta name="Abstract" content="TCR.com is a collection of railroad related photography.">
    <meta name="Copyright" content="Copyright © 2003-2005 Aaron Florin">
    <meta name="Author" content="Aaron M. Florin">
    <meta name="Owner" content="Aaron M. Florin">
    <meta name="Robots" content="all">
    <meta name="Distribution" content="Global">
    <meta name="Revisit-After" content="15 days">
    <meta name="Rating" content="General">
    <meta name="Reply-to" content="aaron@twincitiesrailfan.com">
    <link rel="SHORTCUT ICON" href="http://css.twincitiesrailfan.com/css/img/icon.ico">
    	<style type="text/css">
    	<!-- 
    	html,body{height:100%;}
    	
    	*{margin:0;padding:0;}
    	
    	body{
    	background:#000;
    	text-align:center;
    	font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular,sans-serif;
    	font-size:13px;
    	}
    	
    	div{text-align:left;}
    	
    	head+/**/body .fc:after{
    	content:"."; 
    	display:block; 
    	height:0; 
    	clear:both; 
    	visibility:hidden;
    	}
    	
    	/*  \*/
    	* html .fc{height:1%;}
    	*+html .fc{zoom:1;}
    	/*  */
    	
    	#outer1{margin:-18px auto 0 auto;border:1px solid #f5f5f5;border-top:none;width:768px;
    	background: #c0c0c0 url(photo/cp8579title.jpg) repeat-y;
    	}
    	* html #outer1{height:100%;}
    	head+body #outer1{min-height:100%;}
    	
    	#title{background:#000 url(photo/bnsf4540title.jpg) no-repeat;height:150px;border-top:1px solid #f5f5f5;}
    	
    	#title h1{color:#fff;background:#ffccff url(photo/title_main.gif) no-repeat;margin:50px 0 0 275px;height:44px;width:475px;text-indent:-2000px;}
    	
    	#left{text-align:left;float:left;width:175px;}
    	
    	#left h2{color:black;font-size:17px;background:#c0c0c0;text-align:center;border-right:1px solid #696969;border-bottom: 1px solid black;}
    	
    	#left p{color:#000;font-weight:bold;font-size:13px;padding:5px 5px 0 10px;margin-bottom:3px;}
    
    	#right{color:#d3d3d3;float:right;width:593px;}
    	
    	#right h4,#right span{margin:10px 10px 0 10px;}
    	
    	#right h4{background:#000000;color:#fff;font-size:15px;padding:0 0 0 2px;}
    	
    	#right span{text-align:center;padding:10px 0 10px 0;border:solid 1px black;display:block;}
    	
    	#right span a{margin:auto;padding:0 0 0 4px;width:128px;height:96px;}
    		
    	#right span a img{margin:auto;border:solid 1px black;vertical-align:middle;}
    	
    	.footer{color:#f5f5f5;font-weight:bold;text-align: center; margin:auto; width:768px;}
    	
    	/*.quick{color:#dcdcdc;font-weight:normal;background:#000;text-align:center;margin:0px 3px 0 3px;padding: 2px 5px;height: 16px }
    
    	#quick{text-align: center;margin-bottom: 15px;}*/
    	
    	a{color:#000;text-decoration:none;}
    	#left a{display:block;width:100%;}
    	#left a:hover{color:#ff0000;text-decoration:underline;}
    	
    	.fh{height:33px;background:#000000;width:100%;padding:0 1px 0 1px;margin:0 -1px 0 -1px;position:relative;}
    	 -->
    	</style>
    </head>
    <body>
    <div id="outer1" class="fc">
    
    <div class="fh"></div>
    
    <div id="title"><h1>Twin Cities Railfan</h1></div>
    
    <div id="left">
    
    <h2>TCR By the Count:</h2>
    <p>3,349 in database</p>
    <p>42 blog entries</p>
    <p>kfdkfjas</p>	
    
    <h2>Quick Links:</h2>
    <p><a href="http://twincitiesrailfan.com/forums/">Forums</a></p>
    <p><a href="email.html">Contact Us</a></p>
    <p><a href="about.html">About Us</a></p>	
    
    <h2>TCR Bloggers</h2>
    <p><a href="blog.html">Aaron</a></p>
    <p><a href="blog.html">MilwuakeeRoadMatt</a></p>
    
    </div>
    
    
    <div id="right">
    
    <h4>The last 4 photos added</h4>
    
    <span>
    <a href="http://twincitiesrailfan.com/photo.php?photo_id=3349">
    <img src="../twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206b.jpg" title="Photo 3349." alt="">
    </a>
    <a href="http://twincitiesrailfan.com/photo.php?photo_id=3348">
    <img src="../twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206a.jpg" title="Photo 3348." alt="">
    </a>
    <a href="http://twincitiesrailfan.com/photo.php?photo_id=3347">
    <img src="../twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206.jpg" title="Photo 3347." alt="">
    </a>
    <a href="http://twincitiesrailfan.com/photo.php?photo_id=3346">
    <img src="../twincitiesrailfan.com/images_sm/derail/derail_trucks_061206.jpg" title="Photo 3346." alt="">
    </a>
    </span>
    
    <h4>Search TwinCitiesRailfan.com</h4>
    
    <h4>The last 4 photos added</h4>
    
    <span>
    <a href="http://twincitiesrailfan.com/photo.php?photo_id=3349">
    <img src="../twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206b.jpg" title="Photo 3349." alt="">
    </a>
    <a href="http://twincitiesrailfan.com/photo.php?photo_id=3348">
    <img src="../twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206a.jpg" title="Photo 3348." alt="">
    </a>
    <a href="http://twincitiesrailfan.com/photo.php?photo_id=3347">
    <img src="../twincitiesrailfan.com/images_sm/derail/bcol730629_derail_061206.jpg" title="Photo 3347." alt="">
    </a>
    <a href="http://twincitiesrailfan.com/photo.php?photo_id=3346">
    <img src="../twincitiesrailfan.com/images_sm/derail/derail_trucks_061206.jpg" title="Photo 3346." alt="">
    </a>
    </span>
    
    <h4>Search TwinCitiesRailfan.com</h4>
    
    </div>
    
    
    </div>
    
    <div class="footer"><p>Copyright © 2002-2006 TwinCitiesRailfan.com</p></div>
    
    </body>
    </html>
    Last edited by all4nerds; Jun 24, 2006 at 05:42.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for taking the time to write out that code. Unfortunately, I am at work and don't have access to anything other than IE. Also, the matching div thread helped as well.

    Although, now I am confused at how this page ( http://800.twincitiesrailfan.com/picture.php ) can work with all the divs.

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    I am not sure what you mean, but you use a lot of divís, maybe other tags are more suited, you also have a lot of tags in these div's that maybe are unnecessary

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As I learn (from books) I continually am surprised how complicated I can make things. With your simplification of my index page, I was amazed how the picture page worked with all the divs. It works so I will keep it as is. But from now on, I will try to use less divs.


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
  •