I need help : IE is hating on my floats

[mnkeybsness]

Alright I wanted to do this all on my own, but since I don't have a windows box to test on, it is really hard to do. I'm redesigning my site. The new style renders beautifully in Safari, Mozilla, Camino, and Firefox. Internet Explorer Mac, Internet Explorer Windows, and Opera make my site look like a bag of crap.

Here is the design for the new site. View it in one of the above browsers that displays it correctly first, then use Internet Explorer. You will notice that Internet Explorer just decides to push all of the content down below the links on the left.

I believe the problem is with everything on my site pretty much contained within 2 floats. One is the left float for the menu tabs and the news section and the other is for the rest of the content. Does IE just not render floats at all? Or is the problem somewhere with the way that I have written the code?

Thanks Everyone,
paularms

 

[Rower_CPU]

It might be IE miscalculating box sizes, as it has a habit of doing. Have you tried and of the IE box-model hacks (e.g. Tantek's voice-family hack) to see if that's the case?

If it is, and you want to avoid hacks, you'll need to do some restructuring of paddings and margins to make it work.

 

[mnkeybsness]

Ok I found the problem... I think...

IE doesn't want to shift the position of floats. The whole left side menu and news is in one large float that has the following...

#menu {
	float: left;
	position: relative;
	left: -75px;
	top: -16px;
	width: 75px;
	font-family: LucidaGrande, Lucida, Helvetica, Arial, sans-serif;
	}

I believe that the problem is there in the position, left, and top, because I notice that it does not offset either left or up. Any help is greatly appreciated.

I'm always willing to try an alternate way of doing this entirely.

 

[mnkeybsness]

Okay, so I gave in and now I am not going to use relatively positioned floats, as it is pretty unconventional.

Instead, I'm using a lot of absolute positioning... but there is still a bit of a problem...

The test html file looks great in every browser on my Mac, IE included. But when I place it on my server, the page looks like crap (link).

I am so confused as to what is going on. Any help, corrections, comments are very welcome and appreciated.

 

[mnkeybsness]

Okay I figured this out...
(aside: I feel like I am talking my problems out to myself right now, but that's okay, because someone else might have a similar problem sometime)

The problem is not with anything I have written; it is with where the HTML file is locating the stylesheet. If I put the stylesheet in a different directory and point the HTML file to it, everything works fine. Internet Explorer is just getting angry and not reading the file in its entirety if it is in the same directory. Pointing it to a different server works great to.

Solution: I put the stylesheet in a different directory and am just going to point the HTML to that instead.

Rant: I wish everyone who still uses Internet Explorer would have their computer taken away by the standards police. Then, I wish that the standards police would beat the computer with a baseball bat until the computer is nothing but 5 million tiny pieces strewn about the floor of its owner's house.

 

[mnkeybsness]

okay so now i'm having a problem that i've never had before...

a lot of the floats that are links just don't appear as links... in any browser. link all of the leftmost image links (all floats) do not allow clicks or anything. it's really weird. i've never seen this happen before...

could it be that I have breaks (<br />) after the image to put the text underneath the image? if so, what's the best way around that?

 

[mnkeybsness]

okay i'm an idiot and is specified my menu to be a lot wider than i needed... the overlap was making the links not work.

 

[Rower_CPU]

Glad you got it figured out.