Line spacing difference between IE and FF

[Aeropars]

Hi Guys,

I'm relativly new to CSS but understand the fundamentals behind it.

I run a website which is Joomla based and I've modified the default template to make it look as I want. I'm having a small but annoying problem with one element of the pages.

Heres the page: < sorry, no personal urls >

If you view this in IE and FF you'll see that the middle colum's title text is different. The side colums header is is ok and sits exactly as it should.

Can anyone help to ensure that its the same acoss browsers?

Many thanks.

Lee

[edited by: tedster at 7:58 am (utc) on June 27, 2008]

[D_Blackwell]

Aeropars- Welcome to WebmasterWorld. No personal links allowed. It's going to get axed

Post enough HTML & CSS to recreate the problem and post the sample code. (There's a good chance that the process of stripping the code down to the problem will reveal the problem.)

[Aeropars]

Hi, Thanks for the reply.

I'm not sure i know where the problem lies really so unless I post the complete page output and CSS I doubt anyone would be able to help.

Is that allowed?

[4css]

Hi Aeropars,

Welcome to WebmasterWorld!

It looks like it could be an issue with a margin or padding somewhere. Have you checked your css file for that area? You might want to post the css for the area that you are having difficulty with, along with the area of (x)html as well.

Also, take a look at the Forum Charter [webmasterworld.com] which will give you an explanation of how to post things for review.

[Aeropars]

Heres the code for the page as it is in the template. The problem will be somewhere in here i think as the other bits are OK.

<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="808">
<tr>
<td class="outline">
 <div id="buttons_outer">
  <div id="buttons_inner">
<div id="buttons">
<?php mosLoadModules ( 'user3', -1); ?>
</div>
</div>
 </div>
 <div id="search_outer">
  <div id="search_inner">
  <?php mosLoadModules ( 'user4', -1 ); ?>
  </div>
 </div>
 <div class="clr"></div>
 <div id="header_outer">
 <div id="header">
 &nbsp;
 </div>
 <!--<div id="top_outer">
<div id="top_inner">
<?php
 if ( mosCountModules( 'top' ) ) {
 mosLoadModules ( 'top', -2 );
 } else {
 ?>
 <span class="error">Top Module Empty</span>
 <?php
 }
 ?>
 </div>
 </div>-->
 </div>
<div id="adsense"> <?php mosLoadModules ( 'adsense', -1 ); ?> </div>
 <div id="left_outer">
 <div id="left_inner">
 <?php mosLoadModules ( 'left', -2 ); ?>
 </div>
 </div>
 <div id="content_outer">
<div id="content_inner">
<?php
 if ( mosCountModules ('banner') ) {
 ?>
 <table border="0" cellpadding="0" cellspacing="0" width="100%" class="content_table">
<tr>
<td>
<div id="banner_inner">
<br />
 <?php mosLoadModules( 'banner', -1 ); ?><br />
</div>
</td>
</tr>
</table>
<?php
 }
 ?>
 <table border="0" cellpadding="0" cellspacing="0" width="100%" class="content_table">
<tr valign="top">
<td width="99%">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="content_table">
<?php
if ($colspan > 0) {
?>
<tr valign="top">
<?php
 if ( $user1 > 0 ) {
 ?>
 <td width="50%">
 <div class="user1_inner">
 <?php mosLoadModules ( 'user1', -2 ); ?>
 </div>
 </td>
 <?php
 }
 if ( $colspan == 3) {
 ?>
<td width="2">
<img src="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/images/spacer.png" alt="" title="spacer" border="0" height="10" width="2" />
</td>
<?php
}
 if ( $user2 > 0 ) {
 ?>
 <td width="50%">
 <div class="user2_inner">
 <?php mosLoadModules ( 'user2', -2 ); ?>
 </div>
 </td>
 <?php
 }
?>
</tr>
<tr>
<td colspan="<?php echo $colspan; ?>">
<img src="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/images/spacer.png" alt="" title="spacer" border="0" height="2" width="100" /><br />
</td>
</tr>
<?php
}
?>
<!--<tr>
<td colspan="<?php echo $colspan; ?>">
<div id="pathway_text">
<?php mosPathWay(); ?>
</div>
</td>
</tr> -->
<tr>  
<td colspan="<?php echo $colspan; ?>" class="body_outer">
  <?php mosMainBody(); ?>
</td>
</tr>
</table>
</td>
<?php
if ( $right > 0 ) {
 ?>
 <td>
 <div id="right_outer">
 <div id="right_inner">
 <?php mosLoadModules ( 'right', -2 ); ?>
 </div>
 </div>
 </td>
 <?php
 }
 ?>
</tr>
</table>
 </div>
 </div>
 </td>
 </tr>
 </table>
</div>

The error coudl be anywher ein this section of CSS. sorry its so long but as I dont know where the error is its difficult to pin this down to a few lines of code.

[/* CSS Document */

html {
height: 100%;
}

body {
height: 100%;
margin-bottom: 1px;
}

.clr {
clear: both;
}

.outline {
border: 0px solid #cccccc;
background: #ffffff;
padding: 2px;
}

#buttons_outer {
width: 635px;
margin-bottom: 2px;
margin-right: 2px;
float: left;

}

#buttons_inner {
border: 1px solid #cccccc;
height: 21px !important;
height: 23px;
}

