Hi, I have created a custom theme for a site im working on, the theme is based on the default XOOPS theme that dcomes with the 2.3 package.
I am having some issues getting the theme to render correctly in IE, in firefox it renders fine.
I have created a horizontal navigation bar using list tags and css, the nav bar is wrapped inside a div to allow me to add padding without mucking up the nav bar. In IE there is a noticable gap between the navbar and the main table, in firefox it looks fine.
I've tried everything I can think of so I am looking for some expert advice from someone who can tell me what i am doing wrong or a way to fix it so it dispalys properly in ie.
Here is two images of the theme one for FF and one for IE
Here is the html code for the theme for the navbar:
<!-- Start navbar -->
<table cellspacing="0" cellpadding="0">
<tr>
<td id="tnav">
<div id="pnav">
<ul id="nav">
<li id="nav-home" title="PlaySome Homepage"><a href="<{$xoops_url}>/">Home</a></li>
<li id="nav-news" title="Playstation 3 News"><a href="<{$xoops_url}>/modules/psnews/">News</a></li>
<li id="nav-faq" title="Playstation 3 Games"><a href="<{$xoops_url}>/modules/ps3faq/">PS3 FAQ</a></li>
<li id="nav-blu-ray" title="PS3 FAQ"><a href="<{$xoops_url}>/modules/blu-ray/">Blu-Ray</a></li>
<li id="nav-videotube" title="Videos"><a href="<{$xoops_url}>/modules/videotube/">Videos</a></li>
<li id="nav-forums" title="PlaySome Forums"><a href="http://www.playsome.co.uk/forums/">Forums</a></li>
<li id="nav-images" title="Images"><a href="<{$xoops_url}>/modules/xcgal/">Images</a></li>
<li id="nav-cheats" title="PS3 Cheats"><a href="<{$xoops_url}>/modules/cheats/">Cheats</a></li>
<li id="nav-psoogl3" title="PS00gl3 - PS3 Search Engine"><a href="http://www.playsome.co.uk/PSoogl3">PSoogl3</a></li>
</ul>
</div>
</td>
</tr>
</table>
<!-- End navbar -->
<table cellspacing="0" cellpadding="0" id="main">
<tr>
<!-- Start left blocks loop -->
Here is the css:
/* List navbar */
td#tnav {margin-bottom:0; margin-top:5px; width:990px;}
div#pnav {padding:0; background:transparent url(navbg_c.gif) 0 0 repeat-x;; width:990px; height:35px; margin-bottom:0;}
#nav {
margin:0;
padding-left:10px;
background:transparent;
float:left;
width:990px;
border:0;
border-width:1px 0;
vertical-align:middle;
height:30px;
}
#nav li {
display:inline;
padding:0;
margin:0;
text-align:center;
}
#nav a:link,
#nav a:visited {color:#fff; background:transparent; padding:12px 10px 10px 10px; float:left; width:auto; border-right:1px solid #333333; text-decoration:none; font:bold 1em/1em Arial, Helvitica, sans-serif; text-transform:uppercase;}
#nav li:first-child a {border-left:1px solid #333333;}
#nav a:hover {color: #66FFFF; background: #202020;}
#system #nav-home a,
#psnews #nav-news a,
#ps3faq #nav-faq a,
#blu-ray #nav-blu-ray a,
#videotube #nav-videotube a,
#phpbb #nav-forums a,
#cheats #nav-cheats a,
#PSoogl3 #nav-psoogl3,
#xcgal #nav-images{
background:#202020;
color: #FF6600;
}
#system #nav-home a:hover,
#psnews #nav-news a:hover,
#ps3faq #nav-faq a:hover,
#blu-ray #nav-blu-ray a:hover,
#videotube #nav-videotube a:hover,
#phpbb #nav-forums a:hover,
#cheats #nav-cheats a:hover,
#PSoogl3 #nav-psoogl3 a:hover;
#xcgal #nav-images a:hover{
background:#202020;
}
#nav a:active {
background:#202020;
color:#fff;
}
/* End list navbar */
Thanks for your help.
Martin
