Log in

View Full Version : odd IE background problem with custom template

Chadi
09-12-2008, 03:00 AM
I have a custom template found here
http://www.talkjesus.com/misc.php?do=page&template=bibleonline

This is the code

$stylevar[htmldoctype]
<html xmlns="http://www.w3.org/1999/xhtml" dir="$stylevar[textdirection]" lang="$stylevar[languagecode]">
<head>
<title>Bible Online</title>
$headinclude
</head>
<body>
$header
$navbar

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="tcat">Options</td>
<td class="tcat">Bible</td>
</tr>
<tr>
<td class="alt2" style="width:200px;">
<iframe name="bar" src="http://www.talkjesus.com/bible/bible/main.htm" frameborder="0" style="width:200px;height:550px"></iframe>
</td>
<td class="alt1">
<iframe name="main" src="/bible/bible/mhcc/index.htm" frameborder="0" style="width:100%;height:550px"></iframe>
</td>
</tr>
</table>

<p>&nbsp;</p>

$footer
</body>
</html>

The alt1 and alt2 table classes work fine in Firefox 3, Google Chrome. However, in IE7 and IE8 (beta 2), they show a white background. I'm not sure why, never seen that before.

Example:
http://browsershots.org/http://www.talkjesus.com/misc.php?do=page&template=bibleonline
Opserty
09-12-2008, 08:16 AM
Maybe it is to do with the frame having a white background. Set the frame's page background colour to match what you need.
Chadi
09-12-2008, 02:31 PM
Tried the iframe colors, still doesn't work in IE.

$stylevar[htmldoctype]
<html xmlns="http://www.w3.org/1999/xhtml" dir="$stylevar[textdirection]" lang="$stylevar[languagecode]">
<head>
<title>Bible Online</title>
$headinclude
</head>
<body>
$header
$navbar

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="tcat">Options</td>
<td class="tcat">Bible</td>
</tr>
<tr>
<td class="alt2" style="width:200px;">
<iframe name="bar" src="http://www.talkjesus.com/bible/bible/main.htm" frameborder="0" style="width:200px;height:550px;background-color:#F5F5FF;"></iframe>
</td>
<td class="alt1">
<iframe name="main" src="/bible/bible/mhcc/index.htm" frameborder="0" style="width:100%;height:550px;background-color:#E4E6F5;"></iframe>
</td>
</tr>
</table>

$footer
</body>
</html>

By the way, the template is called custom_bibleonline

So when I go to the page it shows up in the navbit as bibleonline

How do I get it to show up as Bible Online instead?
Opserty
09-12-2008, 03:55 PM
I meant set the background colour for the contents of the iframe (the HTML page that shows up in the iframe), not the actual iframe itself.
Chadi
09-12-2008, 08:46 PM
The content (frame's htm pages) are already using css actually.

As a matter of fact, I even added the original alt1 and alt2 classes in their as well.

body {
margin:5px;
padding:5px;
border:0px;
color:#4D528A;
font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
font-size:12px;
line-height:20px;
}

A:link, A:active, A:visited {
color:#4D528A;
text-decoration: none;
}

A:hover {
color:#4D528A;
text-decoration: underline;
}

.alt1 {
background-color: #f5f5ff;
}

.alt2 {
background-color: #e4e6f5;
}

.smallfont {
font-size: 12px;
}

#verses {
font-weight: bold;
font-size: 12px;
color: #4D528A;
background-color:#F5F5FF;
padding: 2px;
}

.alpha-numerical {
font-weight: normal;
font-size: 12px;
color: #4D528A;
background-color:#F5F5FF;
padding: 2px;
}

h1{
font-family:verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
font-size:1.8em;
font-weight:bold;
color:#4D528A;
}

h2{
font-family:verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
font-size:1.3em;
font-weight:bold;
color:#4D528A;
}

h3{
font-family:verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
font-size:1.1em;
font-weight:normal;
color:#4D528A;
background-color: #F5F5FF;
padding: 2px;
}

#navholder { float:right; }

/* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */
#menu_container {
position:relative;
width:100%;
_width: 100%; /* for IE 6*/
height:23px;
z-index:100;
}

/* Get rid of the margin, padding and bullets in the unordered lists */
#pmenu, #pmenu ul {padding:0; margin:0; list-style-type: none;}