#pathway_text {
overflow: hidden;
display: block;
line-height: 25px !important;
line-height: 22px;
padding-left: 4px;
border: 1px solid #ccc;
margin-bottom: 2px;
/* background-image: url(../images/subhead_bg.png); */
padding-top: 2px;
height: 60px;
}

#pathway_text img {
margin-left: 5px;
margin-right: 5px;
margin-top: 6px;
}

#buttons {
float: left;
margin: 0px;
padding: 0px;
width: auto;
}

#banner_inner {
float: left;
width: 150px;
}

ul#mainlevel-nav
{
list-style: none;
padding: 0;
margin: 0;
font-size: 0.8em;
}

ul#mainlevel-nav li
{
background-image: none;
padding-left: 0px;
padding-right: 0px;
float: left;
margin: 0;
font-size: 11px;
line-height: 21px;
white-space: nowrap;
border-right: 1px solid #cccccc;
}

ul#mainlevel-nav li a
{
display: block;
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
color: #333333;
background: transparent;
}

#buttons>ul#mainlevel-nav li a { width: auto; }

ul#mainlevel-nav li a:hover
{
color: #fff;
background: #c64934;
}

#search_outer {
float: left;
width: 165px;
}

#search_inner {
border: 1px solid #cccccc;
padding: 0px;
height: 21px !important;
height: 23px;
overflow: hidden;
}

#search_inner form {
padding: 0;
margin: 0;
}

#search_inner .inputbox {
border: 0px;
padding: 3px 3px 3px 5px;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
color: #c64934;
}

#header_outer {
text-align: left;
border: 0px;
margin: 0px;
}

#header {
float: left;
padding: 0px;
margin-right: 2px;
width: 801px;
height: 183px;
background: url(../images/header.jpg) no-repeat;
}

#top_outer{
float: left;
width: 165px;
}

#top_inner {
border: 1px solid #cccccc;
padding: 2px;
height: 144px !important;
height: 150px;
overflow: hidden;
float: none !important;
float: left;
}

#left_outer {
float: left;
margin-top: 2px;
width: 165px;
}

#left_inner {
border: 1px solid #cccccc;
padding: 2px;
float: none !important;
float: left;
}

#content_outer {
padding: 0px;
margin-top: 0px;
margin-left: 2px;
/** border: 1px solid #cccccc; **/
float: left;
width: 635px;
}

#content_inner{
float: none !important;
float: left;
padding: 0;
padding-top: 2px;
margin: 0;
}

table.content_table {
width: 100%;
padding: 0px;
margin: 0px;
}

table.content_table td {
padding: 0px;
margin: 0px;
}

#right_outer {
margin-left: 2px;
width: 165px;
}

#right_inner {
float: none !important;
float: left;
border: 1px solid #cccccc;
padding: 2px;
}

.user1_inner {
border: 1px solid #cccccc;
float: none !important;
float: left;
margin: 0px;
padding: 2px;
}

.user2_inner {
border: 1px solid #cccccc;
float: none !important;
float: left;
margin: 0px;
padding: 2px;
}

table td.body_outer {
padding: 2px;
border: 1px solid #ffffff;

}

.maintitle {
color: #ffffff;
font-size: 40px;
padding-left: 15px;
padding-top: 20px;
}

