Website Help please!

HTML & CSS
1

Hi All Hope everyone has a had a good end to the year & ready for a great 2010…

I need some help with my site please: http://riprugga.com/index.html (2nd link is accomodation & it is a drop down) & does not work in IE 6(the son of the devil) http://riprugga.com/gallery-views.html & my gallery does not work.

please any help will be appreciated.

Thanks
from Sunny Cape Town

2

HI,

You don’t seem to have built in any support for IE6. IE6 only understands hovers on anchors so you need to add a script to supply hover support on other elements.

You have also placed the dropdowns too far away from the target which means you can never mouse to it. It needs to be touching the parent so that you can move the mouse to it before it disappears.

Try something like this.


/* Nav drop down */

#nav, #nav ul {
    padding: 0;
 [B]   margin: 0px 0px 7px 10px;[/B]
    list-style: none;
}
[B]#nav ul {margin:0;display:inline}[/B]
#nav li {
    float: left;
    position: relative;
    width: 12em;
    background-color: #685c42;
    color: #000000;
    font-size: 11px;
}
#nav a:link {
    display: block;
    text-decoration: none;
    padding-left: 0em;
    color: #fff;
}
#nav a:visited {
    color:#FFFFFF;
}
* html #nav a {
    width: 100%;
}
#nav ul {
   [B] left:0;
    top:100%;
    position: absolute;
    margin:0 0 0 -999em;[/B]
}
#nav ul li {
    border: 0 none transparent;
    background-color: #685c42;
    font-size: 100%;
    margin-bottom:0px;
    padding: 5px;
  [B]  position:relative;[/B]
}
#nav a:hover {
    color:#99ac57;
}
#nav li:hover ul,[B]#nav li.over ul [/B]{
   [B] margin:0;[/B]
    color:#99ac57;
}

Then add this in to the head of the document (although you could move the js external and link to it from within the conditional comments).


<!--[if lt IE 7]>
<script type="text/javascript">

sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" over";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" over\\\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>
<![endif]-->

I couldn’t see anything wrong with the gallery - what’s the problem?

3

IF you mean the gallery problem not spacing out the rows, that’s because the non-IE browsers are increasing the height of the <td> to create room for the inline node (the space under an image). So even though you specify a 92px height it will increase that to make room. IE didn’t.

.table1 img
{
	vertical-align:bottom;/*remove space under image*/
	margin-bottom:10px;/*space it out this way*/
}
4

thanks & the gallery just does not work in IE6 the light window will not pop up for some reason…well give both solution a go now & if my wording is not good enough or if I could be more descriptive let me know please thanks again all

5

Hi,

The gallery is working in my IE6 ok apart from the issue Ryan mentioned. It pops up ok with no problems.

6

It’s popping up fine for me too. Is your cache cleared? And are you making sure your not using a broken IE6? Is it standalone or where did you get it from?

7

FWIW, just tested in IEtester and the first time the gallery just takes you to the jpg. After trying 3 times, the script kicks in and the gallery works fine.

8

thanks all & out of being curious how accurate is IEtester?

9

I rely on IETester for versions 6 & 7. I haven’t tested them side by side before but I believe the rendering is perfectly accurate.

10

I use it for IE6, IE7 and IE8 before going live. Haven’t had problems so far. But you have to get IE7 on your box to have IEtester working simulating IE8.

11

thanks will look into IEtester