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 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2003
    Posts
    46
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Text displaying different size in FF and IE

    The text on my page is displaying different sizes in IE and FF (FF is as preferred, IE is too big).

    Take a look here http://www.konnectservices.com/new/

    Please note that gallery.css isnt used (it was for an image gallery that was part of the template that I removed), but if I try to remove the reference to it the formatting is completely ruined.

    default.css

    Code:
    #/*
    Design by Free CSS Templates
    http://www.freecsstemplates.org
    Released for free under a Creative Commons Attribution 2.5 License
    */
    
    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	margin-top: 40px;
    	background: #FFFFFF;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	color: #757E82;
    }
    
    h1, h2, h3 {
    	color: #AA2808;
    }
    
    h1 {
    }
    
    h2 {
    }
    
    h3 {
    }
    
    p, blockquote, ul, ol {
    	margin-bottom: 20px;
    	line-height: 2em;
    }
    
    p {
    }
    
    blockquote {
    }
    
    ul, ol, li {
    	margin: 0px;
    	padding: 0px;
    	list-style: none;
    }
    
    a {
    	text-decoration: underline;
    	color: #DE1C1D;
    }
    
    a:hover {
    	text-decoration: none;
    	color: #DE1C1D;
    }
    
    /* Wrapper */
    
    #wrapper {
    }
    
    /* Header */
    
    #header {
    	width: 992px;
    	height: 91px;
    	margin: 0 auto;
    	border-bottom: 1px solid #E5E5E5;
    }
    
    /* Logo */
    
    #logo {
    	float: left;
    	width: 270px;
    	height: 76px;
    	margin: 0px;
    	padding: 15px 0px 0px 30px;
    }
    
    #logo h1 {
    	margin: 0;
    	padding: 0;
    	text-transform: lowercase;
    	font: normal 46px Georgia, "Times New Roman", Times, serif;
    }
    
    #logo h2 {
    	margin: -2px 0 0 0;
    	padding: 0;
    	text-transform: uppercase;
    	letter-spacing: 2px;
    	font-size: 10px;
    	font-weight: bold;
    	color: #0A9444;
    }
    
    #logo h2 a {
    	color: #9AA9B1;
    }
    
    #logo a {
    	text-decoration: none;
    	color: #0A9444;
    }
    
    /* Menu */
    
    #menu {
    	float: right;
    	width: 692px;
    	height: 54px;
    	margin-top: 10px;
    }
    
    #menu ul {
    	margin: 0;
    	padding: 0px 0 0 20px;
    	list-style: none;
    	line-height: normal;
    	margin-left: 30px;
    }
    #menu ul li {
      display: block;
      position: relative;
      float: right;
      z-index:10;
    
    }
    #menu li ul { display: none; }
    #menu ul li a {
      display: block;
      	text-decoration: none;
    	text-align: center;
    	text-transform: uppercase;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-weight: bold;;
      color: #0A9444;
      border-top: 1px solid #ffffff;
      padding: 18px 15px 18px 15px;
      background: #0FFFFFF;
      margin-left: 20px;
      white-space: nowrap;
    }
    #menu ul li a:hover { background: #0A9444; 
    color: #FFFFFF;}
    #menu li:hover ul {
      display: block;
      position: absolute;
    }
    #menu li:hover li {
      float: none;
      font-size: 11px;
    }
    #menu li:hover a { background: #0A9444; 
    color: #FFFFFF;}
    
    /* Search */
    
    #search {
    	height: 45px;
    	padding: 0px 0px 40px 0px;
    }
    
    #search form {
    	margin: 0;
    	padding: 12px 0px 0 0;
    }
    
    #search fieldset {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    
    #search input {
    	float: left;
    	font: 12px Georgia, "Times New Roman", Times, serif;
    }
    
    #search-text {
    	width: 120px;
    	height: 18px;
    	padding: 3px 0 0 5px;
    	border: 1px solid #000000;
    	color: #000000;
    }
    
    #search-submit {
    	height: 21px;
    	margin-left: 10px;
    	padding: 0px 2px;
    	border: none;
    	background: #DE1C1D;
    	color: #FFFFFF;
    }
    
    /* Page */
    
    #page {
    	width: 930px;
    	margin: 0 auto;
    }
    
    #page-bgtop {
    	padding: 0px 30px;
    }
    
    /* Content */
    
    #content {
    	float: left;
    	width: 592px;
    }
    .post {
    	margin: 0px 0px 30px 0px;
    }
    
    .post .title {
    	margin: 0px;
    	padding: 0px 0px 5px 0px;
    	color: #232F01;
    }
    
    .post .title a {
    	padding: 4px 35px 4px 15px;
    	background: #0A9444;
    	text-decoration: none;
    	font-weight: normal;
    	color: #FFFFFF;
    }
    
    .post .entry {
    }
    
    .post img {
    	float: left;
    	padding: 15px 0px;
    }
    
    .post .meta {
    	text-align: right;
    	padding-top: 20px;
    	border-bottom: 1px solid #E5E5E5;
    	font-weight: bold;
    	color: #202020;
    }
    
    .post .byline {
    	float: right;
    	margin-top: -30px;
    	font-size: 12px;
    	color: #5E5E5E;
    }
    
    /* Sidebar */
    
    #sidebar {
    	float: right;
    	width: 238px;
    }
    
    #sidebar ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	line-height: normal;
    }
    
    #sidebar li {
    	margin-bottom: 1px;
    }
    
    #sidebar li ul {
    	margin: 0px;
    	padding: 0px 0px 40px 0px;
    }
    
    #sidebar li li {
    	margin: 0;
    	padding: 9px 0px;
    	border: none;
    }
    
    #sidebar h2 {
    	margin: 0px;
    	padding: 0px;
    	border-bottom: 2px solid #EBEBEB;
    	font-size: 160%;
    	font-weight: normal;
    	color: #454E55;
    }
    
    #sidebar h3 {
    	font-size: 77%;
    	color: #454E55;
    }
    
    #sidebar p {
    	margin: 0;
    	line-height: normal;
    	color: #D4C792;
    }
    
    #sidebar a {
    	border: none;
    	text-decoration: none;
    	color: #757E82;
    }
    
    #sidebar a:hover {
    	text-decoration: underline;
    	color: #363636;
    }
    
    /* Submenu */
    
    #submenu {
    }
    
    /* News */
    
    #news {
    }
    
    #news a {
    	font-size: 85%;
    }
    
    /* Footer */
    
    #footer {
    	width: 892px;
    	height: 50px;
    	margin: 0 auto;
    	padding: 20px 0 20px 0;
    	border-top: 1px solid #E5E5E5;
    	color: #757E82;
    }
    
    #footer p {
    	margin: 0;
    	text-align: center;
    	font-size: 77%;
    }
    
    #footer a {
    	text-decoration: underline;
    	color: #757E82;
    }
    
    #footer a:hover {
    	text-decoration: none;
    }
    
    /* CSS by PA */
    
    #google_map{
    	width:600px;
    	height:350px;
    }
    
    .bordered {
    border:1px solid #197F19;
    }
    
    .map_hint  {
    background:none repeat scroll 0 0 #FFFFFF;
    display:none;
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    font-weight:bold;
    padding:3px 6px;
    position:absolute;
    text-align:center;
    white-space:nowrap;
    z-index:100;
    }
    #hint_zoom {
    width:286px;
    }
    #hint_click {
    width:200px;
    }
    #hint_finished {
    width:235px;
    }
    
    #map_error{
    	clear:both;
    }
    
    #thanks {
    	padding: 0px 25px;
    #google_maps_wrap{
    	clear:both;
    }
    
    #button1, #button2{
    	background:none repeat scroll 0 0 #056839;
    	color:#FFFFFF;
    	border:0px none;
    	cursor:pointer;
    	font-size:12px;
    	font-weight:bold;
    	padding:5px 15px;
    	width:125px;
    }
    .stdlight {
    color:#70AF1A;
    }
    
    h3.stdlight {
    color:#70AF1A;
    }
    
    .lowlight {
    color:#097609;
    }
    
    .lowestlight {
    	color:#046838;
    }
    
    h1 .lowestlight{
    	color:#046838;
    }
    .form_detail {
    float:left;
    width:396px;
    }
    
    .form_row {
    margin:0 0 12px;
    overflow:hidden;
    }
    
    .form_row label {
    display:block;
    float:left;
    font-weight:bold;
    margin-top:3px;
    width:120px;
    }
    
    .form_row input {
    background:none repeat scroll 0 0 #FFFFFF;
    border:1px solid #70AF1A;
    color:#535B5F;
    padding:3px 2px;
    }
    
    .error {
    background:none repeat scroll 0 0 #FEEDED;
    border:1px solid #990000;
    color:#990000;
    margin-bottom:12px;
    padding:8px 0;
    text-align:center;
    }
    
    .form_row .form_detail label.list_checkbox {
    width:400px;
    }
    
    .form_row.checkbox_list .form_detail label {
    display:inline;
    font-size:11px;
    margin:2px 10px 8px 0;
    }
    
    .form_row .form_detail label {
    font-size:12px !important;
    font-weight:normal;
    }
    
    .form_detail.button_detail  {
    display:inline;
    margin-left:120px;
    text-align:right;
    }
    
    *
    {
    	margin: 0;
    	padding: 0;
    }
    
    #rotator
    {
    	border: 1px solid #000;
    	cursor: pointer;
    	overflow: hidden;
    	margin: 50px auto 10px;
    	position: relative;
    	width: 400px;
    	height: 300px;
    }
    
    #rotator img
    {
    	border: 0;
    	cursor: pointer;
    	width: 400px;
    	height: 300px;
    }
    
    
    #gallery-wrapper {
    	width: 880px;
    	height: 210px;
    	margin: 20px auto;
    	padding: 10px 40px;
    	background: url(images/img06.jpg) no-repeat 40px 10px;
    }
    
    #gallery {
    	margin: 0px;
    	padding: 0px;
    	color: #FFFFFF;
    }
    
    #gallery img.output {
    	float: left;
    	width: 512px;
    	height: 202px;
    	border: solid 4px #0A9444;
    	background: #0A9444;
    }
    
    #thumbnails {
    	float: right;
    	width: 360px;
    	height: 210px;
    }
    
    #gallery .caption-box {
    	height: 84px;
    	background: #0A9444;
    }
    
    #gallery span.caption {
    	display: block;
    	margin: 10px 0 0 0;
    	padding: 10px 0px 0px 0px;
    	text-align: center;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-weight: bold;
    	font-size: 30px;
    	text-transform: lowercase;
    	font-weight: normal;
    	letter-spacing: -1px;
    }
    
    #gallery span.caption2 {
    	margin: 5px 0 0 0;
    	display: block;
    	text-align: center;
    }
    
    #gallery ul.nav {
    	width: 100%;
    	list-style: none;
    	margin: 0 0 3em 0;
    	padding: 0;
    }
    
    #gallery ul.nav li {
    	margin: 0 0 1em 0;
    	float: left;
    }
    
    #gallery ul.thumbnails {
    	margin: 0;
    	list-style: none;
    	float: left;
    }
    
    #gallery ul.thumbnails li{
    	width: 102px;
    	height: 92px;
    	margin: 0 0 0 10px;
    	padding: 0;
    	float: left;
    	overflow: hidden;
    	position: relative;
    	border: solid 4px #0A9444;
    	text-align: center;
    }
    
    #gallery ul.thumbnails li img {
    	position: absolute;
    	top: -100px;
    	left: -145px;
    	border: solid 4px #0A9444;
    	cursor: pointer;
    }
    
    #gallery ul.thumbnails li img.active {
    	border: solid 4px #FF4747;
    }
    gallery.css

    Code:
    #gallery-wrapper {
    	width: 880px;
    	height: 210px;
    	margin: 20px auto;
    	padding: 10px 40px;
    	background: url(images/img06.jpg) no-repeat 40px 10px;
    }
    
    #gallery {
    	margin: 0px;
    	padding: 0px;
    	color: #FFFFFF;
    }
    
    #gallery img.output {
    	float: left;
    	width: 512px;
    	height: 202px;
    	border: solid 4px #0A9444;
    	background: #0A9444;
    }
    
    #thumbnails {
    	float: right;
    	width: 360px;
    	height: 210px;
    }
    
    #gallery .caption-box {
    	height: 84px;
    	background: #0A9444;
    }
    
    #gallery span.caption {
    	display: block;
    	margin: 10px 0 0 0;
    	padding: 10px 0px 0px 0px;
    	text-align: center;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-weight: bold;
    	font-size: 30px;
    	text-transform: lowercase;
    	font-weight: normal;
    	letter-spacing: -1px;
    }
    
    #gallery span.caption2 {
    	margin: 5px 0 0 0;
    	display: block;
    	text-align: center;
    }
    
    #gallery ul.nav {
    	width: 100%;
    	list-style: none;
    	margin: 0 0 3em 0;
    	padding: 0;
    }
    
    #gallery ul.nav li {
    	margin: 0 0 1em 0;
    	float: left;
    }
    
    #gallery ul.thumbnails {
    	margin: 0;
    	list-style: none;
    	float: left;
    }
    
    #gallery ul.thumbnails li{
    	width: 102px;
    	height: 92px;
    	margin: 0 0 0 10px;
    	padding: 0;
    	float: left;
    	overflow: hidden;
    	position: relative;
    	border: solid 4px #0A9444;
    	text-align: center;
    }
    
    #gallery ul.thumbnails li img {
    	position: absolute;
    	top: -100px;
    	left: -145px;
    	border: solid 4px #0A9444;
    	cursor: pointer;
    }
    
    #gallery ul.thumbnails li img.active {
    	border: solid 4px #FF4747;
    }
    HTML

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <!--
    Design by Free CSS Templates
    http://www.freecsstemplates.org
    Released for free under a Creative Commons Attribution 2.5 License
    
    Title      : Spanning
    Version    : 1.0
    Released   : 20100419
    Description: A two-column fixed-width template suitable for small websites.
    
    -->
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Konnect Services - Helping to build a greener future</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="default.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    @import "gallery.css";
    </style>
    </head>
    <body>
    <div id="wrapper">
    	<div id="header">
    		<div id="logo">
    			<h1><a href="index.html" border="0"><img src="logo.jpg" width="250" border="0"></a>
    		</div>
    		<!-- end div#logo -->
    		<div id="menu">
    <ul id="menu">
      <li><a href="contact.php">Contact</a></li>
      <li><a href="links.html">Links</a></li>
      <li><a href="roofing.html">Roofing</a></li>
      <li><a href="electrical.html">Electrical</a></li>
        <li><a href="how-solar-photovoltaics-work.html">Solar PV</a>
        <ul>
        <li><a href="how-solar-photovoltaics-work.html">How Solar Photovoltaic's work</a></li>
        <li><a href="types-of-panels.html">Different Types of Panels</a></li>
        <li><a href="is-my-home-suitable-for-solar-pv.html">Is my Home Suitable for Solar PV?</a></li>
    	<li><a href="positioning-and-connection-of-the-solar-pv.html">Positioning and Connection of the Solar PV System</a></li>
    	<li><a href="why-use-renewable-energy.html">Why use Renewable Energy?</a></li>
    	<li><a href="feed-in-tariff.html">The Feed In Tariff</a></li>
    	<li><a href="solar-pv-as-an-investment.html">Solar PV as an Investment</a></li>
    	<li><a href="energy-saving-advice.html">Energy Saving Advice</a></li>
    	<li><a href="faqs.html">FAQ's</a></li>
        </ul>
      </li>
        <li><a href="index.html">Home</a></li>
    </ul>
    		</div>
    		<!-- end div#menu -->
    	</div>
    	<div>
    			
    
    		<div id="gallery">
    			
    
    <center><br><table width=892 border=0 cellpadding=5 bordercolor="#0A9444" cellspacing=2 bgcolor="#0A9444">
    <tr valign=top>
    <td width="40"%><img src="family.jpg">
    </td>
    <td><font size="5" colour="#FFFFFF"><div align="left">Helping build a greener future
    <p><font size="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper viverra dolor at porttitor. Vivamus convallis fringilla magna, vel varius sem ultricies vitae.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper viverra dolor at porttitor. Vivamus convallis fringilla magna, vel varius sem ultricies vitae.
    <p>Find out if your home is suitable <a href="map.php">here</a>.
    </div>
    </td>
    </tr>
    </table></center><br><br>
    
    
    			</div>
    
    			</div>
    		</div>
    	</div>
    	<div id="page">
    		<div id="page-bgtop">
    			<div id="content">
    				<div class="post">
    					<h2 class="title"><a href="#">Konnect Services - Solar Energy For Your Home</a></h2>
    					<div class="entry">
                        <h3 class="stdlight"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper viverra dolor at porttitor. Vivamus convallis fringilla magna, vel varius sem ultricies vitae.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper viverra dolor at porttitor. Vivamus convallis fringilla magna, vel varius sem ultricies vitae.
    					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper viverra dolor at porttitor. Vivamus convallis fringilla magna, vel varius sem ultricies vitae.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper viverra dolor at porttitor. Vivamus convallis fringilla magna, vel varius sem ultricies vitae.
    			
    					</div>
    				</div>
    				</div>
    			<!-- end div#content -->
    			<div id="sidebar">
    				<ul>
    					
    					<li>
    						<h2>Is your home suitable?</h2>
    						<ul>
    							<li>Find out if your home is suitable for solar panels <a href="map.php">here.</a></li>
    						</ul>
    					</li>
    									<li>
    						<h2>Why install solar panels?</h2>
    						<ul>
    							<li>1. Example
    							<br>2. Example
    							<br>3. Example
    							<br>4. Example
    							<br>5. Example
    						</ul>
    					</li>
    					<li>
    						<h2>Contact Us</h2>
    						<ul>
    							<li>Email: contact@konnectservices.com
    							<br>Telephone. 01707601328
    						</ul>
    					</li>
    				</ul>
    			</div>
    			<!-- end div#sidebar -->
    			<div style="clear: both; height: 1px"></div>
    		</div>
    	</div>
    	<!-- end div#page -->
    </div>
    <!-- end div#wrapper -->
    <div id="footer">
    <br><center><img src="log1.jpg"><img src="log2.jpg"><img src="log3.jpg"><img src="log4.jpg"><img src="log5.jpg"></center>
    	<p id="links">Konnect Services, Arlingham House, St Albans Road, Hertfordshire, EN6 3PH T. 01707601328 F. 01707601329 E: contact@konnectservices.com
    	<p id="legal">Copyright &copy; 2010 Konnect Services All Rights Reserved. Designed by <a href="http://www.twrnet.co.uk">TWR Net</a> and <a href="http://www.freecsstemplates.org/">FCT</a>.</p>
    </div>
    <!-- end div#footer -->
    <p><br><br>
    </body>
    </html>

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Validate your code. A number of errors point to an element not being closed correctly.

  • #3
    New Coder
    Join Date
    Oct 2003
    Posts
    46
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Seems to have helped. Any idea about the increased line spacing in the header text in IE?

  • #4
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Try setting the line-height as a multiple (straight number, no units) instead of in ems.


  •  

    Posting Permissions

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