SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Coding for consistency across browsers

    Hi Everyone:

    Please help me out if you can.

    Like most novices, I'm having a hard time getting my site to render correctly across the most commonly used browsers.

    I am running my site on Wordpress and have modified an existing theme.

    I have run W3C's CSS and XHTML validators to correct most problems. There were still a couple issues that the validator pointed out, but I didn't know how to correct.

    Right now, my biggest issues is with Internet Explorer. I know that IE does not meet most standards that modern browsers do, but at the same time the majority of the viewers of my site use IE.

    Firstly, my site is supposed to look like it does in Firefox:


    This is how it looks in IE:


    The 3 big issues w/ IE

    1. The logo at the top right is not spaced correctly on the vertical plane. It should be lower than where it is and the gap between it and the menu bar should be smaller.

    2. The menu bar itself is stretched. It appears to be shifted to the right instead of parallel with the body content. In addition, there is part of the bar missing to the left of the first button "Home."

    3. The Lifestream box on the right has 2 extra scroll bars, a horizontal and a vertical one, which do not belong there.

    Please help.

    Thank you.

  2. #2
    SitePoint Zealot
    Join Date
    Feb 2009
    Location
    Baton Rouge, LA
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    remove
    #lefta {
    float:left;
    width:10px;
    }
    from stylesheet,

    then remove
    top:80px from #top

    then remove or adjust
    margin-top: 100px from #righta
    and
    margin-top:100px from .ppost background-image

    replace #nav with the following:
    #nav
    {
    background-image: url(images/nav.png); POSITION: relative;
    list-style-type: none;
    margin-top: 30px;
    width: 797px;
    background-repeat: no-repeat;
    height: 45px;
    left: 0px;
    margin-left:0;
    padding-left:10px;

    }

    change overflow on #righta to overflow:hidden (to get rid of the scrollbars around twitter).
    "The browser is your first client" - Quote: Myself
    Please visit me at: vanillacloud.com

  3. #3
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did it! I truly appreciate your help.


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
  •