PDA

View Full Version : IE shows too-large font on homepage only?



chilyn
Mar 27th, 2009, 08:50 PM
Hi all,

My site, FitnessCulture.ca (http://www.fitnessculture.ca) works fine in all browsers except IE -- no surprise.. I am sure many posts start this way. The oddity is that the text on the homepage shows up much larger than it should in IE7 (I don't have IE6, but I am sure it is even worse there...) -- and it only does this on the homepage.

I have checked the css, the index.php of my template and (I think) have verified that it is not the Doctype error that causes large fonts in IE. The template is a modified version of another template that does -not- have this problem, and the fact that it is unique to the homepage makes me think that it must be some sort of conflicting element there, perhaps with the javascript-y things that are there or some such.

I ran the W3C Validator and found a few errors, but they seem, for the most part, to be module related, and there isn't a lot I can do about that.

I'm at a loss -- any help would be wonderful! :thumbsup:

-- and Be NICE, please -- I never claimed to be an expert and I tried all I could think of or discover on my own. :)

Main Code


<?php
/**
* @copyright Copyright (C) 2005 - 2008 Open Source Matters. All rights reserved.
* @license GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/

// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
$headerstuff = $this->getHeadData();
reset($headerstuff['scripts']);
$moo = key($headerstuff['scripts']);
unset($headerstuff['scripts'][$moo]);
$this->setHeadData($headerstuff);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>


<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/FitnessCulture/css/styles.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/FitnessCulture/css/template.css" type="text/css" />


<!--[if IE 6]>
<style>
body {
background-image: none;
background-color: #fff;
}
</style>
<![endif]-->



</head>
<body>


<div id="header">
<div id="head-frame">
<a id="logo" href="index.php" title="Home">

</a>
<div id="clear"></div>
<div id="navigation">
<?php if($this->countModules('navigation')) : ?>
<jdoc:include type="modules" name="navigation" style="xhtml" />

<script language="javascript" type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/suckerfish/js/moomenu.js"></script>
<?php endif; ?>
</div>

</div>
</div>

<div id="container-1">
<div id="content-top">
<?php if($this->countModules('call2action')) : ?>
<jdoc:include type="modules" name="call2action" style="xhtml" />
<?php endif; ?>

<?php if($this->countModules('callbox')) : ?>
<div id="callbox">

<div id="flash">
<jdoc:include type="modules" name="callbox" style="xhtml" />
</div>

<?php if($this->countModules('quickmenu')) : ?>
<div id="quickmenu">
<jdoc:include type="modules" name="quickmenu" style="xhtml" />
</div>
<?php endif; ?>

<?php if($this->countModules('mid-right')) : ?>
<div id="mid-right">
<jdoc:include type="modules" name="mid-right" style="xhtml" />
</div>
<?php endif; ?>

<div class="clear"></div>

</div>
<?php endif; ?>


</div>
</div>


<div id="container-2">
<?php if($this->countModules('breadcrumbs')) : ?>
<div id="breadcrumbs">
<?php echo JText::_('You are here: <div class="name">Fitness Culture > </div>'); ?>
<jdoc:include type="modules" name="breadcrumbs" style="xhtml" />
</div>
<?php endif; ?>
<div id="frame">
<?php if($this->countModules('frametop')) : ?>
<div id="frametop">

<jdoc:include type="modules" name="frametop" style="xhtml" />
</div>
<?php endif; ?>

<div id="content">
<?php if($this->countModules('boxborder-l')) : ?>
<div id="boxborder-l">
<jdoc:include type="modules" name="boxborder-l" style="xhtml" />
</div><?php endif; ?>

<div id="component" class="left<?php if($this->countModules('index-right')) { ?> index" style="width: 317px;"<?php } elseif($this->countModules('right')) { ?>" style="width: 526px;"<?php } else { ?>"<? } ?>>
<jdoc:include type="component" style="xhtml" />
</div>


<?php if($this->countModules('index-right')) : ?>
<div id="index_right" class="right">
<jdoc:include type="modules" name="index-right" style="xhtml" />
</div>
<?php endif; ?>

<?php if($this->countModules('boxborder-r')) : ?>
<div id="boxborder-r">
<jdoc:include type="modules" name="boxborder-r" style="xhtml" />
</div><?php endif; ?>


<?php if($this->countModules('right')) : ?>
<div id="right" style="float: left; margin-left: 50px; width: 225px; padding-left: 50px;">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
<?php endif; ?>
<div class="clear"></div>
</div>

<?php if($this->countModules('framebottom')) : ?>
<div id="framebottom">

<jdoc:include type="modules" name="framebottom" style="xhtml" />
</div>
<?php endif; ?>

</div>

</div>

<div class="clear"></div>

<div id="footer-container">

<?php include_once('footer-new.php') ?>

<div class="clear"></div>


<div id="credits">
<?php if($this->countModules('credits')) : ?>
<jdoc:include type="modules" name="credits" style="xhtml" />
<?php endif; ?>
</div>


</div>


<script type="text/javascript" src="http://www.fitnessculture.ca/[...]/js/imgRoll.js"></script>
</body>
</html>

CSS -- warning.. a bit bloated from testing


body {
margin: 0px;
padding: 0px;
text-align: center;
background: #fefefe;
}
a, a:link, a:visited, a:active {
text-decoration: none;
color: #0a5da3;
}
a:hover {
color: #999;
text-decoration: none;
}


/* Header container */
#header {
width: 100%;
height: 111px;
background-color: #FFFFFF;
background: url(../images/header-bg.gif) bottom left repeat-x;
position:relative;
z-index: 1;
}