.error {
font-style: italic;
text-transform: uppercase;
padding: 5px;
color: #cccccc;
font-size: 14px;
font-weight: bold;
}

/** old stuff **/

.back_button {
float: left;
text-align: center;
font-size: 11px;
font-weight: bold;
border: 3px double #cccccc;
width: auto;
background: url(../images/button_bg.png) repeat-x;
padding: 0px 10px;
line-height: 20px;
margin: 1px;
}

.pagenav {
text-align: center;
font-size: 11px;
font-weight: bold;
border: 3px double #cccccc;
width: auto;
background: url(../images/button_bg.png) repeat-x;
padding: 0px 10px;
line-height: 20px;
margin: 1px;
}

.pagenavbar {
margin-right: 10px;
float: right;
}

#footer {
text-align: center;
padding: 3px;
}

ul
{
margin: 0;
padding: 0;
list-style: none;
}

li
{
line-height: 15px;
padding-left: 15px;
padding-top: 0px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: 0px 2px;
}

td {
text-align: left;
font-size: 11px;
/* line-height: 120%; */
}

body {
margin: 15px;
height: 100%;
padding: 0px;
font-family: Arial, Helvetica, Sans Serif;
line-height: 120%;
font-size: 11px;
color: #333333;
background-image: url(../images/bg.jpg);
background-repeat: repeat-y;
background-position: center;

}

/* Joomla core stuff */
a:link, a:visited {
color: #c64934; text-decoration: none;
font-weight: bold;
}

a:hover {
color: #900;text-decoration: none;
font-weight: bold;
}

table.contentpaneopen {
width: 99%;
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
margin-left: 1px;
}

table.contentpaneopen td {
padding-right: 5px;
}

table.contentpaneopen td.componentheading {
padding-left: 4px;
}

table.contentpane {
width: 100%;
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
margin: 0px;
}

table.contentpane td {
margin: 0px;
padding: 0px;
}

table.contentpane td.componentheading {
padding-left: 4px;
}

table.contentpaneopen fieldset {
border: 0px;
border-bottom: 1px solid #eee;
}

.button {
color: #c64934;
font-family: Arial, Hevlvetica, sans-serif;
text-align: center;
font-size: 11px;
font-weight: bold;
border: 3px double #cccccc;
width: auto;
background: url(../images/button_bg.png) repeat-x;
padding: 0px 5px;
line-height: 18px !important;
line-height: 16px;
height: 26px !important;
height: 24px;
margin: 1px;
}

.inputbox {
padding: 2px;
border:solid 1px #cccccc;
background-color: #ffffff;
}

.componentheading {
/*background: url(../images/subhead_bg.png) repeat-x; */
/*color: #FFFFFF; */
/*text-align: left; */
/*padding-top: 1px; */
/*padding-left: 4px; */
/*height: 21px; */
/*font-weight: bold; */
/*font-size: 10px; */
/*text-transform: uppercase; */

background: url(../images/subhead_bg.png) repeat-x;
color: #FFFFFF;
text-align: left;
padding-left: 4px;
height: 21px;
line-height: 21px;
font-weight: 900;
font-size: 12px;
text-transform: uppercase;
margin: 0 0 2px 0;
}

h1 {
font-size:12px;
}

.contentcolumn {
padding-right: 5px;
}

.contentheading {
height: 30px;
color: #c64934;
font-weight: bold;
font-size: 14px;
white-space: nowrap;
}

.contentpagetitle {
font-size: 16px;
font-weight: bolder;
color: #cccccc;
text-align:left;
}

table.searchinto {
width: 100%;
}

table.searchintro td {
font-weight: bold;
}

table.moduletable {
width: 100%;
margin-bottom: 5px;
padding: 0px;
border-spacing: 0px;
border-collapse: collapse;
}

div.moduletable {
padding: 0;
margin-bottom: 20px;
}

table.moduletable th, div.moduletable h3 {
background: url(../images/subhead_bg.png) repeat-x;
color: #FFFFFF;
text-align: left;
padding-left: 4px;
height: 21px;
line-height: 21px;
font-weight: 900;
font-size: 12px;
text-transform: uppercase;
margin: 0 0 2px 0;
}

table.moduletable td {
font-size: 11px;
padding: 0px;
margin: 0px;
font-weight: normal;
}

