Click to See Complete Forum and Search --> : Spry Menu bar & browser compatibility


james00bond00
07-08-2009, 12:49 AM
Hey guys,

grrr, i feel so frustrated. First of all, I am sorry for all these posts. I have a site that i added a spry menu bar to. I had the worst problems making it compatible with safari, but have solved that by placing it in an ap div tag so the menu bar items can extend past the div tags and show (would not do this in safari with a regular div). Now when i preview the spry menu bar in all 3 browsers (firefox, safari, and IE) it works... relatively speaking... but IE adds some wierd extra border around each of the boxes that contain the menubar list items.

The spry comes with a css sheet which i set to have a 1px border around each menu item box. It looks great in the other two browsers, but IE seems to add some funky extra border to it and it looks like there is a 2px border around each box instead.

The even more stranger thing is, when i preview the site from Dreamweaver cs4 in IE, the extra borders are not there, but when i upload the site to my server and preview it from IE, the borders are there! Its sooo wierd and makes me want to cry. I've spent hours and almost a full day trying to get this thing to work on all browsers. I have no idea why these strange things are happening.

Anyone come across something like this before? Any help as to why the extra border?

HELP!!!!!!!!! Please...

james00bond00
07-08-2009, 12:25 PM
Ok Guys... i found out why the extra border... my css rule had thin for the line style... aparently thin is a different measurement in IE than Firefox. I just need to make it an absolute value like 1px.

Still having trouble though getting my ap div layer to match the appropriate spot... Firefox adn safari position it exactly, but IE again positions it one pixel higher than it should be.

Anyone know why?

6StringGeek
07-08-2009, 02:04 PM
Did you zero out your margins in your css:

* {
margin:0;
padding:0;
}

james00bond00
07-08-2009, 02:20 PM
yes i made sure of that. But still IE positions the ap div tag 1 px higher than where it is supposed to be... and if i add one pix to the position, then it is one pix lower in firefox or safari, but great in IE.