#head-frame {
width: 905px;

height: 111px;

margin: 0 auto;
text-align: left;
padding-bottom:0px;
}


#logo {
background: transparent url(../images/logo.gif) top left no-repeat;
width: 263px;
height: 111px;
padding-top: 3px;
float: left;

}

/* Navigation */

/*#navigation {

margin-left: 263px;
padding-top: 72px;
height: 37px;
width: 642px;

/* font-size: 14px;*/

}
#navigation ul {
list-style: none;
margin: 0;
padding: 3px 0px 0;
}
#navigation ul li {
float: right;
}
/*#navigation ul li a {
color: #fff;
text-decoration: none;
display: block;
padding: 7px 23px 9px 23px;
background: transparent url(../images/navigation_spacer.png) top right no-repeat;
}
*html #navigation ul li a {
background: transparent url(../images/navigation_spacer.gif) top right no-repeat;
}
#navigation ul li a#menulink_7 {
background: none;
}
#navigation ul li a:hover {
color: #7c9fbd;
}*/

*/

#navigation{
clear:both;
display:block;
height:37px;
font-size:14;
}
#navigation .moduletable{
/*margin:0;*/
margin-left: 263px;
padding-top: 72px;
height: 37px;
width: 642px;
}

#navigation ul{
margin:0;
padding:6px 0px 0;
width:auto;
list-style:none;
}
#navigation ul li{
margin:0;
padding:0;
height:37px;
float:right;
position:relative;
}
#navigation ul li a{
/*color:#d0d0d0;
text-transform:uppercase;
padding:10px;*/
height:14px;
/*display: block;*/
background-position:0px 2px;
color: #fff;
text-decoration: none;
display: block;
padding: 7px 23px 9px 23px;
background: transparent url(../images/navigation_spacer.png) top right no-repeat;
}

*html #navigation ul li a {
background: transparent url(../images/navigation_spacer.gif) top right no-repeat;
}

#navigation ul li a#menulink_7 {
background: none;
}

#navigation ul li a:hover{
text-decoration:none;
color: #7c9fbd;
}
#navigation ul li ul {
display:block;
height:auto;
width: 14em;
position:absolute;
z-index:99;
left: -999em;
background-color:#333333;
}

