CSS Troubles in IE8

Discussion in 'Web Design and Development' started by MackedOut, Jan 7, 2011.

  1. MackedOut macrumors newbie

    Joined:
    Nov 17, 2006
    Location:
    Colorado
    #1
    Hello all, I'm developing on a Mac and using NetRenderer to view my sites in IE. I'm having two troubles I'm hoping someone can assist with.

    http://polosprings.marionzachary.com/ask-a-doctor/

    1. In IE8 only, the masthead image of the vet and dog appears underneath the navbar, but to the RIGHT of it as well, and it should fall directly underneath the navbar. The page displays properly in all browers I've tested, included IE6 and IE7, but not IE8. What am I missing?

    2. The Navbar does not stretch completely across the top and line up with the image below it in ANY browser. And the space that it falls short of lining up is different in every single browser. Some browsers show maybe 2 pixels short, others show as much as 20 or more pixels short. I need it to line up on both sides with the image below it and just have each "cell" adjust as needed.

    Any help would be appreciated. I've been monkeying with this for so long I can't figure out what I need to do.

    Thank you so much for your time!
     
  2. Darth.Titan macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #2
    • Your WordPress theme's header.php file is outputting a blank line as the first line in the HTML. That could cause problems.
    • You shouldn't enclose a div in an anchor tag. (div#top). It's not valid XHTML.
    • Your horizontal rule cannot be inside a paragraph. That is also invalid XHTML. Remove the <p></p> around it.
    • Your horizontal rule tag isn't closed. (should be <hr />)
    • Your theme isn't closing your #container div. (Most likely your biggest problem)
    I'm not sure if correcting these will solve all your problems, but valid code is always the first step in solving cross-browser compatibility issues.
     
  3. MackedOut thread starter macrumors newbie

    Joined:
    Nov 17, 2006
    Location:
    Colorado
    #3
    Thank you for your reply! I made sure to especially get that missing DIV tag in there, but there has been no change in how it renders in IE8. Still getting the header image to the right of the navbar in IE8 and the navbar does not stretch all the way across.

    Thanks though!
     
  4. YanniDepp macrumors 6502

    YanniDepp

    Joined:
    Dec 10, 2008
    #4
    The blank line at the top of your file is most likely to be a problem.

    The first thing in a document should be the DOCTYPE. If you don't have a doctype right at the very beginning, IE assumes that the document confirms to the old, broken non-standard way IE 4 laid out documents (called "Quirks Mode") and deliberately lays them out using this broken standard.
     
  5. MackedOut thread starter macrumors newbie

    Joined:
    Nov 17, 2006
    Location:
    Colorado
    #5
    Thank you for your help. Can you please tell me how to fix the blank line? In my header.php I see the following on the first line:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    I do not see a blank line. What am I missing? Thank you for your help.
     
  6. manueld macrumors 6502

    Joined:
    Jun 8, 2009
    #6
    Remove the float from your navbar and that should fix the issue.
     
  7. MackedOut thread starter macrumors newbie

    Joined:
    Nov 17, 2006
    Location:
    Colorado
    #7
    Thank you Manueld, I tried that just now and according to Net Renderer, it still was happening...the masthead graphic is still popping over to the right, side-by-side with the navigation bar......
     
  8. manueld macrumors 6502

    Joined:
    Jun 8, 2009
    #8
    well i was sorta right..there is a float issue going on. Add a clear: left; on that image and that will resolve the issue.
     
  9. MackedOut thread starter macrumors newbie

    Joined:
    Nov 17, 2006
    Location:
    Colorado
    #9
    Manueld, you ROCK! That fixed it, according to IE Net Renderer, anyway! Thank you so much! That was driving me crazy! I owe ya! Thanks!
     

Share This Page