SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Iceland
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE 6 layout problems (text-align issues)

    Here's my site: http://itami.ath.cx

    I've been designing it, using Firefox to test it. My CSS knowledge is really limited and because of that, my CSS code is really simple. That's why I thought I wouldn't have any problems with IE vs FF.

    Well, I was wrong... If you'd take a look at the site in IE, you can see that all the text is centered on the page, except for the footer. Now take a look with Firefox. Everything's as it should be... How come?

    What can I do to fix this?

    I already added a 'text-align: left;' to the main content table... but the text is still centered in IE.

    Here's my stylesheet, I'd really appreciate if you could take some time and look at it for me: http://itami.ath.cx/data/stylesheets/main.css

    Another problem I'm having with IE is that at the bottom of the rants on the front page, to the left of the comments link is a table cell, who's border options aren't visible. Do you know why that is?

    They're set to
    Code:
    td.commentlinkfill {
          border-bottom: 1px solid #2C702C;
          border-left: 1px solid #2C702C;
    }
    And, again, it displays correcty in Firefox.

    This is the first I use CSS for something, so don't be surprised if the problem is something really simple, I just can't seem to find it for the life of me.

    Thanks, if you actually read this far.

  2. #2
    SitePoint Member
    Join Date
    Nov 2004
    Location
    Melbourne
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to specify:

    text-align:left;

    IE6 has a bug where it may center text in any div or class that does not specify left alignment. Apparently this effect is random.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Iceland
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So, I need to specify, 'text-align: left;' EVERYWHERE? Well, where there's text, I mean.

    Any idea about the borderless table cell:
    Code:
    <td class="commentlinkfill" width="639" height="16">
    </td>
    Code:
    td.commentlinkfill {
    	border-bottom: 1px solid #2C702C;
    	border-left: 1px solid #2C702C;
    }
    And thanks.

  4. #4
    SitePoint Member
    Join Date
    Nov 2004
    Location
    Melbourne
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just specify in the areas that will include text i.e.

    table.ranttable {
    border-right: 1px solid #2C702C;
    border-left: 1px solid #2C702C;
    text-align: left;
    }

    In regards to your border, I'm not quite sure what is happening. Try using a good html/css editor like topstyle to alter your code, validate and preview in multiple browsers. This is how overcome most of my CSS issues.

    Sorry I can't be of more help.

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Iceland
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry I can't be of more help.
    Don't be, it was plenty. Thanks.

    I found out that the border issues in IE were because the cells were empty. Adding a &nbsp; did the trick.


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
  •