PDA

View Full Version : Navigation breaks up in IE6



Xeor
Jan 13th, 2007, 09:43 AM
Hi there,

I'm having a little bit of trouble getting my menu look as it should be, the problem occurs in Internet Explorer 6
I've created a menu using <ul> and <li> tags, a tutorial bij A List Apart. It looks and works all fine in Firefox but in IE the menu breaks up in 3 pieces.

http://www.vision-designs.nl/mm/index.php

And my other problem is, in Firefox the sidebar at the right works fine, when you click on the menu it displays some items in the sidebar. When I open the same page in IE6 beside the fact the menu don't work the right sidebar also don't displays any items.

Here is my code..



<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>MOSH MEETING - A day of Rock, Metal &amp; Mosh!</title>
<style type="text/css">

/* Design and Coding done by: Alex Bosnjak @ http://vision-designs.nl/
CSS Support by Dennis Stevense
PHP Include written by Jos Helmken
*/

body{
margin:0;
padding:0;
line-height: 1.5em;
background-image:url(images/background-pattern.jpg);
background-repeat:repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
letter-spacing: 0.8px;
word-spacing: 1.5px;
}

#pattern {
background: url(images/background-top.jpg);
background-position: top center;
background-repeat: no-repeat;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 800px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
background:url(images/bg.jpg);
}

#topsection{
background: #333333
url(images/header.jpg);
height: 173px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#navigation{
background: #333333
url(images/navigation.jpg);
height: 58px; /*Height of top section*/
}

/* Navigation */

ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
float: left;
color: #fff;
background-color: #036; }

ul#navlist li { display: inline; }

ul#navlist li a
{
float: left;
padding: 0 0;
text-decoration: none;
}

ul#navlist li a:hover
{
background-color: #369;
color: #fff;
}

ul#navlist li a img {
border-style: none;
}

/* End navigation */

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-right: 151px; /*Set right margin to RightColumnWidth*/
background: url(images/content1.jpg);
background-repeat: no-repeat;
}

#contentcolumn .innertube {
text-align:justify;
}

h5 {
margin: 0;
padding: 0;
color: #FF0000;
}

#rightcolumn{
float: left;
width: 151px; /*Width of right column*/
margin-left: -151px; /*Set left margin to -(RightColumnWidth) */
background: url(images/sidebar.jpg);
background-repeat: no-repeat;
}

#footer{
clear: left;
width: 100%;
background: black;
text-align: center;
padding: 4px 0;
background:url(images/footer.jpg);
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 35px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
padding-top: 60px;
padding-right: 10px;
}

.innertube img {
border-style: none;
}

.innertube a {
color: #FFFFFF;
}

</style>

</head>
<body>

<div id="pattern">

<div id="maincontainer">

<div id="topsection"></div>

<div id="navigation">

<ul id="navlist">
<li><a href="?m=Home"><img src="images/navigation/home.jpg" border="0" /></a></li>
<li><a href="?m=Bands&page=lineup"><img src="images/navigation/bands.jpg" border="0" /></a></li>
<li><a href="index.php?page=tickets"><img src="images/navigation/tickets.jpg" border="0" /></a></li>
<li><a href="?m=Info&page=history"><img src="images/navigation/info.jpg" border="0" /></a></li>
<li><a href="index.php?page=shop"><img src="images/navigation/shop.jpg" border="0" /></a></li>
<li><a href="?m=Forum"><img src="images/navigation/forum.jpg" border="0" /></a></li>
<li><a href="index.php?page=newsletter"><img src="images/navigation/newsletter.jpg" border="0" /></a></li>
<li><a href="index.php?page=contact"><img src="images/navigation/contact.jpg" border="0" /></a></li>
<li><a href="index.php?page=link"><img src="images/navigation/links.jpg" border="0" /></a></li>
</ul>

</div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=7,0,0,0" width="400" height="15">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="http://www.vision-designs.nl/mm/xspf_player_slim.swf?playlist_url=http://www.vision-designs.nl/mm/playlist.xspf&autoload=true" />
<param name="quality" value="high" />
<param name="bgcolor" value="#333333" />
<embed src="http://www.vision-designs.nl/mm/xspf_player_slim.swf?playlist_url=http://www.vision-designs.nl/mm/playlist.xspf&autoload=true" quality="high" bgcolor="#333333" name="xspf_player" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="center" width="400" height="15">
</embed>
</object>


<?
if(!$_GET['page'] OR $_GET['page'] == "nieuws") {
include("nieuws.html");
} else {
if(file_exists($_GET['page'].".html")) {
include($_GET['page'].".html");
} else {
echo "<b>404 Error</b><br>
Page not found.";
}
}
?>
<br />
<h4> Mosh Meeting is made possible by : </h4>
<a href="http://www.brekelmansvanderven.nl" target="_blank"><img src="images/sponser.jpg" /></a>
<a href="http://www.popstiching.nl" target="_blank"><img src="images/sponser2.jpg" /></a>
<img src="images/sponser3.jpg" />


</div>
</div>
</div>

<div id="rightcolumn">
<div class="innertube">
<b>
<?php
// Menu includer //
if(empty($_GET['m'])){
$menu = "";
}
elseif($_GET['m'] == "Bands"){
$menu = "<a href=\"?m=Bands&page=lineup\">Line Up</a><br />\n
<a href=\"?m=Bands&page=tijden\">Time schedule</a><br />\n";
}
elseif($_GET['m'] == "Tickets"){
$menu = "<a href=\"?m=Tickets&page=tickets\">Tickets</a><br />\n";
}
elseif($_GET['m'] == "Info"){
$menu = "<a href=\"?m=Info&page=route\">Route</a><br />\n
<a href=\"?m=Info&page=history\">History</a><br />\n";
}
elseif($_GET['m'] == "Shop"){
$menu = "<a href=\"?m=Shop&page=shop\">Shop</a><br />\n";
}
elseif($_GET['m'] == "Newsletter"){
$menu = "<a href=\"?m=Newsletter&page=newsletter\">Newsletter</a><br />\n";
}
elseif($_GET['m'] == "Contact"){
$menu = "<a href=\"?m=Contact&page=contact\">Contact Us</a><br />\n";
}
elseif($_GET['m'] == "Links"){
$menu = "<a href=\"?m=Links&page=link\">Links</a><br />\n";
}
echo $menu;
?>
</b>
<br />

<a href="http://jigsaw.w3.org/css-validator/">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>

</div>

</div>

<div id="footer">Moshmeeting 2007 - Design by <a href="http://vision-designs.nl/">Vision - Designs</a></div>

</div>
</div>
</body>
</html>


I hope there is someone who can help me out, I've tried a lot but nothing worked...

BonRouge
Jan 13th, 2007, 03:21 PM
Try this:
#navlist li {
float:left;
}

Xeor
Jan 16th, 2007, 07:39 AM
Hey, thanks for that.
Just I'm having still the problem that in IE6 the sidebar doesn't work.
If you click on the navigation then some items should display in the right sidebar next to the content ( that's in Firefox ) , but in IE6 the sidebar doesn't displays anything.
Any solution for that...?