3 Replies - 486 Views - Last Post: 04 February 2013 - 06:17 AM

#1 Alhazred  Icon User is offline

  • D.I.C Head

Reputation: 9
  • View blog
  • Posts: 174
  • Joined: 25-July 07

CSS menu and problem with IE7

Posted 04 February 2013 - 03:55 AM

I've created a very simple horizontal menu.
It consists of 2 rows, on the 1st row there are the main links, when the mouse passes over those which have a submenu, the submenu appears on the 2nd row.

Here you can see how the menu works and the css code
http://jsfiddle.net/nYP7j/9/

On IE7 the 1st line is correctly displayed, but the submenu doesn't appear on a single line, all the links are one under the other.

What should I change in the CSS to fix the problem?

Is This A Good Question/Topic? 0
  • +

Replies To: CSS menu and problem with IE7

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3227
  • View blog
  • Posts: 10,837
  • Joined: 12-December 12

Re: CSS menu and problem with IE7

Posted 04 February 2013 - 04:49 AM

Do you have a link to your page? Otherwise, post more of the HTML.

Make sure that your page has a valid DOCTYPE declaration. This is always required but, in particular, if it is missing it causes IE to revert to quirks mode.

Validate your HTML and CSS.

This post has been edited by andrewsw: 04 February 2013 - 04:51 AM

Was This Post Helpful? 0
  • +
  • -

#3 Alhazred  Icon User is offline

  • D.I.C Head

Reputation: 9
  • View blog
  • Posts: 174
  • Joined: 25-July 07

Re: CSS menu and problem with IE7

Posted 04 February 2013 - 05:49 AM

I don't yet have the page online.

HTML validator says: This document was successfully checked as HTML5!
CSS Validator says: Congratulation! No error found.

A real example for the HTML of the menu is
<div id='top-menu-nav'>
	<ul>
		<li><a href="http://www.newsite.com/">Home</a></li>
		<li><a href='#'>Modifica dati</a>
			<ul>
				<li><a href="http://www.newsite.com/users/modifica/user_data.html">Modifica dati personali</a><div class='submenu-divider'></div></li>
				<li><a href="http://www.newsite.com/users/modifica/password.html">Modifica password</a><div class='submenu-divider'></div></li>
				<li><a href="http://www.newsite.com/users/modifica/email.html">Modifica email</a><div class='submenu-divider'></div></li>
			</ul>
		</li>
		<li><a href="http://www.newsite.com/users/ordini.html">I miei ordini</a></li>
		<li><a href="http://www.newsite.com/users/preferiti.html">Shop preferiti</a></li>
	</ul>
</div>


Where the submenu-divider class
is
.submenu-divider {
	width: 15px;
	height: 30px;
	float: right;
	background-image: url('/static/images/submenu_divider.png');
	background-repeat:no-repeat;
	background-position:right top;
}


Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3227
  • View blog
  • Posts: 10,837
  • Joined: 12-December 12

Re: CSS menu and problem with IE7

Posted 04 February 2013 - 06:17 AM

If you delete all those submenu-dividers then it works.

The purpose of those dividers seems to be, currently, only to supply a background-image. If this is the case then add a background image to the LIs instead and make these wide, and tall, enough to position the image as you want it to display.

(Adding a DIV purely to provide background decoration is not considered a good practice.)

BTW It was a good job that I asked for further details as I would never have discovered an issue based on your jsfiddle.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1