table.pollstableborder td {
padding: 2px;
}

.sectiontableheader {
font-weight: bold;
background: #f0f0f0;
padding: 4px;
}

.sectiontablefooter {

}

.sectiontableentry1 {
background-color : #ffffff;
}

.sectiontableentry2 {
background-color : #FFCCCC;
}

.small {
color: #999999;
font-size: 11px;
}

.createdate {
height: 15px;
padding-bottom: 10px;
color: #999999;
font-size: 11px;
}

.modifydate {
height: 15px;
padding-top: 10px;
color: #999999;
font-size: 11px;
}

table.contenttoc {
border: 1px solid #cccccc;
padding: 2px;
margin-left: 2px;
margin-bottom: 2px;
}

table.contenttoc td {
padding: 2px;
}

table.contenttoc th {
background: url(../images/subhead_bg.png) repeat-x;
color: #666666;
text-align: left;
padding-top: 2px;
padding-left: 4px;
height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
}

a.mainlevel:link, a.mainlevel:visited {
display: block;
/*background: url(../images/menu_bg.png) no-repeat; */
/*border-bottom: 1px solid #cccccc; */
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #cc3333;
text-align: left;
/*padding-top: 5x; */
padding-top: 0x;
padding-bottom: 0x;
/*padding-left: 18px; */
padding-left: 4px;
/*height: 20px !important; */
height: 15px !important;
height: 25px;
width: 97%;
text-decoration: none;
}

a.mainlevel:hover {
background-position: 0px -25px;
text-decoration: none;
color: #ffffff;
background: #cc3333;
}

a.mainlevel#active_menu {
color:#660000;
font-weight: bold;
}

a.mainlevel#active_menu:hover {
color: #660000;
}

a.sublevel:link, a.sublevel:visited {
padding-left: 1px;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #c64934;
text-align: left;
}

a.sublevel:hover {
color: #900;
text-decoration: none;
}

a.sublevel#active_menu {
color: #333;
}

.highlight {
background-color: Yellow;
color: Blue;
padding: 0;
}
.code {
background-color: #ddd;
border: 1px solid #bbb;
}

form {
/* removes space below form elements */
margin: 0;
padding: 0;
}

div.mosimage {
border: 1px solid #ccc;
}

.mosimage {
border: 1px solid #cccccc;
margin: 5px
}

.mosimage_caption {
margin-top: 2px;
background: #efefef;
padding: 1px 2px;
color: #666;
font-size: 10px;
border-top: 1px solid #cccccc;
}

span.article_seperator {
display: block;
height: 1.5em;
}

.ImageFrame_none {
border:#000000;
margin-top: 5px;
}

[4css]

Ok, here are a couple of things that I found within your code.

#top_inner {
border: 1px solid #cccccc;
padding: 2px;
height: 144px !important;
height: 150px;
overflow: hidden;
float: none !important;
float: left;
} 

In the above code you have height mentioned twice. And you have float mentioned twice. If the important is what you need, then I would suggest removing the portions that you don't need.

<!--<div id="top_outer">
<div id="top_inner">
<?php
if ( mosCountModules( 'top' ) ) {
mosLoadModules ( 'top', -2 );
} else {
?>
<span class="error">Top Module Empty</span>
<?php
}
?>
</div>
</div>--> 

above, Is there a reason why you have this area commented out?

<!--<tr>
<td colspan="<?php echo $colspan; ?>">
<div id="pathway_text">
<?php mosPathWay(); ?>
</div>
</td>
</tr> -->

above, You also have this commented out as well.

a.mainlevel:link, a.mainlevel:visited {
display: block;
/*background: url(../images/menu_bg.png) no-repeat; */
/*border-bottom: 1px solid #cccccc; */
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #cc3333;
text-align: left;
/*padding-top: 5x; */
padding-top: 0x;
padding-bottom: 0x;
/*padding-left: 18px; */
padding-left: 4px;
/*height: 20px !important; */
height: 15px !important;
height: 25px;
width: 97%;
text-decoration: none;
} 

above, You have height mentioned twice in here as well.

