Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

problem with IE <li> link style 1

Status
Not open for further replies.
simon551

simon551

IS-IT--Management
May 4, 2005
249
Can't get this menu to work right in IE. Let me know if I need to post the javascript. I think it's a CSS problem though.

When hovering on a menu item, the pointer is not activated for the link. In firefox, the mouse pointer
changes to a little hand signifying link when hovering on the <li> but in IE it does not become
a link until you actually are over the link word.

Code: 
/* CSS Document */
#menu ul {
	margin: 0px;
	padding: 0;
	list-style: none;
	width: 155px;
	border-bottom: 1px solid #ccc;
	}
	
#menu ul li {
	position: relative;
	}

#menu li ul {
	position: absolute;
	right: 154px;
	top: 0;
	display: none;
	}
	
#menu ul li a {
	display: block;
	text-decoration: none;
/*	color: #333;
*/
	color:#564b47;
	background-color: #FFFFFF;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	cursor: pointer;
	}
#menu li:hover ul, li.over ul { 
	display: block; 
	cursor: pointer;
	}
#menu ul a:hover, #menu ul a:focus
{
	background-color: #EEE;
	cursor: pointer;

}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
 
Sort by date Sort by votes
It works fine if I use your CSS and my own template:

Code: 
<html>
<head>
	<style type="text/css">
		/* CSS Document */
		#menu ul {
			margin: 0px;
			padding: 0;
			list-style: none;
			width: 155px;
			border-bottom: 1px solid #ccc;
			}

		#menu ul li {
			position: relative;
			}

		#menu li ul {
			position: absolute;
			right: 154px;
			top: 0;
			display: none;
			}

		#menu ul li a {
			display: block;
			text-decoration: none;
		/*    color: #333;
		*/
			color:#564b47;
			background-color: #FFFFFF;
			padding: 5px;
			border: 1px solid #ccc;
			border-bottom: 0;
			cursor: pointer;
			}
		#menu li:hover ul, li.over ul {
			display: block;
			cursor: pointer;
			}
		#menu ul a:hover, #menu ul a:focus
		{
			background-color: #EEE;
			cursor: pointer;

		}

		/* Fix IE. Hide from IE Mac \*/
		* html ul li { float: left; height: 1%; }
		* html ul li a { height: 1%; }
		/* End */
	</style>
</head>

<body>
	<div id="menu">
		<ul>
			<li><a href="#">Menu Item 1</a></li>
			<li><a href="#">Menu Item 2</a></li>
			<li>
				<a href="#">Menu Item 3</a>
				<ul>
					<li><a href="#">Menu Item 1, 1</a></li>
					<li><a href="#">Menu Item 1, 2</a></li>
					<li><a href="#">Menu Item 1, 3</a></li>
				</ul>
			</li>
			<li><a href="#">Menu Item 4</a></li>
			<li><a href="#">Menu Item 5</a></li>
		</ul>
	</div>

</body>
</html>

I tried that in IE 6 and no problems. So...

- It could be you are using IE 7 - does your code work in IE 6?

- It could be other CSS on the page with higher specificity. What happens if you remove all other CSS? If the problem goes away, add it back a piece at a time.

- Make sure both your CSS and your HTML validate:



- It could be other markup. If neither of the above steps solve the problem, post your source code here (or a URL to it).

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
I am using IE 7. The code just as you posted doesn't "work" in ie7. I don't have ie6 to try right now.

that seems to narrow it down a bit.
 
Upvote 0 Downvote
I have checked your code and is running fine in IE7 have you tried changing the cursor:hand;
 
Upvote 0 Downvote
What's interesting is that it does work just as is in IE7 but if I add this in place of <html> it no longer works correctly.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]

any idea of why that would be?
 
Upvote 0 Downvote
This validates at w3c but doesn't work correctly in IE7. I don't understand the doctype declaration nor at all why that would stop the code from working correctly in IE7. Like I said, if I just use a <html> tag with no doctype it works. I'm using dreamweaver cs3 which creates the doctype by default. Any help is appreciated.
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
    <style type="text/css">
        /* CSS Document */
        #menu ul {
            margin: 0px;
            padding: 0;
            list-style: none;
            width: 155px;
            border-bottom: 1px solid #ccc;
            }

        #menu ul li {
            position: relative;
            }

        #menu li ul {
            position: absolute;
            right: 154px;
            top: 0;
            display: none;
            }

        #menu ul li a {
            display: block;
            text-decoration: none;
        /*    color: #333;
        */
            color:#564b47;
            background-color: #FFFFFF;
            padding: 5px;
            border: 1px solid #ccc;
            border-bottom: 0;
            cursor: pointer;
            }
        #menu li:hover ul, li.over ul {
            display: block;
            cursor: pointer;
            }
        #menu ul a:hover, #menu ul a:focus
        {
            background-color: #EEE;
            cursor: pointer;

        }

        /* Fix IE. Hide from IE Mac \*/
        * html ul li { float: left; height: 1%; }
        * html ul li a { height: 1%; }
        /* End */
    </style>
</head>

<body>
    <div id="menu">
        <ul>
            <li><a href="#">Menu Item 1</a></li>
            <li><a href="#">Menu Item 2</a></li>
            <li>
                <a href="#">Menu Item 3</a>
                <ul>
                    <li><a href="#">Menu Item 1, 1</a></li>
                    <li><a href="#">Menu Item 1, 2</a></li>
                    <li><a href="#">Menu Item 1, 3</a></li>
                </ul>
            </li>
            <li><a href="#">Menu Item 4</a></li>
            <li><a href="#">Menu Item 5</a></li>
        </ul>
    </div>

</body>
</html>
 
Upvote 0 Downvote
Even with a DOCTYPE, if you add a width of 143px to your anchor styles, all works as expected in IE7.

Note: 143px = the 155px width of the LI - 10px L+R padding -2px L+R border.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
689
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
623
PeDa
PeDa
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
169
pendle666
pendle666
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
215
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top