PDA

Click to See Complete Forum and Search --> : Title photo does not appear properly in Internet Explorer 7 IE7

shirestudios
04-30-2008, 07:17 AM
I recently added a title text to overlap my banner on my site: joomla.rojasfam.com

Please check this site out in Firefox AND IE7.

You will notice that in IE7 the title: "Home for Bible Translators" is down too far.

I would like this title to be positioned just like it is in Firefox (and safari).

Any suggestions?


/* CSS Document */

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

body {
background-color: #225495;
margin: 0;
}

div#center {
height: 100%;
margin: 0 auto;
min-width: 750px;
max-width: 1050px;
width: expression(document.body.clientWidth > 1050? "1050px": "auto" );
text-align: center;
background: url(../images/vd_background.jpg) left top repeat-y;
}

div#wrapper {
height: 100%;
background: url(../images/vd_background.jpg) right top repeat-y;
}

a:link, a:visited {
color: #1543d8;
font-weight: normal;
text-decoration: none;
}

a:hover {
color: #B30000;
text-decoration: underline;
}

h1 {
font-weight: normal;
font-size: 18px;
color: #000066;
}

h2 {
font-weight: normal;
font-size: 16px;
color: #000066;
}

td, p, div, span {
font-family: Tahoma, Helvetica, sans-serif;
font-size: 14px;
color: #000066;
line-height: 130%;
text-align: left;
}

h3, .componentheading {
color: #000066;
font-weight: normal;
font-size: 18px;
text-align: left;
font-family: Helvetica, Arial, sans-serif;
padding: 4px 0;
margin: 10px 0;
border-bottom: 1px solid #ccc;
}

.componentheading {
padding: 0;

}

.contentheading {
height: 35px;
vertical-align: bottom;
padding: 0;
margin: 0;
font-size: 13px;
font-family: Helvetica, Arial, sans-serif;
color: #333;
font-weight: bold;
}

.buttonheading {
vertical-align: bottom;
}

.sectiontableheader {
font-weight: bold;
border-bottom: 1px solid #ccc;
}

table.contenttoc {
margin-left: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
padding: 5px;
}

span.small, td.createdate {
font-size: 11px;
font-weight: normal;
color: #999;
}

a.mainlevel {display: block;
background: url(../images/vd_menu_bullet.png) 0 -3px no-repeat;
padding-left: 78px;
height: 20px;}

div.clr {
clear: both;
}

div#center {
height: 100%;
text-align: center;
}

div#wrapper {
height: 100%;
margin-left: auto;
margin-right: auto;
min-width: 750px;
max-width: 1050px;
width: expression(document.body.clientWidth > 1050? "1050px": "auto" );


}

div#whitebg {
margin: 0 15px;
background: #fff;
}

#header {
background: #ffffff url(../images/vd_headerpic.jpg) no-repeat 5px 5px;
padding:5px;
width:1010px;
height:200px;
position: relative;
z-index: 100;
}
#header h1 {
width: 578px;
height: 77px;
background: url(../images/HBTitle.png);
text-indent: -999em;
position: absolute;
left: -3px;
bottom: -25px;
}

span.header {
display: block;
line-height: 90%;
vertical-align: bottom;
padding-left: 30px;
padding-top: 80px;
font-family: Times New Roman, Times, serif;
font-size: 36px;
color: #000066;
}
span.subhead {
font-family: Times New Roman, Times, serif;
font-size: 12px;
color: #CFEDC8;
padding-left: 30px;
}

div#padding {
padding-bottom: 14px;
}

div#horizsep {
height:1px;
overflow: hidden;
background: #ccc;
margin-top: 15px;
margin-bottom: 15px;
}

div#divider {
border: 1px solid #fff;
background: url(../images/vd_vert_sep.png) repeat-y;
background-position: 25% 0 !important;
background-position: 26% 0;
}

div.thinsep {
clear: both;
margin-top: 15px;
height: 5px;
overflow: hidden;
background: #000 url(../images/vd_header.jpg) 0 0 no-repeat;
}

div#footer {
clear: both;

margin-top: 15px;
padding: 5px 0;
text-align: center;
color: #999;
font-size: 10px;
}


div#main {
margin-left: 25%;

float: none;
width: auto !important;
width: 100%;
}

div#main_padding {
padding: 0 15px;
float: none;
width: auto !important;
width: 100%;
}

div#sidebar {
float: left;
width: 25%;
}

div#sidebar_padding {
padding: 0 15px;
float: none;
width: auto !important;
width: 100%;
}

.menu {
margin: 0;
padding: 0;
border: 1px solid #EEEEEE;
border-bottom: 0;
}
.menu li {
list-style: none;
float: left;
width: 100%;
}
.menu a {
display: block;
height: 34px;
padding: 0 0 5px 20px;
background: url(../images/bgOFF.gif);
text-decoration:none;
}
.menu a span {
line-height: 34px;
color:#000066;
}
.menu a:hover {
background: url(../images/bgON2.gif);
}
.menu a:hover span {
color:#B30000;
}

/* stylefour*/
#stylefour{position:relative;display:block;height:42px;font-size:13px;
font-weight:bold;background:transparent url(../images/bgOFF.gif) repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;border-top:2px solid #B30000;}


