PDA

View Full Version : right float not working in IE7


hectoroni
02-19-2009, 06:37 AM
Hi all. I'm new to css and spry and have searched a number of forums without getting an answer I can understand. If this has been answered before, I apologize. My spry menu bar is set to float right. It works in every browser but IE7; it was working in IE6. It floats left and the text overlaps the containers. Here is my site:
www.hectorjaime.com/index

The only thing I thought might be causing the problem is that I've set the main div containing the menu bar to float: none. But, I've changed this to "right" and it still doesn't work. Any suggestions?

Thank you,
Hector

edbr
02-19-2009, 06:46 AM
post the code for your div and the spry css

hectoroni
02-19-2009, 06:49 AM
sorry:
http://hectorjaime.com/

hectoroni
02-19-2009, 07:19 AM
div code:
<div class="hjmenubar" id="hjmenubar">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="contact.html">contact</a></li>
<li><a href="about.html">about</a></li>
<li><a href="index.html">portfolio</a></li>
</ul>

spry code:
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 10pt;
cursor: default;
width: auto;
height: 30px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
text-align: center;
vertical-align: middle;
letter-spacing: normal;
word-spacing: normal;
float: none;
}
ul.MenuBarActive
{
z-index: 1000;
}
ul.MenuBarHorizontal li
{
list-style-type: none;
font-size: small;
text-align: center;
cursor: pointer;
width: 70px;
float: right;
font-family: Arial, Helvetica, sans-serif;
padding: 0;
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
margin-left: 0;
}ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 8.2em;
}
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}ul.MenuBarHorizontal ul
{
border: 0;
}ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #f02c3f;
padding: 0.5em 0.75em;
color: #FFFFFF;
text-decoration: none;
border-left-width: thin;
border-left-color: #FFFFFF;
border-left-style: solid;
border-bottom-width: thin;
border-bottom-color: #FFFFFF;
border-bottom-style: solid;
border-right-width: thin;
border-right-color: #FFFFFF;
border-right-style: solid;
}ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
color: #FFF;
border-right-width: thin;
border-right-style: solid;
border-right-color: #FFFFFF;
text-decoration: underline;
}ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #f25f6d;
color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

edbr
02-19-2009, 07:40 AM
try , where you have
.hjmenubar {
font-family: Arial, Helvetica, sans-serif;
background-image: none;
width: 710px;
height: 32px;
}
add
[CODE]position:relative;
float:right;CODE]
then try floating your spry right also.

hectoroni
02-19-2009, 08:30 AM
Thank you! That worked. Except that the item order (Contact, about, portfolio) is different than in Firefox and Safari (which go Portfolio, About, Contact). The IE order makes sense since that's the order in which they appear in my code. More to figure out tomorrow. Thanks again for the quick response.