...

View Full Version : Text displaying different size in FF and IE



tomraffe
05-30-2010, 09:25 PM
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


#/*
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



#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


<!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>

Apostropartheid
05-30-2010, 09:44 PM
Validate your code. A number of errors point to an element not being closed correctly.

tomraffe
05-30-2010, 11:28 PM
Seems to have helped. Any idea about the increased line spacing in the header text in IE?

Apostropartheid
05-30-2010, 11:46 PM
Try setting the line-height as a multiple (straight number, no units) instead of in ems.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum