SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot naynay99's Avatar
    Join Date
    Jan 2010
    Location
    Los Angeles
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    cross browser problems...

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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. #3
    SitePoint Zealot naynay99's Avatar
    Join Date
    Jan 2010
    Location
    Los Angeles
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your reply.

    1) in the header (this is probably not the best way to do it) I have this code

    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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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:

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

  5. #5
    SitePoint Zealot naynay99's Avatar
    Join Date
    Jan 2010
    Location
    Los Angeles
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    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. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by naynay99 View Post
    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.
    It's not looking like that in my latest Firefox. What version are you using?

  8. #8
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,227
    Mentioned
    265 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It's not looking like that in my latest Firefox.
    It's not looking like that on FF8 on Linux, either. Everything lines up nicely.

  9. #9
    SitePoint Zealot naynay99's Avatar
    Join Date
    Jan 2010
    Location
    Los Angeles
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •