Junior Coders
css layout problem with IE6/7
I have the tab content script v2.0 on my site at eatbrunch.net, but Internet Explorer 6 and 7 stuff up the css layout, while firefox is fine. I want it to look like it does on firefox. I have tried to slightly modify the 2nd demo, which could be part of the problem.
Any suggestions on what I can do to sort IE out?
Cheers
Elite Coders
Provide a link to your site with the problematic code so we can better help you troubleshoot
if your site is not live post the code encapsulated in [code] tags
Junior Coders
yes, here's the css file:
/* ######### CSS for Inverted Modern Bricks II Tabs. Remove if not using ######### */
.modernbricksmenu2{
padding: 0;
width: 768px;
border-top: 5px solid #D25A0B; /*Brown color theme*/
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
.modernbricksmenu2 ul{
margin:0;
margin-left: 10px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}
.modernbricksmenu2 li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
}
.modernbricksmenu2 a{
float: left;
display: block;
font: regular 12px Arial;
color: white;
text-decoration: none;
margin: 0px 2px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
background-color: #3366FF; /*Brown color theme*/
border-top: 1px solid white;
}
.modernbricksmenu2 a:hover{
background-color: #D25A0B; /*Brown color theme*/
color: white;
}
.modernbricksmenu2 a.selected{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/
color: white;
border-color: #D25A0B; /*Brown color theme*/
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
}
and my template php file (with joomla):
<?php
defined( '_VALID_MOS' ) or die( 'Restricted access' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = explode( '=', _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>
<?php mosShowHead(); ?>
<?php
if ( $my->id ) {
initEditor();
}
$collspan_offset = ( mosCountModules( 'right' ) + mosCountModules( 'user2' ) ) ? 2 : 1;
//script to determine which div setup for layout to use based on module configuration
$user1 = 0;
$user2 = 0;
$colspan = 0;
$right = 0;
// banner combos
//user1 combos
if ( mosCountModules( 'user1' ) + mosCountModules( 'user2' ) == 2) {
$user1 = 2;
$user2 = 2;
$colspan = 3;
} elseif ( mosCountModules( 'user1' ) == 1 ) {
$user1 = 1;
$colspan = 1;
} elseif ( mosCountModules( 'user2' ) == 1 ) {
$user2 = 1;
$colspan = 1;
}
//right based combos
if ( mosCountModules( 'right' ) and ( empty( $_REQUEST['task'] ) || $_REQUEST['task'] != 'edit' ) ) {
$right = 1;
}
?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/css/template_css.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="tabcontent.css" />
<script type="text/javascript" src="tabcontent.js">
/***********************************************
* Tab Content script v2.0- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
</head>
<body>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="808">
<tr>
<td class="outline"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="/" class="logo"><img src="images/logo.gif" alt="Eat Brunch home" /></a></td>
<td><div id="topmenu"><?php mosLoadModules ( 'user6', -1); ?></div></td>
</tr>
</table>
<div id="buttons_outer">
<div id="buttons_inner">
<div id="buttons">
<div id="citymenu"><?php mosLoadModules ( 'user3', -1); ?></div>
</div>
</div>
</div>
<div class="clr"></div>
<div id="header_outer">
<div id="top_outer">
<div id="top_inner">
<table width="768" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<ul id="searchtabs" class="modernbricksmenu2">
<li><a href="#" rel="tcontent1" class="selected">Brunch places</a></li>
<li><a href="#" rel="tcontent2">Brunch recipes</a></li>
</ul>
<div style="border:0px solid gray; background-color:#CCCCCC; width:748px; margin-bottom: 1em; padding: 10px">
<div id="tcontent1" class="tabcontent">
<br /><?php mosLoadModules ( 'user9', -1); ?>
<ul id="searchplace">
<li>eg "Auckland", "w1" or "Giraffe"</li>
<li>Brunch in: <a href="component/option,com_jreviews/task,list/simplesearch,new+york/order,rating/">New York</a> | <a href="component/option,com_jreviews/task,list/simplesearch,london/order,rating/">London</a> | <a href= "component/option,com_jreviews/task,list/simplesearch,sydney/order,rating/">Sydney</a> | <a href="component/option,com_jreviews/task,list/simplesearch,paris/order,rating/">Paris</a> | <a href="component/option,com_jreviews/task,list/simplesearch,san+francisco/order,rating/">San Francisco</a></li>
</ul>
</div>
<div id="tcontent2" class="tabcontent">
<br /><?php mosLoadModules ( 'user9', -1); ?> <ul id="searchrecipe"><li>eg "eggs benedict" or "smoothie"</li></ul>
</div>
</div>
<script type="text/javascript">
var searchtabs=new ddtabcontent("searchtabs") //enter ID of Tab Container
searchtabs.setpersist(true) //toogle persistence of the tabs' state
searchtabs.setselectedClassTarget("link") //"link" or "linkparent"
searchtabs.init()
</script>
</td>
</tr>
</table>
</div>
</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
}
?>
<?php
if ( mosCountModules ('user4', -1) ) {
?>
<?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>
<td colspan="2">
<div id="slideshow">
<?php mosLoadModules( 'user8', -1 ); ?>
</div>
</td>
</tr>
<tr valign="top">
<?php
if ( $user1 > 0 ) {
?>
<td width="50%">
<div class="user1_inner">
<?php mosLoadModules ( 'user1', -2 ); ?>
</div>
</td>
<?php
}
if ( $colspan == 3) {
?>
<?php
}
if ( $user2 > 0 ) {
?>
<td width="50%">
<div class="user2_inner">
<?php mosLoadModules ( 'user2', -2 ); ?>
</div>
</td>
<?php
}
?>
</tr>
<tr>
<td colspan="2">
<div id="tags">
<?php mosLoadModules( 'user4', -1 ); ?>
</div>
</td>
</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; ?>" 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>
<td valign="top">
<?php mosLoadModules ( 'advert1', -2 ); ?>
</td>
</tr>
</table>
</div>
<?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php' ); ?>
<div align="right"><?php mosLoadModules ( 'user5', -1 ); ?></div>
<?php mosLoadModules( 'debug', -1 );?>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2916111-1";
urchinTracker();
</script>
</body>
</html>
Junior Coders
website at www.eatbrunch.net
Junior Coders
any suggestions on this?
much appreciated!
New Comer (less than 5 posts)
I have a problem with the Tabs. It doesn't show the tab content when i click on the tabs. It stops on the first one. The problem is in IE6 only. It works for FF and IE7.0
It seems that the problem is with the javascript code.
Please help.
Thanks.
Posting Permissions
Reply With Quote
Bookmarks