1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

FF is fine....IE is horrid....

Discussion in 'Web Design & Development' started by powell1294, Apr 17, 2010.

Thread Status:
Not open for further replies.
  1. powell1294

    powell1294 Guest Thread Starter

    Joined:
    Nov 11, 2007
    Messages:
    10
    Hello all, it's obvious that I am not a professional web developer....but the website looks fine in FF and goes to heck in a handbag in IE....the container shifts WAY over to the right.
    www.thebuttercupbowtique.com

    Any advice would be GREATLY appreciated....if I don't fix this soon, I may not have any hair left on my head, lol.

    Thanks in advance.
    Michelle
     
  2. Ent

    Ent Trusted Advisor

    Joined:
    Apr 11, 2009
    Messages:
    5,467
    First Name:
    Josiah
    I believe that it has to do with the Releative positioning, and technically I think IE is displaying the code its given correctly. Basically FF puts it relative to the far left, whereas IE puts it relative to its normal position at the right of the navigation menu. Until one browser decides it's rediculous and gives way, you can use IE conditional tags to realign for IE. That is put the following AFTER the second style section in your code:

    <!--[if IE]>
    <style type="text/css">
    CSS that shifts the frame left for IE
    </style>

    <![endif]-->
     
  3. tomdkat

    tomdkat Retired Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,148
    Which version of IE are you testing in? I viewed your page in Firefox 3.5.8 and Opera 10.10 on Linux and IE6 on Windows 2000 and both render the same way, with th content DIV on the right side of the page displaying as you describe it does in IE (wayyyyy over to the right).

    I don't think conditional CSS is needed for IE but rather fixing the CSS you have now.

    Instead of applying a "float: right" to the #container DIV, try applying a "float: left" instead:
    Code:
    #container {
    [b][color=red]  float: left; [/color][/b]
      position: relative;
    
    Then, adjust the left margin of the #container DIV to add space between it and the #leftside DIV as desired:
    Code:
    #container {
    [b][color=red]  float: left; [/color][/b]
      position: relative;
      margin-top: 8px;
      margin-bottom: 10px;
      _margin-bottom: 15px;
    [b][color=red]  margin-left: 45px;[/color][/b]
      _margin-left: -630px;
      margin-right: 7px;
      width: 590px;
    
    Then, adjust the IE-targetted margins as necessary.

    I'm running at 1280x1024 screen resolution when viewing your page in Firefox and Opera on Linux and at 1024x768 when viewing in IE6.

    Hope that helps!

    Peace...
     
As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/917444

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice