Cross browser problems

HTML & CSS
1

Hi,

can someone help steer me into the right direction in regards to glitches I am having in internet explorer, firefox etc…
Here is the link - http://bit.ly/vsrl44

  1. in firefox the green background top should line up to the white background. It should stop right where the buttons end. in chrome and safari it works but not in firefox and Internet Explorer.
  2. my input boxes at the top above the instant access button, all look different on the different browsers, the size, width and height are different. Is there a way to fix that?
  3. In internet explorer 9 my TALK LIVE ON SKYPE image is up to high and goes into the menu. Not sure how to fix this, it’s ok on all the other browsers.
  4. Also in IE 9 they are saying my drop down menu is glitchy. The drop down happens over the second button (y jill’s programs)

I think that is it for now.

2

  1. I couldn’t see for looking - can you point me ot the element name in question?

  2. Add line-height:normal to the input rule and they will shrink in chrome to match Firefox (near enough - they are never going to be exact cross browser anyway)

3

Thank you for your reply.

  1. in the header (this is probably not the best way to do it) I have this code
<body style='background-color:#e9e8b0; margin: 0px; height: 100%;'>
<div style='position: fixed; top: 0; left: 0; width: 400%; height: 350px; background-color:#8ea002; z-index:-1;'></div>
4

Hi,

1)You may have to give me a screenshot as I still can’t see any differencs between chrome and firefox.

3 & 4) IE9 is fine but IE7 is misplaced. They must have pressed compatability mode by mistake.

To fix IE7 add this:


#menu-topnav {position:relative}
#menu-topnav li ul{top:40px;}
#green-bar-divider{overflow:hidden}
*+html #main{padding-top:25px}
5

thank you, will go try your solutions. Here is a screenshot of 1) the green background should come down to where the black line is. http://bit.ly/xHcGPN it works in chrome and safari.

EDIT to add

Thank you so much. I think it worked. I checked it on IE 9 on my laptop with windows 7 and it worked.

6

I don’t know if it’s related to your rendering issues, but the w3c validator throws up 24 errors for the url you posted in your 1st post. It also says your url is declared as a html5 document and so I assume you are aware that html5 is not finalised, and most probably won’t be for a few years yet, and so browser support for html5 varies greatly between browsers.

7

It’s not looking like that in my latest Firefox. What version are you using?

8

It’s not looking like that on FF8 on Linux, either. Everything lines up nicely.

9

I’m using firefox 3.6. Thank you for telling me about those errors Max Height(cute name), I’ll try to fix them and see if that helps. Thank you all for your help and for looking at it in your broswers. I think that html 5 thing was already set in wordpress 2011 theme. What should I change the doc type too? xhtml traditional?