IE is reversing order...

jadamus
avatar
rank newbie

newbie


Posts: 2
Joined: 2008-10-10

Posted: Fri, 2008-10-10 23:36

Hey all...I'm a true rookie with the spry menu bar. After two weeks of learning the basics I have a test page with the spry menu horizontal bar at http://www.jmusicphoto.com/index_r.php. The menu is working correct in Firefox, Chrome, and Safari. When opened in IE the bars order is reversed. I'm at a total loss as to what could possibly make this happen. Any advice would be greatly appreciated. Puzzled

DanA
DanA's picture
rank Elder

Elder


Posts: 1093
Joined: 2004-08-14

First, validate your html

Posted: Sat, 2008-10-11 09:13

First, validate your html :
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.jmusicphoto.com%2Findex_r.php
Then validate your css :
http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.jmusicphoto.com%2Findex_r.php
If if doesn't fix the issue, valid code will help us to find a solution.

jadamus
jadamus's picture
rank newbie

newbie


Posts: 2
Joined: 2008-10-10

Thanks DanA

Posted: Sat, 2008-10-11 15:51

An "allnighter" has yielded a solution to the IE reverse order problem for me...

I found the problem to be in the SpryMenuBarHorizontal.css file with the float
alignment to the right...

/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 7em;
float: right;
}

...Once I changed to float:left...

/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 7em;
float: left;
}

...IE, FF, Chrome, and Safari all test out fine. All display correctly live as well. I still have to validate and will do that soon. Thanks... Thumbs up