A handful of IE6 issues and a wierd Safari thing

[limerick]

www.bbk.ac.uk/~ldela09/INFMA/about

Ack.
IE6:
1. The right column just sits smugly on the left side of the page.
2. The footer has immense amounts of margin both above and below.
3. In everything but IE6, the header logo and the text to the right of it stay level with one another - to the extent that I had to bump the header slightly above the text with negative margins. It ain't so for IE6. As a result, the text and the form are miles down the page.
4. My nice hover effect on the initial letters of the top menu items doesn't work. IE6 applies the effect to active links.
5. The form doesn't like to sit above the menu text, even when there's room for it, preferring instead to force it onto new lines.
Safari:
6. There's an odd amount of padding to the right of the form.

I've already fixed an obvious hasLayout problem, but I don't get what these are about. .

It would be great if anyone here could help me with this; I'd be really grateful.

There may be numerous IE7 issues as well; I haven't seen this in IE7. I'm checking it on a friend's computer, and I figure I'll try to persuade him to download Seven once I've ironed out the troubles in Six. Any heads-up would be most welcome.

[limerick]

Please. Anything on what might cause any of these problems. I'm throwing my shame aside and begging. Just the sort of bugs that they are - I've been google searching like crazy and haven't worked out why this is happening. I know I'm stupid and useless and everything, and I know it's not fair to expect solutions to all of these bugs. Hell, I don't expect solutions to anything. I'm just pleading pitifully because I'm desperate.

[semantic7]

I have two suggestions for you. First you probably will have to use a IE6 only style sheet enclosed between conditional comments. Second comment out the whole page and release one element at a time and set the styles so that its appears in position in IE6 and then proceed to the next one. I recommend you use a fresh sheet and then compare with the old one and delete the common styles and set this as IE6 only style sheet. I wish i could help but don't have time right now.

[Paul O'B]

Hi,

I'll answer these as I get to them so they may change on what I find later

1) Don't use left:-100% but use left:-174px;

#right {
    width: 170px;
    float: right;
    margin-left: -174px;
    padding-left: 4px;
    margin-top: 25px;
    position:relative;
    }

2)The footer has a big space because you gave it one:

#footer {
    clear: both;
    /*margin-top: 100px;*/
    }

Remove the margin.

I'll look at the others in a minute

[Paul O'B]

This is invalid:

  <a href="HOME">
    <h1>Close To Home</h1>
  </a>

It should of course be:

 <h1><a href="HOME">Close To Home  </a></h1>

3) remove the break from the form as it is pushing the form too high. You can set the inputs to display:block to start a new line. You had a margin on the h2 which was pushing it down.

This looks level to me.

#header form input {
    margin: 0 0 0.5em 0;
    width: 10em;
    display:block
    }
#header h1 {
    text-indent: -9000px;
    height:95px;
    width:160px;
    margin-top:-5px;
    background-image: url(http://www.bbk.ac.uk/~ldela09/INFMA/images/CTH_03.png);
    background-repeat: no-repeat;
    float: left;
    }
#header h2 {
    font-size: 130%;
    margin-left: 175px;
    margin-top:0;
    letter-spacing: 0.1em;
    }

haslayout fix for IE.

#content {
    margin-left: 250px;
    margin-right: 10px;
    font-size: 170%;
    letter-spacing: 0.1em;
    line-height: 115%;
min-height:0;
}
/* mac hide \*/
* html #content {height:1%}
/* end hide*/

    <div id="header"> 
        <h1><a href="HOME">Close To Home    </a></h1>
        <h2>Support and Guidance for Homeless People in Coventry </h2>
        <form id="search_site" action="../meta/apology.html">
            <fieldset id="search">
            <input id="search_text" name="search" type="text" />
            <input class="submit" type="submit" value="Search Site" />
            </fieldset>
        </form>
    </div>

[Paul O'B]

4)

#prinav ul li a{
    color: black;
    text-decoration: none;
    }
    #prinav ul li a:hover{visibility:visible}
#prinav ul a:hover span.first {
    color: purple;
    }

[Paul O'B]

5)I don't have safari to check at the minute


6) Its the double margin bug in IE (see the faq on floats.

Here's the fix:

#header form {
    float: right;
    margin: -10px 10px 0 0;
    width: 15em;
    font-size: 110%;
 display:inline;/* ie double margin fix*/
    }

The leftnav needs a "haslayouut" fix as well.

/* mac hide \*/
* html #secnav ul li, * html #secnav ul li a{height:1%}    
/* end hide */

That's about it from me

[limerick]

Thank-you very, very much, especially for 1) as the page wasn't really usable before it and that problem is now completely fixed. My problem with 2) was more that the footer's margin appeared much larger in IE than in anything else - I had deliberately added whitespace, just not that much! I now have it as padding, and it's still much too much, but at least doesn't extend below the footer as well which was the most annoying part.
The reason for my invalid nesting of the <h1> and <a> elements, which I knew to be wrong, was that I couldn't figure out how to send the <h1> 9000px off the page without pulling the <a> inside it along too, thus resulting in no clickable area. I daresay there is a better way of doing things.
I clearly didn't explain 5) and 6) very well as they apply to IE and Safari respectively, not vice versa. Also, you've suggested a lot of hasLayout fixes I didn't know I needed. Do I need them even when the underlying layout issues aren't visible?
Thank-you so much again for your help. You are pretty damn fantastic.

[Paul O'B]

Hi,

2) I think you misunderstand as you don't need padding or margin on the footer in the way that you have it. The footer is in the middle div and because you have applied a clear:both to it then it clears the floated left column whic in IE is twice as high as firefox due to the haslayout issues I mentioned and fixed.

Remove the clear:both from the footer and it will sit exactly under the content and show you what I mean. In reality your footer should be outside of all three floats and clearing them all so that is sits under them by default and not just by chance.

The reason for my invalid nesting of the <h1> and <a> elements, which I knew to be wrong, was that I couldn't figure out how to send the <h1> 9000px off the page without pulling the <a> inside it along too, thus resulting in no clickable area. I daresay there is a better way of doing things.

Use this:

    #header h1 a{
    display:block;
    height:95px;
    width:160px;
}

Also, you've suggested a lot of hasLayout fixes I didn't know I needed. Do I need them even when the underlying layout issues aren't visible?

Yes your left column is about 3 times longer in IE without the haslayout fixes (as I mentioned above). It should be obvious from just looking at it

The middle column also needs it because it is not behaving correctly and most likely your content will disappear when you add anything complicated. The fix also addresses the 3px jog to some degree.

I clearly didn't explain 5) and 6) very well as they apply to IE and Safari respectively

I don't have safari but the fixes I gave you fix IE and it now behaves the same as firefox as far as I can see on my local amended version.

You don't seem to have updated your online version with all my fixes so your header is still out of kilter because of the margin issues I pointed out.

You also haven't added the fix for the menu hover effect that I gave you above either

[limerick]

I was working through your fixes one by one and then my friend whose PC I was using wanted to use his computer again, so I stopped uploading to test. I had put the rollover effect on, but it wasn't working because I included a space, which is something I've only just worked out. . They're up there now. Thanks for explaining what was going on with the hasLayout stuff, too - I feel like I understand it a great deal better now. I've kept the footer inside the #left div because I like the border running all the way down to the very bottom of the page, but I'm reading through some of the FAQ stuff here to get it to sit at the bottom of the page properly.

Thanks, again.

[Paul O'B]

Glad you are getting to grips with it - it will all make sense in the end . (some of it anyway )