Hi there
I’m doing a bit of work on the following website.
It looks fine in Firefox but in IE the menu seems to go above where it should appear and some of the text at the bottom doesn’t appear as it should.
If anyone could offer any help in getting this resolved so it looks the same in both browsers then that would be great.
Thanks
Moved to CSS forum 
It looks like for IE8 you would need to clear the list items.
#menu1 li{clear:left}
You have a lot of unnecessary classnames in that menu.
e.g.
<ul>
<li><a class="MenuBarItemSubmenu" href="projectrathmines1.html" title="Sterrin O'Shea Architects - Extension/Refurbishment of A Protected Structure">Extension/Refurbishment of A Protected Structure</a></li>
<li><a class="MenuBarItemSubmenu" href="projectglasnevin1.html" title="Sterrin O'Shea Architects - Extension/Refurbishment of A 1930s House">Extension/Refurbishment of A 1930s House</a></li>
<li><a class="MenuBarItemSubmenu" href="projectclonskeagh1.html" title="Sterrin O'Shea Architects - Extension/Remodeling of A 1990s Detached House">Extension/Remodeling of A 1990s Detached House</a></li>
<li><a class="MenuBarItemSubmenu" href="projectrathgar1.html" title="Sterrin O'Shea Architects - Additions to An Edwardian House">Additions to An Edwardian House</a></li>
<li><a class="MenuBarItemSubmenu" href="projectmonkstown1.html" title="Sterrin O'Shea Architects - Eco Townhouses">Eco Townhouses</a></li>
<li><a class="MenuBarItemSubmenu" href="projectchurchtown1.html" title="Sterrin O'Shea Architects - Additions to A 1930s Bungalow">Additions to A 1930s Bungalow</a></li>
<li><a class="MenuBarItemSubmenu" href="projectrathgar2.html" title="Sterrin O'Shea Architects - Refurbishment of An Edwardian House">Refurbishment of An Edwardian House</a></li>
<li><a class="MenuBarItemSubmenu" href="projectballsbridge1.html" title="Remodeling of A Mews House">Remodeling of A Mews House</a></li>
<li><a class="MenuBarItemSubmenu" href="projectchurchtown2.html" title="Sterrin O'Shea Architects - Garden Pavilion">Garden Pavilion</a></li>
<li><a class="MenuBarItemSubmenu" href="projectbooterstown1.html" title="Sterrin O'Shea Architects - Remodeling A Terraced House">Remodeling A Terraced House</a></li>
<li><a class="MenuBarItemSubmenu" href="projectstoneybatter1.html" title="Sterrin O'Shea Architects - Refurbishment of An Artisan Dwelling">Refurbishment of An Artisan Dwelling</a></li>
</ul>
You have the same class on every list item in that list which menas you don;t actually need any classes at all as they can all be reached from the parent (as in my snippet above).
Your JS would also benefit from a loop rather than writing everything out 20 times. Ask in the js forum to tidy it up:)
thanks very much for your help with this.
with your suggestion, I got it working in IE7 and IE8.
Would you know if there is a possible way to get it working in IE6 as there still seems to be an issue when it displays in this version of IE.
thanks again for your help and suggestions.
Hi,
Try adding haslayout to the parent:
ul.MenuBarVertical {
list-style-type: none;
[B]zoom:1.0;[/B]
}
Then add display:inline to all floated elements that have side margins to avoid the double margin bug which affects the side margins on floats that are adjacent to their containing block.
(I am away now for a week and will not reply until I am back.)
Hi there
Thanks for your help with this. I tried out what you suggested with the code but am still having trouble with the page displaying correctly in IE6.
Is there something that I may be missing in order for it to work in IE6.
Thanks for the help so far.
Hi,
You don’t seem to have made the changes I suggested above.
Add this:
ul.MenuBarVertical {zoom:1.0;}
#menu1 {width:66px;}
* html #frame{margin:0 0 19px 77px}
Don’t be selective as all those fixes are needed and must be in place and must follow the original code.
Here is the whole page working in IE6 with those fixes added:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="sosa.css" rel="stylesheet" type="text/css" />
<script src="http://www.sosa.ie/sosascripts/SpryMenuBar.js" type="text/javascript"></script>
<title>SOSA | Sterrin O'Shea Architects</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var interval = 2; // delay between rotating images (in seconds)
var random_display = 0; // 0 = no, 1 = yes
interval *= 1000;
var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("http://www.sosa.ie/sosaimages/rathmines1detailelevation.jpg");
image_list[image_index++] = new imageItem("http://www.sosa.ie/sosaimages/rathmines1kitchenside.jpg");
image_list[image_index++] = new imageItem("http://www.sosa.ie/sosaimages/glasnevin1rear.jpg");
image_list[image_index++] = new imageItem("http://www.sosa.ie/sosaimages/glasnevin1diningbay.jpg");
image_list[image_index++] = new imageItem("http://www.sosa.ie/sosaimages/clonskeagh1rear.jpg");
image_list[image_index++] = new imageItem("http://www.sosa.ie/sosaimages/rathgar1rearelevationdusk.jpg");
image_list[image_index++] = new imageItem("http://www.sosa.ie/sosaimages/rathgar1courtyard.jpg");
image_list[image_index++] = new imageItem("http://www.sosa.ie/sosaimages/churchtown1terrace.jpg");
image_list[image_index++] = new imageItem("http://www.sosa.ie/sosaimages/pavillionexteriordusk.jpg");
var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}
// End -->
</script>
<!--java script for rotating imagee -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-18450775-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script language="JavaScript">
function opacity(id, opacStart, opacEnd, millisec)
{
//speed for each frame
var speed = Math.round(millisec / 100);
var timer = 0;
//determine the direction for the blending, if start and end are the same nothing happens
if(opacStart > opacEnd) { for(i = opacStart; i >= opacEnd; i--) { setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); timer++; } }
else if(opacStart < opacEnd) { for(i = opacStart; i <= opacEnd; i++) { setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); timer++; } }
}
//change the opacity for different browsers
function changeOpac(opacity, id)
{
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
</script>
<script language="JavaScript">
function fade(imgnum)
{
document.getElementById('image1').style.display="none"; changeOpac(0, 'image1'); opacity('image1', 1, 0, 1);
document.getElementById('image2').style.display="none"; changeOpac(0, 'image2'); opacity('image2', 1, 0, 1);
document.getElementById('image3').style.display="none"; changeOpac(0, 'image3'); opacity('image3', 1, 0, 1);
document.getElementById('image4').style.display="none"; changeOpac(0, 'image4'); opacity('image4', 1, 0, 1);
document.getElementById('image5').style.display="none"; changeOpac(0, 'image5'); opacity('image5', 1, 0, 1);
document.getElementById('image6').style.display="none"; changeOpac(0, 'image6'); opacity('image6', 1, 0, 1);
document.getElementById('image7').style.display="none"; changeOpac(0, 'image7'); opacity('image7', 1, 0, 1);
document.getElementById('image8').style.display="none"; changeOpac(0, 'image8'); opacity('image8', 1, 0, 1);
document.getElementById('image9').style.display="none"; changeOpac(0, 'image9'); opacity('image9', 1, 0, 1);
document.getElementById('image10').style.display="none"; changeOpac(0, 'image10'); opacity('image10', 1, 0, 1);
document.getElementById('image11').style.display="none"; changeOpac(0, 'image11'); opacity('image11', 1, 0, 1);
document.getElementById('image12').style.display="none"; changeOpac(0, 'image12'); opacity('image12', 1, 0, 1);
document.getElementById('image13').style.display="none"; changeOpac(0, 'image13'); opacity('image13', 1, 0, 1);
document.getElementById('image14').style.display="none"; changeOpac(0, 'image14'); opacity('image14', 1, 0, 1);
document.getElementById('image15').style.display="none"; changeOpac(0, 'image15'); opacity('image15', 1, 0, 1);
document.getElementById('image16').style.display="none"; changeOpac(0, 'image16'); opacity('image16', 1, 0, 1);
document.getElementById('image17').style.display="none"; changeOpac(0, 'image17'); opacity('image17', 1, 0, 1);
document.getElementById('image18').style.display="none"; changeOpac(0, 'image18'); opacity('image18', 1, 0, 1);
document.getElementById('image19').style.display="none"; changeOpac(0, 'image19'); opacity('image19', 1, 0, 1);
document.getElementById('image20').style.display="none"; changeOpac(0, 'image20'); opacity('image20', 1, 0, 1);
document.getElementById(imgnum).style.display="block";
document.getElementById(imgnum+'num').style.color="669999"; opacity(imgnum, 0, 99, 1200);
}
</script>
<meta name="Description" content="Sterrin O'Shea Architects (SOSA) is a progressive architectural firm who thrive on innovation and deliver superior designs to their many satisfied clients" />
<meta name="keywords" content="sosa, architect, blackrock" />
<style>
/*RESET v1.0 | 20080212 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
font-weight: normal;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table {
border-collapse: collapse;
border-spacing: 0;
}
/*------------------*/
body {
background-color: #fff;
font: normal 10px/15px Helvetica, Arial, sans-serif;
color: #555;
text-align: justify;
}
p {
margin-bottom: 10px;
font: normal 10px/15px Helvetica, Arial, sans-serif;
color: #555;
}
h1 {
margin: 0 0 6px 0;
font: 12px/18px Helvetica, Arial, sans-serif;
color: #555;
letter-spacing: .05em;
text-align: left;
}
h2 {
margin: 0 0 6px 0;
font: 12px/18px Helvetica, Arial, sans-serif;
color: #555;
letter-spacing: .05em;
text-align: left;
}
h3 {
margin: 5px 0px 5px 0px;
font: 10px/15px Helvetica, Arial, sans-serif;
color: #555;
text-align: left;
}
h4 {
margin: 5px 0px 2px 0px;
font: 9px/12px Helvetica, Arial, sans-serif;
color: #555;
}
h6 {
margin: 0 0 5px 0;
font: 10px/15px Helvetica, Arial, sans-serif;
color: #555;
}
h5 {
margin: 0 0 4px 0;
font: normal italic 12px/16px Georgia, serif;
color: #555;
}
.80 { font-size: 80%; }
a:link, a:visited {
color: #777;
text-decoration: none;
}
a:hover, a:active {
color: #333;
text-decoration: none;
}
#header {
padding: 0px 20px;
width: 941px;
height: 100px;
margin: 3% auto 0px auto;
background: url('http://www.sosa.ie/sosaimages/sosahead.jpg') no-repeat 100px center;
}
#maincontent {
background-color: #fff;
padding: 0px 20px;
width: 941px;
min-height: 631px;
margin: 0px auto;
}
#menu1 {
float: left;
text-align: right;
z-index: +1000;
}
#menu1 li { clear:left; }
ul.MenuBarVertical { list-style-type: none; }
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive { z-index: 1000; }
ul.MenuBarVertical li {
margin: 0 0 15px 0;
width: 60px;
position: relative;
border-top: 1px #ccc solid;
border-right: 1px #ccc solid;
padding: 4px 5px 4px 0;
}
ul.MenuBarVertical ul {
list-style-type: none;
width: 280px;
position: absolute;
top: -1px;
left: -966px;
border-top: 1px #ccc solid;
border-right: 1px #ccc solid;
background: rgba(255, 255, 255, .8);
z-index: 1020;
}
ul.MenuBarVertical ul.MenuBarSubmenuVisible { left: 66px; }
ul.MenuBarVertical ul li {
width: 270px;
height: 20px;
margin: 0;
padding: 4px 5px;
border: 0;
}
ul.MenuBarVertical ul li:Hover {
background: rgba(255, 255, 255, .9);
color: #fff;
}
/*******************************************************************************
BROWSER HACKS: the hacks below should not be changed unless you are an expert
*******************************************************************************/
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe {
position: absolute;
z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection {
ul.MenuBarVertical li.MenuBarItemIE {
display: inline;
f\\loat: left;
background: #FFF;
}
}
#menu2 {
width: 181px;
height: 461px;
float: right;
padding: 0px;
margin: 0px;
list-style-type: none;
}
#menu2 ul { list-style-type: none; }
#menu2 li {
margin: 0 0 15px 0;
width: 120px;
position: relative;
border-bottom: 1px #ccc solid;
border-left: 1px #ccc solid;
padding: 4px 0 4px 5px;
}
#frame {
width: 661px;
height: 461px;
margin: 0px 200px 19px 80px;
padding: 0px 0px 19px 0px;
border-bottom:1px #ccc solid;
}
#framefeature {
width: 661px;
height: 461px;
margin: 0px 200px 19px 80px;
padding: 0px 0px 19px 0px;
}
#menu4 {
margin: 0 0 0 80px;
float: left;
height: 41px;
}
.menu4 ul {
padding: 0;
margin: 0;
}
.menu4 li {
list-style-type: none;
display: inline;
margin: 0 4px 0 0;
height: 41px;
}
.menu4 a:link, .menu4 a:visited { color: #fff; }
.menu4 a:hover {
color: #fff;
border-bottom: 1px solid #676;
padding: 0 0 2px 0;
}
#menu5 {
float: right;
margin: 0 200px 0 0;
}
.menu5 ul { padding: 0px; }
.menu5 li {
list-style-type: none;
text-align: right;
margin: 0;
}
.menu5 a:link, .menu5 a:visited {
min-width: 89px;
text-decoration: none;
padding: 1px 0 0 3px;
border-left: 1px solid #fff;
}
.menu5 a:hover, .menu5 a:active { border-left: 1px solid #676; }
#image2, #image3, #image4, #image5, #image6, #image7, #image8, #image9, #image10, #image11, #image12, #image13, #image14, #image15, #image16, #image17, #image18, #image19, #image20 {
display: none;
float: right;
}
#image1num, #image2num, #image3num, #image4num, #image5num, #image6num, #image7num, #image8num, #image9num, #image10num, #image11num, #image12num, #image13num, #image14num, #image15num, #image16num, #image17num, #image18num, #image19num, #image20num { margin: 0px 0px 4px 0px; }
#image1num a:link, #image2num a:link, #image3num a:link, #image4num a:link, #image5num a:link, #image6num a:link, #image7num a:link, #image8num a:link, #image9num a:link, #image10num a:link, #image11num a:link, #image12num a:link, #image13num a:link, #image14num a:link, #image15num a:link, #image16num a:link, #image17num a:link, #image18num a:link, #image19num a:link, #image20num a:link { height: 41px; }
#image1num a:hover, #image2num a:hover, #image3num a:hover, #image4num a:hover, #image5num a:hover, #image6num a:hover, #image7num a:hover, #image8num a:hover, #image9num a:hover, #image10num a:hover, #image11num a:hover, #image12num a:hover, #image13num a:hover, #image14num a:hover, #image15num a:hover, #image16num a:hover, #image17num a:hover, #image18num a:hover, #image19num a:hover, #image20num a:hover { height: 41px; }
#sterrinportrait {
background: url('http://www.sosa.ie/sosaimages/sterrin151x221.jpg') no-repeat 00em 0em;
margin: -20px -20px 19px 19px;
width: 151px;
height: 221px;
float: right;
}
#studio {
background: url('http://www.sosa.ie/sosaimages/studio.jpg');
padding:20px;
height: 421px;
}
#studio p, #studio h6 { text-align: justify; }
#studio h6 {
text-align: justify;
font-size: 9px;
}
.featureimage {
float: right;
border: 1px solid #ccc;
padding: 0px;
margin: 0 0 0 9px;
}
.featurecontent {
border-bottom: 1px solid #ccc;
padding: 0 0 9px 0;
margin: 0 0 9px 0;
min-height: 81px
}
.featuretitle {
border-bottom: 1px solid #ccc;
padding: 0 0 9px 0;
margin: 0 0 9px 0;
min-height: 21px
}
.testimonial {
margin: 0 0 4px 0;
font: normal italic 12px/16px Georgia, serif;
color: #565;
}
ul.MenuBarVertical { zoom:1.0; }
#menu1 { width:66px; }
* html #frame { margin:0 0 19px 77px }
</style>
</head>
<body OnLoad="rotateImage('rImage')">
<a href="index.html">
<div id="header"></div>
</a>
<div id="maincontent">
<div id="menu1">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">buildings</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="projectrathmines1.html" title="Sterrin O'Shea Architects - Extension/Refurbishment of A Protected Structure">Extension/Refurbishment of A Protected Structure</a></li>
<li><a class="MenuBarItemSubmenu" href="projectglasnevin1.html" title="Sterrin O'Shea Architects - Extension/Refurbishment of A 1930s House">Extension/Refurbishment of A 1930s House</a></li>
<li><a class="MenuBarItemSubmenu" href="projectclonskeagh1.html" title="Sterrin O'Shea Architects - Extension/Remodeling of A 1990s Detached House">Extension/Remodeling of A 1990s Detached House</a></li>
<li><a class="MenuBarItemSubmenu" href="projectrathgar1.html" title="Sterrin O'Shea Architects - Additions to An Edwardian House">Additions to An Edwardian House</a></li>
<li><a class="MenuBarItemSubmenu" href="projectbooterstown1.html" title="Sterrin O'Shea Architects - Remodeling A Terraced House">Remodeling A Terraced House</a></li>
<li><a class="MenuBarItemSubmenu" href="projectchurchtown1.html" title="Sterrin O'Shea Architects - Additions to A 1930s Bungalow">Additions to A 1930s Bungalow</a></li>
<li><a class="MenuBarItemSubmenu" href="projectrathgar2.html" title="Sterrin O'Shea Architects - Refurbishment of An Edwardian House">Refurbishment of An Edwardian House</a></li>
<li><a class="MenuBarItemSubmenu" href="projectballsbridge1.html" title="Remodeling of A Mews House">Remodeling of A Mews House</a></li>
<li><a class="MenuBarItemSubmenu" href="projectchurchtown2.html" title="Sterrin O'Shea Architects - Garden Pavilion">Garden Pavilion</a></li>
<li><a class="MenuBarItemSubmenu" href="projectmonkstown1.html" title="Sterrin O'Shea Architects - Eco Townhouses">Eco Townhouses</a></li>
<li><a class="MenuBarItemSubmenu" href="projectstoneybatter1.html" title="Sterrin O'Shea Architects - Refurbishment of An Artisan Dwelling">Refurbishment of An Artisan Dwelling</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">projects</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="projectrathfarnham1.html" title="Sterrin O'Shea Architects - House Overlooking Dublin Bay">House Overlooking Dublin Bay</a></li>
<li><a class="MenuBarItemSubmenu" href="projectfoxrock1.html" title="Sterrin O'Shea Architects - House in The Garden">House in The Garden</a></li>
<li><a class="MenuBarItemSubmenu" href="projectrosslare1.html" title="Sterrin O'Shea Architects - House Built Around A Listed Church Wall">House Built Around A Listed Church Wall</a></li>
<li><a class="MenuBarItemSubmenu" href="projectsligo1.html" title="Sterrin O'Shea Architects - House Facing Ben Bulben">House facing Ben Bulben</a></li>
<li><a class="MenuBarItemSubmenu" href="projectblackrock1.html" title="Extension/Refurbishment of A Georgian House">Extension/Refurbishment of A Georgian House</a></li>
<li><a class="MenuBarItemSubmenu" href="projectdouglas1.html" title="Sterrin O'Shea Architects - 3 Detached Split Level Houses">3 Detached Split Level Houses</a></li>
<li><a class="MenuBarItemSubmenu" href="projectmonkstown2.html" title="Sterrin O'Shea Architects - Extension/Remodeling of A 1960s House">Extension/Remodeling of A 1960s House</a></li>
<li><a class="MenuBarItemSubmenu" href="projectdrumcondra1.html" title="Sterrin O'Shea Architects - Timber Wrap Extension">Timber Wrap Extension</a></li>
</ul>
</li>
<li><a href="profile.html" title="Sterrin O'Shea Architects - profile">profile</a></li>
<li><a href="contact.html">contact</a></li>
<li><a href="testimonials.html">testimonials</a></li>
<li><a href="feature.html">features</a></li>
</ul>
<!--end MenuBar1-->
</div>
<!--end menu1-->
<div id="menu2"> </div>
<div id="frame"> <img name="rImage" src="http://www.sosa.ie/sosaimages/rathmines1detailelevation.jpg"> </div>
<div class="menu4" id="menu4"> Sterrin O'Shea Architects · +353 (0)1 214 3315 ·<a href="mailto:sterrinoshea@sosa.ie ">sterrinoshea@sosa.ie </a> </div>
<div class="menu5" id="menu5"> </div>
</div>
<!--end maincontent-->
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>