#divs aligning correctly in Chrome, Firefox, Safari - Not aligning in IE. Little help?

Dracata · 7 Oct 2010 at 17:29

Bonsoir.

I'm whipping together a simple website for my sisters new "jewellery" hobby:

http://www.frizzlejewellery.co.uk

Nice and simple. I've set the background to resize to the browser size/be fixed. I've also set the margin for the header/main container to:

margin: 20px 40px 0px auto;

i.e. "float 40px from the right of the screen"

Work's perfectly in Chrome, FF, Safari. Not in IE (7, 8, 9). Any ideas? I can't change the alignment at all and it's hurting my brain.

Izi · 7 Oct 2010 at 17:40

Dracata said:
Bonsoir.

I'm whipping together a simple website for my sisters new "jewellery" hobby:

http://www.frizzlejewellery.co.uk

Nice and simple. I've set the background to resize to the browser size/be fixed. I've also set the margin for the header/main container to:

margin: 20px 40px 0px auto;

i.e. "float 40px from the right of the screen"

Work's perfectly in Chrome, FF, Safari. Not in IE (7, 8, 9). Any ideas? I can't change the alignment at all and it's hurting my brain.

try <img src="images/bg_flower.jpg" class="bg" alt=""/> float this left.

3dcandy · 7 Oct 2010 at 18:12

I hope you're going to float the wordpress blog right too (twentyten child theme methinks)

3dcandy · 7 Oct 2010 at 18:13

in fact, why aren't you using wordpress for the whole thing?

Dracata · 8 Oct 2010 at 10:06

3dcandy said:
I hope you're going to float the wordpress blog right too (twentyten child theme methinks)

Yes, I haven't really started theming it yet.

3dcandy; said:
in fact, why aren't you using wordpress for the whole thing?

There's little point - all I need is the first x posts (probably 3-5) which I can include with the loop.

Dracata · 8 Oct 2010 at 10:07

Izi said:
try <img src="images/bg_flower.jpg" class="bg" alt=""/> float this left.

What would this accomplish? The bg image shouldn't affect the DIVs at all - it's fixed position with a lower z-index.

The img container isn't a "parent" to the divs.

Izi · 8 Oct 2010 at 17:58

also if its a background, why haven't you set it as a background image on the <body> with no repeat?

Dracata · 8 Oct 2010 at 20:02

Izi said:
also if its a background, why haven't you set it as a background image on the <body> with no repeat?

Because i'm using a CSS workaround that will dynamically scale the background depending on the persons screen size/aspect ratio

3dcandy · 9 Oct 2010 at 00:54

Dracata said:
Yes, I haven't really started theming it yet.

There's little point - all I need is the first x posts (probably 3-5) which I can include with the loop.

sure you can, it's just a thought mate.

Izi · 9 Oct 2010 at 15:46

did you even try floating the image left?

Dracata · 12 Oct 2010 at 15:16

3dcandy said:
sure you can, it's just a thought mate.

I know, didn't mean for my reply to be terse

Dracata · 12 Oct 2010 at 15:18

Izi said:
did you even try floating the image left?

I did for poops and gigs, but it wouldn't make any difference. The background image was full screen (there was quite a ton of white space). I think you were missing what I was trying to do.

I was using the CSS method so that it kept the aspect ratio and dynamically resized as per your window size. Floating shouldn't/wouldn't/didn't make a difference.

For now, I have reverted back to neanderthal times

I.e. simple background image

Izi · 12 Oct 2010 at 20:25

i'd like to give it a shot if you send me the css/html i will try.

roger that · 13 Oct 2010 at 22:57

I think it's how Exploder handles auto setting.

Here's my suggestion for a fix:

in the html file replace the body tag with

Code:

<!--[if IE]><body class="ie"> <![endif]-->
<!--[if !(IE)]><!--> <body> <!--<![endif]-->

and in your style sheet after the #container block insert

Code:

.ie #header {
  position:absolute;
  top:0;
  right: 0;
}
.ie #container {
  position:absolute;
  top: 124px;
  right: 0;
}

All we are doing is using positioning if any flavour of ie hits the page.