View Full Version : Table-less page: Good in FF2, Bad in IE7

09-27-2007, 05:00 AM
I am desperately trying to get this page (http://www.napathon.net/SNAP/index.html) to render properly in IE7. In FF2, it displays exactly as I would like for it to. In IE7, my left column displays below and to the left of the right content, but I want it to display at the top of that column. What am I doing wrong, and how can I fix it?

For easy reference, here (http://www.napathon.net/SNAP/styles.css) is the stylesheet that goes with the page. Many thanks in advance for your help!

09-27-2007, 05:16 AM
editing to delete previous post... Sorry it's late and I was not on teh right track

Ok, back to the real question at hand, instead of answering the one I wanted to. Doesn't column1 need to be postioned somehow, maybe absolute?? to me it looks as if it is being placed in the type flow, and it needs to be outside that? But I'ma newbie at all this so let me know if I am off base...

09-27-2007, 05:29 AM
Put width:68.6%; for your #content ;)
Actually 70% is the right value, but the left and right padding want some width, unlike in your header (#line1?)

09-27-2007, 05:48 AM
Doesn't column1 need to be postioned somehow, maybe absolute??
I tried your suggestion of adding absolute positioning, but then that screwed up the rendering in both FF and IE. Must be something else I need.

09-27-2007, 01:20 PM
Hey VJ,

I'm on a Mac so testing is tough but at a quick glance I'd say add these two rules to #column1:

float: left;
display: inline;

float: left makes sure that column will always be out of flow and floated to the left regardless of what #col2 wants to do, and display:inline is a hack that clears an extra margin from IE6 when you place two floated elements together. If you go this route, don't forget to clear the floats after the columns.

If that doesn't work I'll see if I can take look on IE7 later today when I have more time.

Whoops, just noticed #column1 falls after #column2 in the HTML. So what I said above probably won't work.

09-27-2007, 01:40 PM
#column1 {
background-color: #ad78c7;
width: 20%;
margin-left: 15px;
margin-bottom: 20px;
margin-right: 0%;
padding: 20px 10px 10px 10px;
border: solid black 1px;
color: white;
font-weight: bold;

Try this. I think that will put it right.


09-28-2007, 02:23 AM
@rmedek: Thanks for the suggestion, but it didn't work. Messed up both FF and IE. I tried a variation which was display: block but no joy. Thanks for trying. :)

@effpeetee: You win the prize! :thumbsup: I don't know why this works, but the page now displays great in both FF and IE. Thanks!

And thanks to all who looked at my code and offered suggestions. It is much appreciated. One of the things that makes this forum so great.

09-28-2007, 02:26 AM
And we all learned something in the process!!!

09-28-2007, 08:43 AM
Thank you vinyl-junkie. I wish that I could claim some superior coding skills, but if I did I would be lying. It was my old technique of suck it and see.

I used a program called CSSVista which is like Firebug, but works also with IE.
It presents you with both views at once (Ffox and IE) and also the css on the left. Altering the code produces an immediate response so that even twit like me can have a go.

I did reason a little however. It occured to me that One browser might be seeing the box as larger than the other, so, having located the box by the simple method of adding to the size until it showed itself, I then removed the Right hand margin. Just lucky. Glad it worked.