Looks great in Firefox, terrible in IE.
Hey. I'm working on a site and so far it's going great. I've been testing it primarily with Firefox, but now that I'm getting toward the end of the layout, I see just how terrible it looks in IE.
This is the URL:
I know, it's my mistake for not thinking about IE from the beginning. But does anyone know of a way I could fix this without having to redo the entire thing?
Busy posted this at 21:04 — 25th October 2006.
He has: 6,151 posts
Joined: May 2001
There are a couple of issues in FF 1.5.0.2 as well (at 800x600), looking at them I'd say your div widths are to wide.
remember all browsers have different margins/paddings as default so all should be declared
Wes posted this at 22:34 — 25th October 2006.
They have: 3 posts
Joined: Oct 2006
I'll take a look at that, although it seems to work fine in the current version of Firefox. The major problem is the way in which Internet Explorer butchers it.
Abhishek Reddy posted this at 23:55 — 25th October 2006.
He has: 3,348 posts
Joined: Jul 2001
Actually, that's not bad. You'll find in the long run it's easier to design/code properly at first, and fix for IE later.
I'll also mention that your page looks messed up in Konqueror too, so you might want to start by validating. http://validator.w3.org/check?uri=http%3A%2F%2Ftragedienne.net%2Fsquip%2F
JeevesBond posted this at 13:24 — 26th October 2006.
He has: 3,956 posts
Joined: Jun 2002
As Abhi said, it's usually better to get things working in a standards compliant browser (Opera, Firefox, Safari, Konqueror etc) then put in hacks/fixes for IE. Generally IE's standards support is rubbish (although getting better in version 7).
It looks messed up in Opera 9 too. Just having a quick look at your code, you should probably add a CSS rule (if you haven't already, I only looked at the HTML):
.left img {display: block;
clear: both;
}
The images aren't being put onto new lines, that seems to be the problem. Let us know if that fixes it.
a Padded Cell our articles site!
Wes posted this at 00:59 — 30th October 2006.
They have: 3 posts
Joined: Oct 2006
I've been working on remaking it, and this is the newer version so far. It works a bit better in IE.
http://tragedienne.net/gaston/
frofi posted this at 14:20 — 30th October 2006.
They have: 37 posts
Joined: Jun 2006
I think you are using DIVs in the wrong way. In your stylesheet get rid of the
html, body, .wrap, .left, .right {height: 100%;
}
Then use position:relative; in your body but change it to
body, body*{...}'And then define proper DIV containers with position:absolute; and proper size and exact position. It looks something like this:
#topimg {position: absolute;
padding: 0px;
background-image: url(obr/topX.gif);
height: 93px;
width: 900px;
margin-left: 0px;
margin-top: 0px;
}
Also create a main DIV container i which you'll put everything else.:
example:
#main {position: relative;
padding: 0px;
margin: auto;
height: 590px;
width: 900px;
}
Raise And Share a Million.com - Rewarding to those who like to help others
cmjphp posted this at 17:07 — 3rd November 2006.
He has: 1 posts
Joined: Nov 2006
There is a major problem if you try to resize the fonts, the navbar up the top made entirely from images will not resize. This means that anyone who prefers/ needs bigger or smaller text will have problems with the navbar. Have you heard of the CSS Sliding Doors Technique? It looks like it could be used on your website...heres a link to the article on A List Apart. alistapart.com/articles/slidingdoors/
Visit My PHP Scripting Site
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.