16 replies [Last post]
Matthew
Offline
Regular
Last seen: 16 years 15 weeks ago
Joined: 2005-10-14
Posts: 19
Points: 0

Hi everyone Smile

Looking forward to reading much more here, wish I'd found this forum a while ago!

I've been making the (steep learning curve!) transition from a site with tables to CSS.

My work in progress is here: http://www.nfh.org.uk/test2/index.php

- It's a combination of work from studying various tutorials and past experience, etc. The page so far validates, which I'm really pleased about.

In Opera 8.5 and Firefox 1.0 the top navigation tabs display correctly and the curved tab edges remain 'static' when you hover over the text. But in Internet Explorer 6.0, when you hover backwards and forwards, the smooth tab edges dissapear rapidly and you can view the straight navigation lines flick backwards and forwards. Not a great description, but hopefully people will see what I mean when they try it. Is there any fix for this for IE 6?

- I'm also struggling as I can't see my test template (URL above) in IE 5/5.5, Mac (Safari) browsers, Linux etc - I'm wondering if there are any users here who may be kind enough to take a look at the page if you have these browsers and post/link up a screenshot of what they look like or just let me know. I'm keen to make sure I can present the site in most major browsers.

Out of interest, are there any decent emulators on the web thesedays that do this (e.g. for IE5, Safari, etc)? I know of the old Lynx and Mosaic browser emulators out there, but there doesn't seem to be any for old, but not ancient browsers.

Many Thanks. Smile

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 12 years 46 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

IE 6 'Tab' Menu displays differently/browser checks reqd

Welcome Matthew...

I tested the page on my Mac in FF, IE and Safari...all of them seem to work as they should. The only difference that I saw was bolded text in the menu bar when I viewed in Safari and IE.

- r

Matthew
Offline
Regular
Last seen: 16 years 15 weeks ago
Joined: 2005-10-14
Posts: 19
Points: 0

IE 6 'Tab' Menu displays differently/browser checks reqd

Hi ragamuffin, thanks for the quick reply, much appreciated. Cool

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

IE 6 'Tab' Menu displays differently/browser checks reqd

You can download IE standalones (5.01/5.5) from evolt. And iCapture will give you free screenshots of your site in Safari.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Matthew
Offline
Regular
Last seen: 16 years 15 weeks ago
Joined: 2005-10-14
Posts: 19
Points: 0

IE 6 'Tab' Menu displays differently/browser checks reqd

Thanks Tyssen, I'll check your recommendations out now. Cool

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Re: IE 6 'Tab' Menu displays differently/browser checks reqd

Matthew wrote:
But in Internet Explorer 6.0, when you hover backwards and forwards, the smooth tab edges dissapear rapidly and you can view the straight navigation lines flick backwards and forwards. Not a great description, but hopefully people will see what I mean when they try it. Is there any fix for this for IE 6?

On first load in IE6 & IE5.01 when you rollover one link, it goes completely square before coming back to the right shape but then after that, they all behave normally. Refreshing and force refreshing wouldn't replicate the problem. Other than that, your site looks and behaves the same in FF & the two IEs.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Re: IE 6 'Tab' Menu displays differently/browser checks reqd

Tyssen wrote:
On first load in IE6 & IE5.01 when you rollover one link, it goes completely square before coming back to the right shape but then after that, they all behave normally. Refreshing and force refreshing wouldn't replicate the problem. Other than that, your site looks and behaves the same in FF & the two IEs.

Hi, that's an IE bug that can be fixed.

