DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 2 of 2

Thread: Frustrating CSS differences Firefox and IE

  1. #1
    Join Date
    Mar 2008
    Posts
    1

    Frustrating CSS differences Firefox and IE

    I must be doing something wrong but I cannot get my pages ( in terms of font ) to look anything like the same in IE and firefox.

    A test page is at http://www.milkminder.co.uk/test.htm

    When I look at the page in firefox and IE7 on my PC the fonts look completely different.

    Another problem is that I cant seem to get the top: working for the panels.. its seems to make no difference..

    Thanks


    Paul

    The CSS is :-
    Code:
    	* {
    		margin:0;
    		padding:0;
    	}
    
    	body {
    		background-color:#fff;
    		background: url(../images/whiteblueblend.jpg) bottom left fixed repeat-x #fff;	 /*Fixed property 'fixes' the body height issue in FF 1.5	*/
    		font-size:12px;
    		line-height:120%;
    		font-family: Verdana ; /*tahoma arial, sans-serif */
    		color:#555;
    	}
    
    
    	html>body {
    		font-size:12px;
    	}
    
    	a, a:visited {
    		color:#555;
    	}
    
    	a:hover, a:active {
    		color:#f00;
    	}
    
    	#wrapper {
    		width:800px;
    		margin:10px auto;
    		padding:0 0px;
    		background-color:#fff;
    	}
    
    	#header {
    
    	}
    	
    		#header img {
    			border:none;
    		}
    
    
    
    	#content {
    		width:800px;
    		margin:0 0 0 0 ; /*2em 10px;*/
    		float:left;
    		min-height:30em;
    	}
    
    		body.singleCol #content {
    			width:460px;
    		}
    
    		body.homePage #content {
    			width:800px;
    			padding:0;
    			margin:0;
    			margin-left: 0px; /*15px; */
    			background-color:#fff; /*#f1f2f3;*/
    			text-align:center;
    		}
    
    			body.homePage #content div.smallpanel {
    				float:left;
    				padding:1em;
    				text-align:left;
    			}
    
    			body.homePage #content div.smallpanel p {
    				font-size:100%;
    				line-height:90%;
    				width:750px;
    				float:left;
    				display:inline;
    				padding-left:20px;
    			}
    
    
    			body.homePage #content div.newspanel {
    				float:left;
    				width:780px;
    				padding:1em;
    				text-align:left;
    			}
    
    			body.homePage #content div.newspanel p {
    				font-size:100%;
    				width:350px;
    				/* float:left;  does not work in firefox */ 
    				display:inline;
    				padding-left:20px;
    			}
    
    			body.homePage #content div.panel {
    				float:left;
    				min-height:8em;
    				height:8em;
    				width:800px;
    				padding:1em;
    				/*border:1px solid #ccc;
    				background-color:#eee;*/
    				text-align:left;
    			}
    
    			
    
    			body.homePage #content div.panel p {
    				font-size:120%;
    				line-height:120%;
    				width:500px;
    				float:left;
    				display:inline;
    				padding-left:20px;
    			}
    
    
    
    		#content h1, #content h2, #content dl dt {
    			font-family:georgia, times, serif;
    			color:#f00;
    			display:inline;
    			font-size:150%;
    			font-variant:small-caps;
    			font-weight:normal;
    			padding-right:0.3em;
    		}
    
    			#content h2, #content dl dt {
    				font-size:115%;
    				/*margin-top:1.5em;*/
    				display:block;
    			}
    
    			body.homePage #content div.panel h1 {
    				font-size:160%;
    				width:500px;
    				float:left;
    				display:inline;
    				padding-left:20px;
    			}
    
    		#content #offer {
    			font-size:160%;
    			color:#000;
    		}
    	
    		#content p.intro {
    			font-family:georgia, times, serif;
    			display:inline;
    			font-size:140%;
    		}
    
    
    		#content p {
    			/*clear:left;*/
    			margin:0.5em 0 1.3em 0;
    		}
    
    		#content ul {
    			margin:0.5em 2em 0.5em 2em;
    			clear:left;
    		}
    
    			#content ul li {
    			
    			}
    
    		#content dl {
    			clear:left;
    			padding-top:1.3em;
    		}
    
    
    	#footer {
    		width:90%;
    		padding:0;
    		margin:0;
    		margin-left:15px;
    		background-color:#fff;
    		font-size:90%;
    		border-top:1px solid #e2e2e2;
    		}
    Last edited by Hack; 03-18-2008 at 02:09 PM. Reason: Added Code Tags

  2. #2
    Join Date
    Feb 2008
    Posts
    20
    Hi,
    I am looking at the page in Firefox and the bottom part after Need Further Details, is very jumbled, with lines on top of one another. I looked at the HTML, try adding another <P> paragraph between "Forecasts and budgets" and "Need Further Details." As far as the CSS, it looks fine in Internet Explorer, but in Firefox, I can't see the links because it is jumbled.

    The home page for the site looks perfect. The test page is where I see the problems. The top image is a little squished, but try increasing pixel height in the HTML. Let me know if this helps.
    Marty

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center