#navigation ul li ul ul {
margin: -40px 0 0 14em;
}

#navigation ul li li {
width: 14em;
}
#navigation ul li li a{
color:#ffffff;
text-transform:none;
display: block;
background:none;
padding:10px;
}

#navigation ul li ul {
left: -999em;
}

#navigation ul li:hover ul ul, #navigation ul li:hover ul ul ul {
left: -999em;
}

#navigation ul li:hover ul, #navigation ul li li:hover ul, #navigation ul li li li:hover ul {
left: auto;
}




/* Main page container */
#container-1 {
width: 905px;
margin: 0 auto;
text-align: left;
}


#breadcrumbs {
padding-bottom: 5px;
padding-left: 10px;
padding-top: 5px;
font-style: italic;
font-size: 11px;
font-weight: bold;
}
#breadcrumbs div {
display: inline;
color: #0a5da3;
}
#content-top {

}


#callbox {
height: 322px;
padding-top: 18px;
padding-bottom: 18px;

}
#flash {
float:left;
padding-right: 0px;
width: 505px;
/*width: 716px;*/
height: 310px;

}

#quickmenu {
float:left;
padding: 0 5px 0 0px;
width: 209px;
height: 310px;

}

#mid-right {
float:left;
padding-left: 7px;
width: 175px;
height: 310px;

}

#container-2 {
width: 905px;
margin: 0 auto;
text-align: left;
/*border: 1px solid;*/
}

#frame {
/*border: 1px solid;*/

}
*html #frame {

}

#frametop {
/*border: 1px solid;*/

}
*html #frametop {

}



#content {
/*border: 1px solid;*/

}
*html #content {


}


#boxborder-l {
/*background: transparent url(../images/box-border-L.png) top right repeat-y;*/
width: 42px;
float: left;

}

#component.index {
background-color: #ffffff;
float: left;
border: none;
/*padding: 0px 16px 0px 16px;*/

}

#component {
background-color: #f5f5f5;
/*border-left: 2px solid #2e3333;
border-right: 2px solid #2e3333;*/

padding: 0px 16px 0px 16px;

}


/*html #component {
width: 98%;
}
*:first-child+html #component {
width: 98%;
}*/

#index_right {
background-color: #ffffff;
width: 419px;
height: 300px;
padding: 0px 16px 0px 16px;
float: left;
border-left: 21px solid /*#eeeeee*/ #2e3333;
}

#boxborder-r {
/*background: transparent url(../images/box-border-R.png) top left repeat-y;*/
width: 42px;
float: left;

}

#framebottom {
padding-bottom: 10px;
}
*html #framebottom {

}


#right h2 {
text-align: right;
}

/* Footer */
#footer-container {
margin-top: 15px;
width: 100%;
background-color: #e4e4e4;
padding-top: 20px;
}

#footer {
margin: 0px auto;
height: 240px;
width: 905px;
background-color: #ffffff;
}

#footer-top {

}

#footer-bg {
/*background: transparent url(../images/footer-bg.gif) top left repeat-y;*/
height: 240px;
text-align: left;
}

#footer_navigation {
background-color: #ffffff;
float: left;
width: 200px;
height: 240px;
/*padding: 3px 10px;*/
}

#footer_nav2 {
background-color: #ffffff;
float: left;
width: 316px;
height: 240px;
border-left: 1px solid #d8d7d7;
}

#pointer {
background: #ffffff;

float: left;
width: 27px;
height: 240px;
border-left: 11px solid #2e3333;
}

#news {
background-color: #ffffff;

float: left;
width: 334px;
height: 233px;
padding-top: 7px;
padding-right: 16px;
}

#footer-bottom {

}

#credits {
margin-top: 20px;
padding-top: 20px;
padding-bottom: 0px;
height: 50px;
}


/* Misc classes */
.clear {
clear: both;
}

