Client Side Coding > HTML & CSS
Horizontal Menu using CSS no display correctly in IE 9
(1/1)
jeniejo:
I am building a fairly standard type of site as a trial (6 pages, text and images and 1 form) using php and css. The structure has a 'layHeader' and 'layNav' structures and a horizontal menu. The menu had been working but I added an extra layer and the menu links worked but the text was not visible - occasionally when first displayed the text is visible but then it collapses? and is not. The menu sections for each item are standard size about 2px. I have rolled back the changes but this problem remains. I am hoping someone has seen this before and can point me in the right direction to fix it.
It is only happening in IE9, Mozilla, Chrome are fine.
Jennie
--- Code: ---<body>
<div id="layContainer">
<div id="layHeader">
<table cellpadding="0" cellspacing="0" id="layHeaderDetails">
<tr>
<td colspan="2" class="fontMyriadProSemiboldItalic textBeachfront">Absolute Beachfront</td>
</tr>
<tr>
<td class="fontMyriadProSemibold colLeft" valign="top">Phone</td>
<td class="fontMyriadPro colRight">
<?php echo "$phone" ?><br />
</td>
</tr>
<tr>
<td class="fontMyriadProSemibold colLeft">Address</td>
<td class="fontMyriadPro colRight"><?php echo "$address"?></td>
</tr>
</table>
<img src="assets/images/blank.gif" alt="<?php echo "$titleHome"?>" />
</div> <!-- layHeader CLOSE -->
<div id="layNav">
<ul>
[php]<li><a href="<?php echo "$linkHome"?>" title="<?php echo "$titleHome"?>" <?php if($page == "home") {?>class="active"<?php }?>>Home</a></li>
<li><a href="<?php echo "$linkOurLocation"?>" title="<?php echo "$titleOurLocation"?>" <?php if($page == "ourLocation") {?>class="active"<?php }?>>Our Location</a></li>
<li><a href="<?php echo "$linkAccommodation"?>" title="<?php echo "$titleAccommodation"?>" <?php if($page == "accommodation") {?>class="active"<?php }?>>Accommodation Type</a></li>
<li><a href="<?php echo "$linkRates"?>" title="<?php echo "$titleRates"?>" <?php if($page == "rates") {?>class="active"<?php }?>>Rates</a></li>
<li><a href="<?php echo "$linkBookNow"?>" title="<?php echo "$titleBookNow"?>" <?php if($page == "bookNow") {?>class="active"<?php }?>>Make A Booking</a></li>[/php]
<li><a href="<?php echo "$linkParkMap"?>" title="<?php echo "$titleParkMap"?>" <?php if($page == "parkMap") {?>class="active"<?php }?>>Park Map</a></li>
<li><a href="<?php echo "$linklocalGuide"?>" title="<?php echo "$titlelocalGuide"?>" <?php if($page == "localGuide") {?>class="active"<?php }?>>Local Guide</a></li>
<li><a href="<?php echo "$linkImageGallery"?>" title="<?php echo "$titleImageGallery"?>" <?php if($page == "imageGallery") {?>class="active"<?php }?>>Image Gallery</a></li>
<li class="lastItem"><a href="<?php echo "$linkContact"?>" title="<?php echo "$titleContact"?>" <?php if($page == "contact") {?>class="active"<?php }?>>Contact Us</a></li>[/php]
</ul>
</div> <!-- layNav CLOSE -->
--- End code ---
CSS
--- Code: ---/* ---------------------------------------------------------------------------------------- HEADER STYLES */
div#layHeader{
background: url(../images/img-logo.gif) 36px 40px no-repeat;
height: 100px;
}
.textBeachfront{
color: #0083ca;
font-size: 18px;
padding: 0 0 5px 0;
}
table#layHeaderDetails{
float: right;
margin: 26px 40px 0 0;
}
table#layHeaderDetails td.colLeft{
padding: 0 10px 0 0;
width: 50px;
}
table#layHeaderDetails td.colRight{
width: 220px;
}
/* ---------------------------------------------------------------------------------------- NAV STYLES */
--- End code ---
Nuker_Viper:
have you tried using a simpler version of header that uses just overlapping images?
www.clanacg.com
--- PHP Code: ---<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<?php
echo"<center>"
. ""
. "<TABLE WIDTH=977 BORDER=0 CELLPADDING=0 CELLSPACING=0>"
. " <TR>"
. " <TD COLSPAN=11>"
. " <IMG SRC=\"themes/acg_summer/header_files/images/header_01.gif\" WIDTH=977 HEIGHT=22 ALT=\"\"></TD>"
. " <TD>"
. " <IMG SRC=\"themes/acg_summer/header_files/images/spacer.gif\" WIDTH=1 HEIGHT=22 ALT=\"\"></TD>"
. " </TR>"
. " <TR>"
. " <TD COLSPAN=11>"
. " <IMG SRC=\"themes/acg_summer/header_files/images/header_02.gif\" WIDTH=977 HEIGHT=95 ALT=\"\"></TD>"
. " </TR>"
. " <TR>"
. " <TD ROWSPAN=2>"
. " <IMG SRC=\"themes/acg_summer/header_files/images/header_09.gif\" WIDTH=3 HEIGHT=31 ALT=\"\"></TD>"
. " <TD ROWSPAN=2><a onmouseover=\"MM_swapImage('home','','themes/acg_summer/header_files/images/header_over_10.gif',1)\" onmouseout=\"MM_swapImgRestore()\" href=\"index.php\"><img src=\"themes/acg_summer/header_files/images/header_10.gif\" border=\"0\" name=\"home\" oSrc=\"themes/acg_summer/header_files/images/header_10.gif\" width=\"115\" height=\"31\"></a></TD>"
. " <TD ROWSPAN=2><a href=\"index.php?p=Rules\" onMouseOut=\"MM_swapImgRestore()\" onMouseOver=\"MM_swapImage('rules','','themes/acg_summer/header_files/images/header_over_16.gif',1)\"><img src=\"themes/acg_summer/header_files/images/header_16.gif\" name=\"rules\" width=\"115\" height=\"31\" border=\"0\"></a></TD>"
. " <TD ROWSPAN=2><a href=\"console.php?pid=52\" onMouseOut=\"MM_swapImgRestore()\" onMouseOver=\"MM_swapImage('news','','themes/acg_summer/header_files/images/header_over_11.gif',1)\"><img src=\"themes/acg_summer/header_files/images/header_11.gif\" name=\"news\" width=\"115\" height=\"31\" border=\"0\"></a></TD>"
. " <TD ROWSPAN=2><a href=\"index.php?p=Ranks\" onMouseOut=\"MM_swapImgRestore()\" onMouseOver=\"MM_swapImage('rankings','','themes/acg_summer/header_files/images/header_over_15.gif',1)\"><img src=\"themes/acg_summer/header_files/images/header_15.gif\" name=\"rankings\" width=\"115\" height=\"31\" border=\"0\"></a></TD>"
. " <TD ROWSPAN=2><a href=\"index.php?p=Members\" onMouseOut=\"MM_swapImgRestore()\" onMouseOver=\"MM_swapImage('members','','themes/acg_summer/header_files/images/header_over_17.gif',1)\"><img src=\"themes/acg_summer/header_files/images/header_17.gif\" name=\"members\" width=\"115\" height=\"31\" border=\"0\"></a></TD>"
. " <TD ROWSPAN=2><a href=\"index.php?p=Medals\" onMouseOut=\"MM_swapImgRestore()\" onMouseOver=\"MM_swapImage('awards','','themes/acg_summer/header_files/images/header_over_12.gif',1)\"><img src=\"themes/acg_summer/header_files/images/header_12.gif\" name=\"awards\" width=\"115\" height=\"31\" border=\"0\"></a></TD>"
. " <TD ROWSPAN=2><a href=\"index.php?p=Tournaments\" onMouseOut=\"MM_swapImgRestore()\" onMouseOver=\"MM_swapImage('tourny','','themes/acg_summer/header_files/images/header_over_14.gif',1)\"><img src=\"themes/acg_summer/header_files/images/header_14.gif\" name=\"tourny\" width=\"115\" height=\"31\" border=\"0\"></a></TD>"
. " <TD ROWSPAN=2><a href=\"index.php?p=Trainings\" onMouseOut=\"MM_swapImgRestore()\" onMouseOver=\"MM_swapImage('train','','themes/acg_summer/header_files/images/header_over_13.gif',1)\"><img src=\"themes/acg_summer/header_files/images/header_13.gif\" name=\"train\" width=\"115\" height=\"31\" border=\"0\"></a></TD>"
. " <TD ROWSPAN=1><IMG SRC=\"themes/acg_summer/header_files/images/header_18.gif\" WIDTH=54 HEIGHT=31 ALT=\"\"></TD>"
. " </TR>"
. " </TABLE>"
. ""
. " </center>"
."";
?>
--- End code ---
Navigation
[0] Message Index
Go to full version