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

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

powell1294

Thread Starter
Guest
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
 

Ent

Josiah
Trusted Advisor
Joined
Apr 11, 2009
Messages
5,467
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]-->
 

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...
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

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 807,865 other people just like you!

Latest posts

Top