VirtualSphere

Hello all,

I thought I'd finished designing a new site which works fine in IE6, Firefox 2, Opera and Netscape - until I tried it in IE 7!

Problem 1 (most important) - Tabbed CSS menu moves on rollover
URL = http://www.toucanmusic.co.uk/test/index.php
CSS = http://www.toucanmusic.co.uk/test/toucan.css
The tabbed menu at the top works fine in all other browsers I've tried, however in IE 7 the menu initially loads up correctly then, when you rollover the tabs, a white gap appears between the tabs and the blue bar underneath. Refresh the page once and the gap remains, but refresh it a second time and it disappears! Not being an expert at CSS, I'm using a variation of the "fitted doors" menu found at http://www.cssplay.co.uk/menus/doors.html - which appears to work fine in IE 7, so I'm not sure what I'm doing wrong. The XHTML and CSS validate correctly.

Problem 2 - Bottom of text cut off
URL = http://www.toucanmusic.co.uk/test/releases/current.php
CSS = http://www.toucanmusic.co.uk/test/toucan.css
The large text at the right is "cut off" in IE7 - I've tried changing the height of the div in CSS (catno) with no effect.

Problem 3 - Bottom of images cut off
URL = http://www.toucanmusic.co.uk/test/podcasts/index.html
CSS = http://www.toucanmusic.co.uk/test/toucan.css
The bottom of the images in the orange box are "cut off" in IE7, yet display fine in every other browser.

Any help would be very much appreciated. As previously mentioned I don't have a lot of experience with CSS so please bear with me if the solutions are really obvious!

Many thanks
John







Re: Internet Explorer Web Development Three problems with IE 7 - rollovers, cut-off text and cut-off images

tjm-nsi

I'm seeing the same issue described in Problem 1 -- I've got an ASP.Net menu that works just fine in IE6 & Firefox -- but it moves down (a white gap is inserted) when it is mouseovered. And it stays in the new position until/unless you refresh the page a couple times. Of course it just moves again the next time you mouseover it.

Did you find a solution to Problem 1 I haven't been able to find anything yet.





Re: Internet Explorer Web Development Three problems with IE 7 - rollovers, cut-off text and cut-off images

VirtualSphere

No, I've not yet found a solution to the gap problem. Strangely I've not seen it occur anywhere else so I am glad it is not just me! I'm currently trying to decide whether to re-write the menus from scratch as about 25% of my visitors are using IE7...



Re: Internet Explorer Web Development Three problems with IE 7 - rollovers, cut-off text and cut-off images

bmcream

I have been designing and developing websites since 1995 and decided i should update myself by using the Zen Garden techniques, thereby dumping table layouts in preference of using only CSS stylesheets with maybe a touch of JavaScript where essential.

I have just produced a new site using this method with a tabbed top menu. It works in IE6, Netscape 7.2, Mozilla, Firefox 1.0 and Opera 7.0, however, the client uses IE7 and apparently there are no rollover tabs visible. I can't vouch for this as i don't have IE7 because i don't believe it is functional as a business tool/browser, although i am given to understand it has many advantages for the home user as a media tool.

The tabs in question are background images swapped on rollover via the stylesheet in the a:link/a:hover styles etc., they are not images embedded in the HTML page, neither are they controlled by JavaScript.

My !DOCTYPE is strict, as recommended on the IE7 forums, and i also noticed on one forum that DIV end and beginning tags should have no spaces between them... not sure about this statement, but i have implemented it anyway... much to the detriment of neatly indented code.

If anyone can provide any clues, tips, tricks or just plain errors on my part, i would be truely grateful.

The code is currently in my secure test area and requires a password and username to access, but if this text explaination doesn't ring any bells with any IE7 CSS developers, then i will put the site out in a public area for assessment on request.

Many thanks,
CM.






Re: Internet Explorer Web Development Three problems with IE 7 - rollovers, cut-off text and cut-off images

Eric Chau

Hi,

I tried to access your test page but it apparent is taken off already. I have a similiar problem before (as I haven't seen your html code, I can't say for sure it is the exact same problem.) with gap appearing between menu items in my css menu.

I coded my own css menu but I am sure it is using pretty much the same techique you'd find on the internet. My code works fine in firefox, opera, safari and ie6 but gaps will appear in ie7.

My CSS menu structure was as follows:

<div class="mainMenu">

<ul>

<li><a href="someurl1.html">menuitem1</a></li>

<li><a href="someurl2.html">menuitem2</a></li>

<li><a href="someurl3.html">menuitem3</a></li>

</ul>

</div>

Ran out of things to try, I tried to remove all the white space between all menu items and Voila--the gaps disappear.

ie:

<div class="mainMenu"><ul><li><a href="someurl1.html">menuitem1</a></li><li><a href="someurl2.html">menuitem2</a></li><li><a href="someurl3.html">menuitem3</a></li></ul></div>

I'd strongly recommend you to try this. I wish I didn't have to remove the space as the code is not very readable this way, but I wouldn't complain as long as it works.

I hope this information helps.





Re: Internet Explorer Web Development Three problems with IE 7 - rollovers, cut-off text and cut-off images

VirtualSphere

Thanks for your suggestion about removing the white space. I think I may have read about this solution before you posted and tried it, but I will give it a go again and see if it works. The test site has been taken down and is now the main site (despite the IE7 problem) so you can view it at http://www.toucanmusic.co.uk (it looks correct in Firefox and IE6).

I've now heard of a similar problem occurring elsewhere and it appears to be a problem with the way IE7 handles the CSS link hover styling, as the tabs work fine without the rollover links.




Re: Internet Explorer Web Development Three problems with IE 7 - rollovers, cut-off text and cut-off images

tjm-nsi

Well, I've apparently resolved whatever my issue was. Unfortunately, I didn't do it in a very structured manner, so I'm not sure exactly what it was that resolved the problem.

I had some DIVs where I was specifying their height and width, but probably shouldn't have been. That's my suspicion right now, that I was specifying a big height for a DIV, which wouldn't render that way initially... but was somehow triggered when I hovered over the menu items. Once it rendered that size, it created the extra whitespace in the page.

I also changed a few other layout items... putting DIVs inside tables and vice versa... so something along those lines resolved the issue for me. Now IE7 displays things just like Firefox and IE6.

Hopefully that helps someone fix their site, or isolate the problem further.