.button {
color: #c64934;
font-family: Arial, Hevlvetica, sans-serif;
text-align: center;
font-size: 11px;
font-weight: bold;
border: 3px double #cccccc;
width: auto;
background: url(../images/button_bg.png) repeat-x;
padding: 0px 5px;
line-height: 18px !important;
line-height: 16px;
height: 26px !important;
height: 24px;
margin: 1px;
} 

above, You have a double mention of line-height in here

/** old stuff **/
.back_button {
float: left;
text-align: center;
font-size: 11px;
font-weight: bold;
border: 3px double #cccccc;
width: auto;
background: url(../images/button_bg.png) repeat-x;
padding: 0px 10px;
line-height: 20px;
margin: 1px;
}
.pagenav {
text-align: center;
font-size: 11px;
font-weight: bold;
border: 3px double #cccccc;
width: auto;
background: url(../images/button_bg.png) repeat-x;
padding: 0px 10px;
line-height: 20px;
margin: 1px;
}
.pagenavbar {
margin-right: 10px;
float: right;
}
#footer {
text-align: center;
padding: 3px;
}
ul
{
margin: 0;
padding: 0;
list-style: none;
}
li
{
line-height: 15px;
padding-left: 15px;
padding-top: 0px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: 0px 2px;
}
td {
text-align: left;
font-size: 11px;
/* line-height: 120%; */
}
body {
margin: 15px;
height: 100%;
padding: 0px;
font-family: Arial, Helvetica, Sans Serif;
line-height: 120%;
font-size: 11px;
color: #333333;
background-image: url(../images/bg.jpg);
background-repeat: repeat-y;
background-position: center;
} 

The above code section you have marked as old stuff, yet it is still within your css file and still able to be read.

I'm not sure if any of this is the cause of your problem, also, have you tried to validate your css file to see if it validates?

The error could also be within your php. Someone with the knowledge of how to read php will need to go through that.

[Aeropars]

Thanks for the reply.

I'll address the double posting of parameters immediatly.

The commented out stuff is simple because I was experimenting with the template and I didnt want to lose the code. Now i've got it how I want i could well remove it.

The 'old code' part seems to have been put there by the publisher. This is a standard joomla installation where I ammended the template to suite my neads so whether its best practice or not i have no idea.

I did try a validation and it said there was about 25 errors. Not sure if i have the knowledge to correct them though.

[Aeropars]

Well, I deleted 'old stuff' and it totally screwed the layout so its obviously not redundant code.

I'm still playing with the other mentioned notes.

[Aeropars]

Well, I commented out the duplicates. No change to the site that I can see but the problem still exists. I'll post my CSS validation in a second.

[Aeropars]

Sorry for all the replies, just updating what i have done incase anyone can help.

The CSS now validates but the problem still occurs.

[Xapti]

Generally speaking, it's good to let user's use whatever font size or line spacing they want (their browser's default). Assuming that this problem may be comming from the fact that the browser's defaults are different (or different font size), then you should just design in a flexible manner to allow both sizes.
If IE is acting differently for any other reason, look for any hacks in the CSS which may trigger for only certain browsers, as well as conditional comments for IE...

You may also want to ensure a doctype is being placed on the page, so that the browsers are attempting to run it in the same way. As well, having it validated by the W3C validator may help detect any discrepancies which are causing the different browsers to trigger different spacing.

Using a web developper plugin may also help diagnose problems ( CSSviewer, Web developper, Firebug)

[Aeropars]

I'm not that good with CSS to be honest. Just fumble my way through it really so I'm not sure what I'd be looking for.

I understand abotu developing in a flexible manner but this was a pre written template which would take an age to rewrite.

I validated the HTML but have no idea what half of it is going on about. I searched the templates code but cant find the parts its on about so i presume its joomla generated HTML.

[4css]

Hi Aeropars,

If you load one of the tool bars as stated above by Xapti, you can find the area with the tool bar on the browser and look for the code within the area you are having a problem. It will give you the names of the tags to look for in the css.

I have only used the webdev tool bar for firefox. You might want to try those plugins to see if they help.

You have fixed your other errors, and it is still possible that something in the css is causing the issue. I'm wondering if it is a margin/padding issue.I'm also wondering if there could be an error with your php?

[Aeropars]

Thanks for the reply. That tool is what I use to edit my site so I've played about thw the CSS to get it how I wanted. Oddly enough it did work on both firefox and IE but then all of a sudden it happened when I cant remember changing anything.