/* Set up the link size, color and borders */
#pmenu a, #pmenu a:visited {
display:block;
width:140px;
font-size:11px;
color:#fff;
height:26px;
line-height:25px;
text-decoration:none;
text-indent:6px;
}

/* Set up the sub level borders */
#pmenu li ul li a, #pmenu li ul li a:visited {border-width:1px 1px 1px 1px;}
#pmenu li a.enclose, #pmenu li a.enclose:visited {border-width:1px;}

/* Set up the list items */
#pmenu li {float:left; background:#B7BCE2; opacity: 0.90;}

/* For Non-IE browsers and IE7 */
#pmenu li:hover {position:relative; opacity: 1.0;}

/* Make the hovered list color persist */
#pmenu li:hover > a {background:#4D528C; color:#fff;}

/* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */
#pmenu li ul {display:none;}

/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */
#pmenu li:hover > ul {
display:block;
position:absolute;
top:-11px; left:80px;
padding:10px 30px 30px 30px;
background:transparent url(transparent.gif);
width:120px;
}

/* Position the first sub level beneath the top level liinks */
#pmenu > li:hover > ul {left:-30px; top:16px;}

/* get rid of the table */
#pmenu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

/* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */
* html #pmenu li a:hover {position:relative; background:#4D528C; color:#fff;}

/* For accessibility of the top level menu when tabbing */
#pmenu li a:active, #pmenu li a:focus {background:#4D528C;; color:#fff;}

/* Set up the pointers for the sub level indication */

#pmenu li.fly {background: #B7BCE2 url(downarrow_light.gif) no-repeat right center; margin-left: 1px;}
#pmenu li.drop {background: transparent url(downarrow_light.gif) no-repeat right center; margin-left: 1px; font-weight: bold; }

#pmenu .drop li a {
border-bottom: 1px dotted #E4E6F5;
font-family: verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}


/* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */

/* change the drop down levels from display:none; to visibility:hidden; */
* html #pmenu li ul {visibility:hidden; display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif);}

/* keep the third level+ hidden when you hover on first level link */
#pmenu li a:hover ul ul{
visibility:hidden;
}
/* keep the fourth level+ hidden when you hover on second level link */
#pmenu li a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the fifth level hidden when you hover on third level link */
#pmenu li a:hover ul a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the sixth level hidden when you hover on fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul ul {
visibility:hidden;
}

/* make the second level visible when hover on first level link and position it */
#pmenu li a:hover ul {
visibility:visible; left:-30px; top:14px; lef\t:-31px; to\p:15px;
}

/* make the third level visible when you hover over second level link and position it and all further levels */
#pmenu li a:hover ul a:hover ul{
visibility:visible; top:-11px; left:80px;
}
/* make the fourth level visible when you hover over third level link */
#pmenu li a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
/* make the fifth level visible when you hover over fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
/* make the sixth level visible when you hover over fifth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
Chadi
09-19-2008, 02:50 AM
Still cannot figure this out for the life of me.

The custom vb template is

$stylevar[htmldoctype]
<html xmlns="http://www.w3.org/1999/xhtml" dir="$stylevar[textdirection]" lang="$stylevar[languagecode]">
<head>
<title>Bible Online</title>
$headinclude
<link rel="stylesheet" type="text/css" href="clientscript/vbulletin_css/style.css" />
</head>
<body>
$header
$navbar

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="tcat">Options</td>
<td class="tcat">Bible</td>
</tr>
<tr>
<td class="alt1" style="width:200px;">
<iframe name="bar" src="http://www.talkjesus.com/bible/bible/main.htm" frameborder="0" style="width:200px;height:550px;"></iframe>
</td>
<td class="alt2">
<iframe name="main" src="/bible/bible/bible_supersearch.php" frameborder="0" style="width:100%;height:550px;"></iframe>
</td>
</tr>
</table>

$footer
</body>
</html>

I fixed the left frame by adding an alt2 class in the main.htm file.

However, the right frame is harder since it uses various php files, the main one upon loading is a php file with this content:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<?php

require_once("bible_config.php");
require_once("bible_system.php");

$interface=$_GET['interface'];
// set the interface to use
if($interface==""){$interface=$default_interface;}
if($interface=="standard"){$interface=$standard_interface;}

// manually set interface
// $interface="standard";

require_once("interfaces/$interface.php");

?>
Chadi
09-22-2008, 10:00 PM
Would really appreciate help on this.