...

View Full Version : CSS floating image looks good in Firefox, not IE.. HELP!



bofa
09-27-2006, 12:03 AM
I'm having some problems with the layout for a site I'm working on. The placeholder.jpg image is located in the correct location in Firefox, but when the site is viewed in IE, the image jumps to the bottom. Here's the link.
http://www.asammons.net/telaeris/

Any help would be awesome.
Thanks!

Arbitrator
09-27-2006, 05:12 AM
For one, read http://hsivonen.iki.fi/doctype/; in particular, note the table in the middle (of the linked resource).

bofa
09-28-2006, 06:09 AM
Thanks. I took a look at that, and changed the index page to what I believe the doctype should be. I'm still having the same problem. The image it being smushed to the bottom in IE, and looks great in firefox.

Any other ideas anyone?

bofa
09-29-2006, 02:43 AM
Here are the links to the pages/files that I need help with.

http://www.asammons.net/telaeris/index.html

http://www.asammons.net/telaeris/styles.css

The problem is with the "placeholder.jpg image in the <div> "side". For the life of me the css looks likes it's correct.

Any specific help would be great.

Arbitrator
09-30-2006, 06:44 AM
I looked through your code a bit and the problem is that the basic layout is poorly thought out. It should be something like:


CSS:
body {
width: 760px;
margin: 0 auto;
}
#header {
height: 136px;
}
#navigation {
height: 60px;
}
#mainContent, #sidePanel {
float: left;
}
#mainContent {
width: 400px;
}
#sidePanel {
width: 360px;
}
#footer {
clear: left;
}

(X)HTML:
<body>
<div id="header"></div>
<div id="navigation"></div>
<div id="mainContent"></div>
<div id="sidePanel"></div>
<div id="footer"></div>
</body>
Being that the contents of the #side element consist of only an image, you may want to utilize the original intent behind floats and float the image aside the paragraphs instead of using a separate #sidePanel element. Of course, if you intend to add other content to #sidePanel, then, of course, you may want to stick with the independent element.

Additionally, your HTML has some errors (http://validator.w3.org/check?verbose=1&uri=http://www.asammons.net/telaeris/) such as multiple opening html tags and incorrect XHTML syntax. Your CSS file is also invalid due to use of the underscore exploit; you may want to use conditional comments (http://www.quirksmode.org/css/condcom.html) to serve Internet Explorer-specific code instead.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum