Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 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
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    For one, read http://hsivonen.iki.fi/doctype/; in particular, note the table in the middle (of the linked resource).
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?

  • #4
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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; 09-29-2006 at 05:26 AM.

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    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; 09-30-2006 at 06:52 AM. Reason: additional information added
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •