My new site. IE float issues

[nikos101]

I'm making a new site which can be found here (http://ecommercetotal.co.uk/beta_web/)

It looks radically different in IE7 than firefox 2.
The page should be split into 4 nice divs but the main div "left" gets split up all over the place.

The problem is most likely to be with <div id="leftLongLogo">

Any advice

[abduraooft]

IMO, instead of floats try some absolute positioning inside a relative positioned container.

[sybil6]

i got "Server not found"

[vtjustinb]

I would agree with the positioning tip. If you know the exact dimensions of your pieces, especially when slicing, they're a lot more consistent and stable cross-browser. Floats really shine when you have a bunch of unknowns in the dimensions of your content divs.

And totally ribbing you, but I always find it funny when people need help with the website for their web design company. :D

[nikos101]

ok I'll have a bash at this and let you know

[nikos101]

OK I know the problem.

IE does not have the foggiest idea how to deal with floats in floats

I'm just gonna use absolute positioning in the left dive and give the left div a relative value to save me time.

[Apostropartheid]

Really? I've used floats within floats before, up to 2-3. I've never had a problem with it.

By the way, your <meta> tags shouldn't be self-closing--you're not using XHTML

[nikos101]

lol I did a find and replace in dreamweaver

<img

for

<img alt = ""

I got rid of 16 validation erros

[nikos101]

I've inserted a new main div called <div id="leftLongLogo"> with css#leftLongLogo {
bottom:33px;
left:34px;
position:absolute;
z-index:33;
}

this div is in a relative containing div called container (see css in firebug)

It contains a gif with the words "JESUS IS LORD"

In IE7 it appears correctly but in firefox the div is at the top of the screen.

Also Dreamweaver really messes this div up.

Any ideas?

[Actinia]

As far as I can see, you have given the leftLongLogo div both a top and a bottom attribute. Could you try just giving it one or the other. It looks as if FF is acting on the top and ignoring the bottom, with IE doing the converse.

John Rostron

[nikos101]

thx I changed it, but the problem is still there. I think it could be a bug with absolute positioning bottom css rule not working in a relative parent container.

the bottom tag just messes the whole thing up :(

the top tags work fine :(

[abduraooft]

Also Dreamweaver really messes this div up.

Any ideas?
Don't trust(use) DW's design view to judge your layout. It is not a browser.

[effpeetee]

Try this.

}
#leftLongLogo {
position:fixed;
right: 500px;
bottom: 200px;

Frank

[effpeetee]

Screen shot via cssvista.

Frank

[nikos101]

Thanks Frank but I don't want it to be fixed I want the logo to be positioned from the bottom of the page not to the viewport.

This is a really frustrating problem. I may have to but the logo inside the bottom main div and use relative positioning to move it where I want. However I don't like dong this because IE7 buts white space underneath the page.

[nikos101]

In fact I'm really sorry. I don't want to use absolute positing at all now because I don't wast the icon to move when the person resizes the screen.

[effpeetee]

http://www.positioniseverything.net/

Try this site and many others in my signature url "Sources".:thumbsup:

Frank

[nikos101]

OK i managed to fix it. Please see my site. What I done was put that problem div inside the bottom div and it seemed to work fine!