Small CSS problem - cross compatibility - PLEASE help

4 replies
  • WEB DESIGN
  • |
On a website I am designing, the page is showing slightly different in Chrome compared to IE and FireFox and was wanting a little support.

This is the website:
Magnetic Pill | Blog

In Chrome there is a bar at the top that I do not know where it is coming from (I am sure I can eventually figur it out). But the BIG Problem is in IE and FireFox, the main content is being pushed waaaay down, any ideas why this is happening?

p.s. I am adding a WP Blog to an old website, only the blog is in wordpress so I am skinning it to look like the rest of the website, that is why the blog page looks slightly different and its where I am having the problems.

Thank you so much for your time.
#compatibility #cross #css #problem #small
  • Profile picture of the author Harvey51
    You need to remove this in you css:

    style.css (line 16)
    vertical-align: baseline;


    You might also want to remove this rule:

    style.css (line 168)
    width: 1200px;

    You don't need it and it will effect visitors with small monitors or small resolution.
    {{ DiscussionBoard.errors[5905843].message }}
    • Profile picture of the author jleavitt13
      Originally Posted by Harvey51 View Post

      You need to remove this in you css:

      style.css (line 16)
      vertical-align: baseline;
      Thank you soooo much! So does Chrome just not use the baseline attribute?
      {{ DiscussionBoard.errors[5906755].message }}
  • Profile picture of the author shantanu
    It is just a browser war so that best browser could be used in this case, first of all u must declare IE compatibility code at above lines of template and for now upload ur website to the particular hosting and go to your website via google search it works perfectly for maximum times. Updation of your browser is needed too, use firefox (12 beta) it supports all attributes and templates.
    {{ DiscussionBoard.errors[5907153].message }}
  • Profile picture of the author SteveJohnson
    Before you can do any kind of meaningful css troubleshooting, you need to make sure that the code is error-free. There are so many HTML errors in the page code it's a wonder that it's rendering in any kind of coherent way at all.

    Run your code through HTML Tidy, or get the HTML validator plugin for Firefox or Chrome. Correct the errors, then re-evaluate your CSS.
    Signature

    The 2nd Amendment, 1789 - The Original Homeland Security.

    Gun control means never having to say, "I missed you."

    {{ DiscussionBoard.errors[5911544].message }}

Trending Topics