PDA

View Full Version : CSS inline issues in IE

wac
10-12-2005, 08:15 PM
I'm coding up the following menu. It works fine in firefox. I know that there are issues in IE relating to the hover not working. What I'm worried about now is why the display:inline is not working on IE. I would have expected at least that to work. I know I'm missing something very simple but...

Also, is adding a 'behavior' property to introduce browser specific javascript the best way to fix IE? (yeah. I imagine I can wait until IE7)

<html>
<head>

<title>Test Stuff</title>
<style type="text/css" >

.menubar
{
padding: 4 0 4 0 ;
border-style: groove ;
}

/* fixes the box around the absolute popups
so they show in the right places */

.menubar li
{
position: relative ;
width: 100% ;
}

/* make top level ul flow left to right */
.menubar > li
{ padding: 4 ;
display: inline ;
}

.menubar > li > .menuitem
{
background-image: url(./poparrow.gif) ;
background-position: right center ;
background-repeat: no-repeat ;
}

.submenu > li > .menuitem, .popup > li > .menuitem
{
background-position: right center ;
background-image: url(./subarrow.gif) ;
background-repeat: no-repeat ;
}
.submenu, .popup
{
list-style-type: none ;
border-width: 2px ;
z-index: 10 ;
}

.menubar, .menuaction, .menuitem
{
text-decoration: none ; /* remove the underline for anchor */
padding: 4 ;
border-width: 1 ;
width: 100% ;
}

/* outset highlight on hover */
/* we use anchor to do the hover because IE
doesn't follow W3C rules to allow hover
on any component */
.menuaction:hover, .menuitem:hover
{
border-style: solid ;
}

.menubar, .submenu, .popup
{
background-color: lightgrey ;
}

/* submenus display under, popups display right */
.submenu, .popup
{
display:none ;
padding: 4 0 4 0 ;
border-style: outset ;

width: 100 ;
}

/* make popups overlap with their trigger */
.popup
{
left: 90 ;
margin: -3ex 0 0 0 ;
}

li:hover > .submenu
{
display:block ;
position: absolute ;
}

li:hover > .popup
{
display:block ;
position: absolute ;
}
</style>
</head>

<body>
<!-- the &nbsp; provides space for the menu arrow -->
<ul class="menubar">
<li><a href="#" class="menuitem">File&nbsp;</a>
<ul class="submenu" >
<li><a class="menuaction" href="#">item 1</a></li>
<li><a class="menuaction" href="#">item 2</a></li>
</ul>
</li>
<li><a href="#" class="menuaction">Test</a></li>
<li>
<a href="#" class="menuitem">Help&nbsp;</a>
<ul class="submenu" >
<li><a class="menuaction" href="#">About this</a></li>
<li><a class="menuitem" href="#">Contents&nbsp;</a>
<ul class='popup'>
<li><a class="menuaction" href="#">item 1</a></li>
<li><a class="menuaction" href="#">item 2</a></li>
<li>
<a class='menuitem' href="#">item 3&nbsp;</a>
<ul class="popup" >
<li><a class="menuaction" href="#">item 1</a></li>
<li><a class="menuaction" href="#">item 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a class='menuaction' href="#">item 3</a></li>
</ul>
</li>
</ul>
</span>
</body>
</html>
_Aerospace_Eng_
10-12-2005, 09:11 PM
It helps to code with a proper doctype. Without it IE goes into quirks mode. See if that helps any.
wac
10-12-2005, 09:25 PM
hmm.... I seem to remember this issue a long time ago....
I added the following doctype to the top of the file in front of the HTML tag (copied from somewhere because I really don't quite know what I'm doing), but that didn't seem to help.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">


I even tried doing a "float:left" in the CSS rule for .menubar > li, which I thought should do the same thing as the "display:inline", to no avail.

I'm missing something conceptually...
_Aerospace_Eng_
10-12-2005, 09:37 PM
Okay so you are trying to create a horizontal menu? The current HTML version is also 4.01 not 4.0, though many things are similar. It also helps if you use units on your measurements. IE doesn't understand this
.menubar > li
{ padding: 4px ;
display: inline ;
}
Remove the > and it sould work.
Since it CSS is meant to cascade, you want any li inside of .menubar to have the same css, using the > means it will go to the first child of .menubar meaning the first li.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test Stuff</title>
<style type="text/css" >

.menubar
{
padding: 4px 0 4px 0 ;
border-style: groove ;
}

/* fixes the box around the absolute popups
so they show in the right places */

.menubar li
{
position: relative ;
width: 100% ;
}

/* make top level ul flow left to right */
.menubar li
{ padding: 4px ;
display: inline ;
}

.menubar li .menuitem
{
background-image: url(./poparrow.gif) ;
background-position: right center ;
background-repeat: no-repeat ;
}

.submenu li .menuitem, .popup li .menuitem
{
background-position: right center ;
background-image: url(./subarrow.gif) ;
background-repeat: no-repeat ;
}
.submenu, .popup
{
list-style-type: none ;
border-width: 2px ;
z-index: 10 ;
}

.menubar, .menuaction, .menuitem
{
text-decoration: none ; /* remove the underline for anchor */
padding: 4px ;
border-width: 1px ;
width: 100% ;
}

/* outset highlight on hover */
/* we use anchor to do the hover because IE
doesn't follow W3C rules to allow hover
on any component */
.menuaction:hover, .menuitem:hover
{
border-style: solid ;
}

.menubar, .submenu, .popup
{
background-color: lightgrey ;
}

/* submenus display under, popups display right */
.submenu, .popup
{
display:none ;
padding: 4 0 4 0 ;
border-style: outset ;

width: 100 ;
}

/* make popups overlap with their trigger */
.popup
{
left: 90 ;
margin: -3ex 0 0 0 ;
}

li:hover > .submenu
{
display:block ;
position: absolute ;
}

li:hover > .popup
{
display:block ;
position: absolute ;
}
</style>
</head>

<body>
<!-- the &nbsp; provides space for the menu arrow -->
<ul class="menubar">
<li><a href="#" class="menuitem">File&nbsp;</a>
<ul class="submenu" >
<li><a class="menuaction" href="#">item 1</a></li>
<li><a class="menuaction" href="#">item 2</a></li>
</ul>
</li>
<li><a href="#" class="menuaction">Test</a></li>
<li>
<a href="#" class="menuitem">Help&nbsp;</a>
<ul class="submenu" >
<li><a class="menuaction" href="#">About this</a></li>
<li><a class="menuitem" href="#">Contents&nbsp;</a>
<ul class='popup'>
<li><a class="menuaction" href="#">item 1</a></li>
<li><a class="menuaction" href="#">item 2</a></li>
<li>
<a class='menuitem' href="#">item 3&nbsp;</a>
<ul class="popup" >
<li><a class="menuaction" href="#">item 1</a></li>
<li><a class="menuaction" href="#">item 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a class='menuaction' href="#">item 3</a></li>
</ul>
</li>
</ul>
</body>
</html>
wac
10-12-2005, 10:11 PM
ok, almost there. I don't want all the LI to be inline, only the top level LI
(immediate decendants of .menubar), so that's why I was using .menubar > li
I thought the '>' selector meant immediate child, not first child.
However, this puts me on the right track. Thanks for pointing the way...
chump2877
10-12-2005, 10:32 PM
just get rid of the '>'....IE doesn;t recognize that syntax...fot the first-level li child of .menubar:

.menubar li
{
style here;
}

for the second-level li child of .menubar:

.menubar li li
{
style here;
}

and so on and so forth