See here (although for some reason Paul hasn't implemented the hand hover pointer):

http://www.pmob.co.uk/temp/navimagereplace.htm

And I truly hope you include "The Supreme Solicitor" from Chipping Campden if the site goes live.

Trevor

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Re: IE 6 'Tab' Menu displays differently/browser checks reqd


From that method:

Quote:
The font-size of the text has been set small enough to read but also small enough so that if the text size is increased via the browsers controls then the text doesn't outgrow the image.Of course this method does depend on the the fact that the image is big enough to hide the text so some tweaking is necessary to make it work.

This is overcome by setting the overflow of the element to hidden as described here.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

IE 6 'Tab' Menu displays differently/browser checks reqd

Tyssen

Thanx for that link. Illuminating. Also a nice site design.

Trevor

Matthew
Offline
Regular
Last seen: 16 years 15 weeks ago
Joined: 2005-10-14
Posts: 19
Points: 0

Re: IE 6 'Tab' Menu displays differently/browser checks reqd

ClevaTreva wrote:
Tyssen wrote:
On first load in IE6 & IE5.01 when you rollover one link, it goes completely square before coming back to the right shape but then after that, they all behave normally. Refreshing and force refreshing wouldn't replicate the problem. Other than that, your site looks and behaves the same in FF & the two IEs.

Hi, that's an IE bug that can be fixed.

See here (although for some reason Paul hasn't implemented the hand hover pointer):

http://www.pmob.co.uk/temp/navimagereplace.htm

And I truly hope you include "The Supreme Solicitor" from Chipping Campden if the site goes live.

Trevor

Hi - thanks for the help there, very informative. Smile

I'm still a little unsure of what I need to be adding to overcome this IE bug, would you be able to clarify again please?

Thanks. Cool

Matthew
Offline
Regular
Last seen: 16 years 15 weeks ago
Joined: 2005-10-14
Posts: 19
Points: 0

IE 6 'Tab' Menu displays differently/browser checks reqd

I'd also like to ask for some more help with an IE 5.5 problem while I think of it.

In IE 5.5 view, the curved corners are in the wrong place as can be seen in the attached screenshot (which hopefully explains it better). After a page refresh, the problem seems to dissapear.

I'm not sure why this is happening, can anyone advise? Thanks. Smile

>> Screenshot of IE 5.5 Problem

>> Live Site Template

Matthew
Offline
Regular
Last seen: 16 years 15 weeks ago
Joined: 2005-10-14
Posts: 19
Points: 0

IE 6 'Tab' Menu displays differently/browser checks reqd

Matthew wrote:
I'd also like to ask for some more help with an IE 5.5 problem while I think of it.

I've checked this out as far as I can and I don't think I've made any mistakes. :? It must be an IE quirk?! The more code I validate, the more I realise just how quirky IE really is! Laughing out loud

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

IE 6 'Tab' Menu displays differently/browser checks reqd

I had a quick look and the problem seemed to appear and disappear as I scrolled the offending part in & out of view. :?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Matthew
Offline
Regular
Last seen: 16 years 15 weeks ago
Joined: 2005-10-14
Posts: 19
Points: 0

IE 6 'Tab' Menu displays differently/browser checks reqd

Tyssen wrote:
... problem seemed to appear and disappear as I scrolled the offending part in & out of view. :?

That's the odd thing about it Tyssen, can't figure it out. :? Laughing out loud

Would anyone be kind enough to point me again in the right direction ref the IE Tab Menu problem above as I can't sort this? Thanks. Cool

Matthew
Offline
Regular
Last seen: 16 years 15 weeks ago
Joined: 2005-10-14
Posts: 19
Points: 0

Re: IE 6 'Tab' Menu displays differently/browser checks reqd

Matthew wrote:
In Opera 8.5 and Firefox 1.0 the top navigation tabs display correctly and the curved tab edges remain 'static' when you hover over the text. But in Internet Explorer 6.0, when you hover backwards and forwards, the smooth tab edges dissapear rapidly and you can view the straight navigation lines flick backwards and forwards. Not a great description, but hopefully people will see what I mean when they try it. Is there any fix for this for IE 6?

I've finally fixed the IE 5.5 display problem with the corners dissapearing etc, it was a combination of the 'height' and 'width' in the CSS that's solved it. Smile

I'm still needing some help with the IE 'tab' issue if anyone would be so kind to lend a hand, thanks. Cool

Matthew
Offline
Regular
Last seen: 16 years 15 weeks ago
Joined: 2005-10-14
Posts: 19
Points: 0

IE 6 'Tab' Menu displays differently/browser checks reqd

Well, two weeks later I'm still having the same problem with the IE view on my tab menu, would anyone be kind enough to let me know what I will need to add to my css, which is:

Quote:
#navigation a
{
color: #000;
background: #EBD8AF url(../images/tabs/left_tab.gif) no-repeat left top;
text-decoration: none;
padding-left: 10px;
/*Remove Hyperlink bottom border from tab menu*/
border-bottom: 0px
}

#navigation a span
{
background: url(../images/tabs/right_tab.gif) no-repeat right top;
padding-right: 10px
}

#navigation a, #navigation a span
{
display: block;
float: left
}

/* Commented backslash hack hides rule from IE5-Mac \*/
#navigation a, #navigation a span
{
float: none
}
/* End IE5-Mac hack */

#navigation a:hover
{
color: #fff;
background: #D7AE5B url(../images/tabs/left_tab_hover.gif) no-repeat left top;
text-decoration: none;
padding-left: 10px
}

#navigation a:hover span
{
background: url(../images/tabs/right_tab_hover.gif) no-repeat right top;
padding-right: 10px
}

#navigation ul
{
list-style: none;
padding: 0;
/*margin: 0;*/
margin: 0 1%;
}

#navigation li
{
float: left;
border-bottom: 1px solid #010101;

}

- It would be very appreciated, thanks everyone. Laughing out loud

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

IE 6 'Tab' Menu displays differently/browser checks reqd

Hi

In reply to this and your PM (and I prefer PM's to be for private messages only, if I don't reply to threads it means I'm away from my computer which happens sometimes for days when I need a rest).

Paul O'Brien's solution relies on their being one image for the link (with hover and non-hover versions, ie the whole tab is one button), whereas yours uses left and right bits for the tabs. Unfortunately, there is little to be done to make IE6 intelligent enough to preload an image YOU know will be neaded, but is not showing when the page loads, and that is the problem.

Various preload image scripts exist, but IE usually ignores them. It checks the page, sees what isn't needed, and doesn't load it. I used to cheat by putting the image at the foot of my page as a 1x1 pixel, so it didn't really show up!

I doubt if MS will fix this feature in IE7, despite the fact that most folk now have broadband.

Trevor