CSS problem. Ok in Firefox, but not in Internet Explorer

Discussion in 'CSS' started by Pryda, Jan 30, 2008.

  1. #1
    The main page of my site is not displayed correctly in IE. It works in FF though. Can anyone tell me why it is looking so "wide" in IE and how I can fix it?

    This is the URL: http://www.babepedia.com/

    Note: The site is about beautiful women and could display some nudity. It is not considered SFW.
     
    Pryda, Jan 30, 2008 IP
  2. BrandMan211

    BrandMan211 Peon

    Messages:
    60
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    That's IE for you. Everything comes out bad in it. Anyways, although I don't know how to fix it, I have a great tool to help you out with it.

    addons.mozilla.org/en-US/firefox/addon/1419

    Good luck!
     
    BrandMan211, Jan 30, 2008 IP
    epic1231 likes this.
  3. GSto

    GSto Peon

    Messages:
    218
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Can you post the CSS code you used for the height and width of your divs? It's hard to say what the problem is without that.
     
    GSto, Jan 30, 2008 IP
  4. Pryda

    Pryda Peon

    Messages:
    506
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thanks for the suggestion, BrandMan, but I'm already using that add-on. Unfortunately, FireBug doesn't work in it :(

    I'll post my CSS code later today.
     
    Pryda, Jan 31, 2008 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    You've got lots of problems in your code, and without a doctype you can't easily catch them.

    Doing a quick Aardvark over the page in FF showed that the browser assumes all the Babesphotos are inside an unclosed <h2> tag because you have <h2>Random @ Babepedia<h2> and so there are really two unclosed <h2>s as far as the browsers are concered.

    Also, in CSS there are things like letter-spacing: .none;} and background-color:None; which are not allowed. We all make these sorts of mistakes in our code but we run it through the validator to catch them. So, first get a doctype and then run your code through the validator. Fix what it finds, and then if the problem is still there (or if another pops up in its place), it's much easier for us to pin down the real source of the problem.
     
    Stomme poes, Jan 31, 2008 IP
  6. Pryda

    Pryda Peon

    Messages:
    506
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Pryda, Feb 3, 2008 IP
  7. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Well, it looks like there's div class="blog" and a td with the babes. Neither one seems to have a width set-- are you having the right "links" sidebar hold the images off to make them wrap?

    I still don't know a whole lot about tables, but there's always crap with IE6 letting contents expand-- and tables have their own rules about when to expand for their content.

    If this were my site, I'd axe the tables, and for the random babes images, I'd have them sitting in some box (where you have the td now) with a set width (or, if you need this to be flexible, you'd set no width but have side margins to acommodate the sidebars, which would be floated to each side and each have a set width) and then float each babe img left with the same 5px padding you currently have around each one. The floats will jostle around as the screen is shrunken/enlarged, and not even IE6 will let them slide under the right float because their container has either the set width OR the set right margin. Either will keep them in the middle.

    Maybe you could set a definite right margin on the .blog div, since the babes seem to be ultimately inside that one (nested in), which should keep IE6 from letting them slide under the right sidebar for the current situation. Since the right "links" sidebar is positioned absolutely, no wonder IE lets the rest of the page ignore it. That's the way position: absolute works-- it ignores the page and the page ignores it. Something else is keeping the babes away from the links sidebar in Firefox-- I didn't look real close cause tables and mulitple CSS sheets drive me batty.

    I'd do the traditional 3-column css setup with the side margins to keep the babes in.
     
    Stomme poes, Feb 4, 2008 IP
    Pryda likes this.