SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Mar 2004
    Location
    West Coast, USA
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question IE6 is screwing up <div> alignments

    Hi everyone!

    This is my first posting of a question here at the Site Point forums. I'm a bit nervous because I don't want to appear stupid, but I figure that I'm not going to learn anything if I don't stick my neck out once in a while. For those of you who are CSS gurus, I've got a puzzling IE bug for you.

    Many of you will probably be familiar with the Three Pixel Text-Jog bug in Internet Explorer. If not, you can read about it here: www.positioniseverything.net/explorer/threepxtest.html

    I've got a similar problem, but the difference is that IE is creating a seven pixel jog to the left in one div and is making another div seven pixels wider than wanted.

    The page in point comes directly from my newly-created blog. You can find it at www.pudgypuppy.com/testblog.htm. This blog uses Movable Type. When I installed MT, I used the standard Movable Type install. I am also using the default CSS file that was installed when I installed MT. I've changed only two basic things about the CSS file.

    Change #1: I consolidated the many different font characteristics that were originally specified for an individual element in a manner like this:
    Code:
    .banner{
      font-size: medium;
      font-weight:bold;
      font-family: palatino, arial, sans-serif;
      }
    into the more compact form of:
    Code:
    .banner{
        font: bold medium palatino, arial, sans-serif;
        }
    Change #2: I removed background colors on many of the items and changed the background colors on others.

    So, now that I'm done with the preliminary stuff, here are the two problems.

    PROBLEM #1
    The calendar located in the upper left corner of the page is seven pixels wider than any of the other <div>s in that column. It essentially "overshoots" the other <div>s by seven pixels on the right-hand side. I've given the column a grey background and have given the calendar and each of the other <div>s nested within the grey column a background color of pink. If you open the page www.pudgypuppy.com/testblog.htm in Internet Explorer, you can see what I'm talking about. It may not be completely apparent, so I've taken a screen shot of the page, zoomed in, and attached the resulting graphic to this message.
    How can I fix this problem so that the calendar is the exact same width as the rest of the <div>s? This problem only happens in IE. If I view the same page in Firefox, the calendar and all the other <div>s are the exact same width. (You can see this in the second graphic I've attached to this message.)

    PROBLEM #2
    The container that holds all of the blog text, called #content in the stylesheet, is shifted seven pixels to the left of where it should be. Again, this problem is only present in IE. In Firefox, it lines up perfectly to the right of the grey column. I thought I could fix this using the IE Three Pixel Jog bug fix, but after reading through the solution for that problem, it doesn't appear to work for <div>s, but rather, it works on text inside a <div>. My problem is not with the text, it's with the background color and the exact position of the <div>. I want it to lay immediately to the right of the grey-colored column.

    For ease, as mentioned earlier, I'm also attaching a picture of the correct layout, as taken from Firefox, immediately after the picture of the calendar "overshooting" the right hand side of each of the other <div>s.

    So if anyone out there has seen this behavior before and can give some insight, that would be absolutely wonderful. Note that none of the <div>s on this page are floated, so I don't think the problem is with floats.

    Also, I think this problem is specific to IE6. I've tried several hacks that are targeted at IE5.x, and none of them solved the problem, so my guess is that this issue only lies with IE6.

    I hope I've described this problem adequately. If you have any questions, please add a reply to this post. I'll be pleased as punch to be more descriptive.

    Thanks, everyone! I look forward to hearing your ideas, suggestions and (hopefully) solutions!
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    that's a long post for a short answer. Change your cellspacing to 3 as it is pushing the div wider than it should be.
    Code:
    <div id="links">
     <div align="center" class="calendar">
      <table border="0" cellspacing="3" cellpadding="0" summary="Monthly calendar with links to each day's posts">
    Ie will expand elements if they are too big but mozilla won't.

    The three pixel jogs only applies to floats and the content alongside so is not applicable in your case.

    Paul

  3. #3
    SitePoint Member
    Join Date
    Mar 2004
    Location
    West Coast, USA
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Holy Cellspacing Bat-man! That did the trick!!

    Boy, wouldn't you just know the problem wasn't with the CSS at all, but rather with a freakin' table?!? And to think I spent about 3.5 hours trying to figure out what was going on with the CSS!

    So, how did you figure this one out?

    Thank you very, very much. I certainly appreciate it!

    Kasey
    Quote Originally Posted by Paul O'B
    Hi,

    that's a long post for a short answer. Change your cellspacing to 3 as it is pushing the div wider than it should be.
    Code:
     <div id="links">
      <div align="center" class="calendar">
       <table border="0" cellspacing="3" cellpadding="0" summary="Monthly calendar with links to each day's posts">
    Ie will expand elements if they are too big but mozilla won't.

    The three pixel jogs only applies to floats and the content alongside so is not applicable in your case.

    Paul


Bookmarks

Posting Permissions

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