Web Analytics Made Easy -
StatCounter CSS floating image looks good in Firefox, not IE.. HELP! - CodingForum

Announcement

Collapse
No announcement yet.

CSS floating image looks good in Firefox, not IE.. HELP!

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS floating image looks good in Firefox, not IE.. HELP!

    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!

  • #2
    For one, read http://hsivonen.iki.fi/doctype/; in particular, note the table in the middle (of the linked resource).

    Comment


    • #3
      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?

      Comment


      • #4
        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.
        Last edited by bofa; Sep 29, 2006, 01:26 AM.

        Comment


        • #5
          I looked through your code a bit and the problem is that the basic layout is poorly thought out. It should be something like:

          Code:
          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 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 to serve Internet Explorer-specific code instead.
          Last edited by Arbitrator; Sep 30, 2006, 02:52 AM. Reason: additional information added

          Comment

          Working...
          X