#stylefour ul{margin:0;padding:0;list-style-type:none;width:auto;}

#stylefour ul li{display:block;float:left;margin:0;}


#stylefour ul li a{display:block;float:left;color:#000066;text-decoration:none;
padding:11px 20px 0 20px;height:23px;
background:transparent url(../images/bgDIVIDER.gif) no-repeat top right;}


#stylefour ul li a:hover,#stylefour ul li a.current{color:#FFCD99;
background:#fff url(../images/bgON2.gif) repeat-x top left;}


span.pathway {
float: left;
line-height: 20px;
}



Thanks!

ShireStudios
Centauri
04-30-2008, 07:44 AM
There is an xml declaration preceding the doctype :<?xml version="1.0" encoding="utf-8"?>Delete that - anything coming before the doctype with put IE into quirks mode.
chetan1
05-01-2008, 04:48 AM
Centauri is right.One more thing is that check out it thru online editor.U would get to know to bugs and fix them.Sometimes tags are not closed and producing errors.









web design (http://www.webdesigningcompany.net)
shirestudios
05-01-2008, 06:09 AM
I am sorry...

here is the sample from the top of the code:


<?php
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); JHTML::_('behavior.mootools');
// needed to seperate the ISO number from the language file constant _ISO
$iso = split( '=', _ISO );
// xml prolog
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<!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">
<head>
<script type="text/javascript" src="http://joomla.rojasfam.com/templates/ss_bibletranslators/reflection.js"></script>
<script type="text/javascript" src="http://joomla.rojasfam.com/templates/ss_bibletranslators/instant.js"></script>
<script type="text/javascript" src="http://joomla.rojasfam.com/templates/ss_bibletranslators/reflex.js"></script>

<?php
if ( $my->id ) {
initEditor();
}
mosShowHead();


?>


What exactly do I need to remove?

Thanks..

ShireStudios
Centauri
05-01-2008, 06:45 AM
<?php
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); JHTML::_('behavior.mootools');
// needed to seperate the ISO number from the language file constant _ISO
$iso = split( '=', _ISO );
// xml prolog
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<!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">
<head>
<script type="text/javascript" src="http://joomla.rojasfam.com/templates/ss_bibletranslators/reflection.js"></script>
<script type="text/javascript" src="http://joomla.rojasfam.com/templates/ss_bibletranslators/instant.js"></script>
<script type="text/javascript" src="http://joomla.rojasfam.com/templates/ss_bibletranslators/reflex.js"></script>

<?php
if ( $my->id ) {
initEditor();
}
mosShowHead();


?>
shirestudios
05-01-2008, 06:53 AM
Okay...I removed what you said....

But it had an error with the php file...I realized I shouldn't delete that last ?> that you highlighted...

I re-added it and the site loaded fine, but I still can't get that text image to align properly..

Can you check it out again?

Thanks!

FINAL:

<?php
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); JHTML::_('behavior.mootools');
// needed to seperate the ISO number from the language file constant _ISO
$iso = split( '=', _ISO );
?>
<!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">
<head>
<script type="text/javascript" src="http://joomla.rojasfam.com/templates/ss_bibletranslators/reflection.js"></script>
<script type="text/javascript" src="http://joomla.rojasfam.com/templates/ss_bibletranslators/instant.js"></script>
<script type="text/javascript" src="http://joomla.rojasfam.com/templates/ss_bibletranslators/reflex.js"></script>

<?php
if ( $my->id ) {
initEditor();
}
mosShowHead();


?>
Centauri
05-01-2008, 08:05 AM
I think this is due to IE referencing the absolute position inside the padding applied to #header instead of inside the border. The padding on #header is not needed anyway, so try :#header {
background: #ffffff url(../images/vd_headerpic.jpg) no-repeat 5px 5px;
padding:0;
width:1020px;
height:210px;
position: relative;
z-index: 100;
}
shirestudios
05-01-2008, 08:13 AM
Okay,

I gave that a try, but nothing changed.

?????:confused:
Centauri
05-01-2008, 08:53 AM
Looks to be in the right place in IE7 now.
shirestudios
05-01-2008, 09:01 AM
That's because I added the attribute:


<!--[if IE]>
<style type="text/css">
#header {
background: #ffffff url(http://joomla.rojasfam.com/templates/ss_bibletranslators/images/vd_headerpic.jpg) no-repeat 5px 5px;
}

#header h1 {
background: url(http://joomla.rojasfam.com/templates/ss_bibletranslators/images/HBTitle.png);
bottom: -14px;
}

(etc...)

</style>
<![endif]-->



To the php file...see the source of the site.

Is this my only option?? Or can it be fixed via CSS?

Danke!
Centauri
05-01-2008, 11:21 AM
Found it ! It is due to the default margin surrounding a <h1> element, which makes the graphic appear too high in Firefox. I had forgotten about the margin as I usually zero all default margins and paddings before anything else - you don't have to worry about these then.#header h1 {
width: 578px;
height: 77px;
background: url(../images/HBTitle.png);
text-indent: -999em;
position: absolute;
left: -3px;
bottom: -14px;
margin: 0;
}
shirestudios
05-02-2008, 03:32 AM
worked like a charm!!!

Thanks so much!

-ShireStudios :)