FourMat
asked on
CSS and Cufon Menu Positioning
I'm working on a web site that utilizes Cufon in a menu structure, and I am having a few issues getting the positioning to display correctly across all browsers.
My demo page is here: http://www.irvansmith.com/
Specifically I am having an issue with the vertical centering in the menu buttons when viewed in IE8. It will look fine in IE9 and IE7. I have been able to get the centering to behave in other browsers by moving the cufon canvas down with this CSS:
Also, in all browsers, the drop down menu is spaced below the buttons when Cufon is active. I'm sure it has something to do with the canvas size, but I don't seem to be able to hit the right combination of CSS to get it to be just under the buttons.
Could someone look at the CSS and guide me through the changes needed to make things look correctly? Thanks.
My demo page is here: http://www.irvansmith.com/
Specifically I am having an issue with the vertical centering in the menu buttons when viewed in IE8. It will look fine in IE9 and IE7. I have been able to get the centering to behave in other browsers by moving the cufon canvas down with this CSS:
cufon canvas {top:6px!important;}Also, in all browsers, the drop down menu is spaced below the buttons when Cufon is active. I'm sure it has something to do with the canvas size, but I don't seem to be able to hit the right combination of CSS to get it to be just under the buttons.
Could someone look at the CSS and guide me through the changes needed to make things look correctly? Thanks.
ASKER
OK, I added reset.css and it didn't seem to change anything, but regardless, I like the philosophy of what it does for future development, and will be keeping it. Thanks.
Where do we go from here?
Where do we go from here?
Check this in the cufon wiki:
https://github.com/sorccu/cufon/wiki/styling
It says you must use either the HTML5 Doctype or a strict doctype for line-height to work.
https://github.com/sorccu/cufon/wiki/styling
It says you must use either the HTML5 Doctype or a strict doctype for line-height to work.
ASKER
I have changed the doctype around and depending on the doctype, it's either wrong in IE8, or it's wrong in every other browsers.
LZ1 it does not appear to be a line height issue as far as I can tell.
What is the difference in how IE8 renders the canvas position vs all of the other IE versions? I have not been able to build anything in to move it around. Is it that the position of the container that the menu text is in is not set with a "position" statement or that it's inside an <ul><li> menu structure?
LZ1 it does not appear to be a line height issue as far as I can tell.
What is the difference in how IE8 renders the canvas position vs all of the other IE versions? I have not been able to build anything in to move it around. Is it that the position of the container that the menu text is in is not set with a "position" statement or that it's inside an <ul><li> menu structure?
ASKER CERTIFIED SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
ASKER
Kravimir - That's great. I missed that is changed to VML in IE. I changed the CSS per your recommendation and it worked fine.
http://meyerweb.com/eric/tools/css/reset/