.width-60 {
width: 60%;
}
.width-75 {
width: 75%;
}
.width-50 {
width: 50%;
}
.width-25 {
width: 25%;
}
.width-40 {
width: 40%;
}
.width-35 {
width: 35%;
}
.moduletableinline {
display: inline;
}

Styles CSS -- warning.. a bit bloated


body {
font: 12px Verdana, Helvetica, Arial, sans-serif;
/*line-height: 18px; */
background-color: #fff;
color: #000;
text-align: left;
}
h1 {
color: #222222;
font: 20px georgia, 'Times New Roman', times, serif;
}
h2, h3 {
color: #07579b;
font: 18px Verdana, Helvetica, Arial, sans-serif;
}
h3 {
margin: 8px 0 2px;
}

.left {
float: left;
display: inline;
}
.right {
float: right;
display: inline;
}
.text-right {
text-align: right;
}
.small {
font-size: 10px;
}
.times {
font-family: Times, sans-serif;
font-style: italic;
}


Thanks again!

Excavator
Mar 27th, 2009, 09:23 PM
Hello chilyn,
That's a lot of CSS you have there, not sure where the conflict is coming from but try removing the bit in red just to see what happens -
body {
font: 12px Verdana, Helvetica, Arial, sans-serif;
/*line-height: 18px; */
background-color: #fff;
color: #000;
text-align: left;
}

chilyn
Mar 27th, 2009, 09:49 PM
Thanks for your quick reply!

Yeah, the CSS is a bear -- much of it is commented out, but it is big anyway. I didn't build it! :P

I actually tried that last night. Tried it again now -- the size is still bigger on the home page content than it is on all the other pages. The text also gets smaller in the top nav-bar.

The funny thing is, in the footer section, the text is big on the home page and smaller on the other pages -- but the text in the top-nav remains at a constant smaller on all pages.

Makes me wonder if it is maybe the navbar module or CSS that is causing the conflict. The nav CSS has been severely hacked, so... I wouldn't be surprised.

chilyn
Mar 27th, 2009, 10:14 PM
EDITED:

So I cleaned up my Navigation CSS a bit and discovered that that changed absolutely nothing -- from what I can tell, anyway.

Here is the cleaned up code:



/* Navigation */
#navigation {
margin-left: 263px;
padding-top: 58px;
height: 37px;
width: 642px;
font-size: 14px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 20px 0 0 40px;
}
#navigation ul li {
float: left;
}
#navigation ul li a {
color: #fff;
text-decoration: none;
display: block;
padding: 7px 25px 9px 25px;
background: transparent url(../images/navigation_spacer.png) top right no-repeat;
}
*html #navigation ul li a {
background: transparent url(../images/navigation_spacer.gif) top right no-repeat;
}

#navigation ul li a:hover {
color: #7c9fbd;
}

chilyn
Mar 27th, 2009, 11:50 PM
It turns out that the problem is a result of a component called Front Page Slideshow. I am not sure what causes it yet, but I think it must have to do with the code or css of the slideshow component.

It is proprietary (as in I purchased a license) so I guess I will have to take it up with them on their help forums?

Could a mod pop up and let me know if it is a no-no to post the code here? I am not sure what kind of help they will give me on their forums and would like a back up plan. :)

Excavator
Mar 28th, 2009, 12:26 AM
Is that js then?
Good catch though, I did not look there.

chilyn
Mar 28th, 2009, 12:59 AM
Yeah it is a jQuery thing I believe.

All neatly wrapped up in PHP -- even the css for the templates is a php file.

And it has nothing to do with the modifications I made to the template style. Same issue happens even with the default template.

I submitted a support ticket, but I am given to understand their support is very slow and not always nice.

I didn't see anyone else having the same problem so I figure it is, maybe, a conflict with another module? Except for the fact that it only fixes if I turn off the slideshow, doesn;t matter if the slideshow is on and I turn off all the other modules.

Any ideas?