Text Alignment Issues in IE

Discussion in 'HTML & Website Design' started by advancedfuture, Mar 11, 2007.

  1. #1
    OK so I spent alot of time on this and am about ready to give up. I cannot find the reason this is not working.

    Check this out in Firefox first.... then look at it in IE..

    http://www.yourpcbytes.com/test/test.html

    ######################

    Notice in Firefox the images and text will align center.... And that the text stays on 1 line.

    Now in IE the alignment will not change no matter what you specify.. center or right.... it always stays left adjusted. Also.. the text keeps grouping into 2 lines when there is plenty of space!

    ######################

    If anyone know whats wrong let me know, it is very frustrating.
     
    advancedfuture, Mar 11, 2007 IP
  2. bacanze

    bacanze Peon

    Messages:
    2,419
    Likes Received:
    127
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hi

    First you have not included a DTD, which its probably making IE go into 'quirk' mode, add this at the very top of your html document

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    HTML:
    Regarding the issue with the alignment, there are 101 ways to solve this problem, however the easiest would be to apply a class to each image which gives them all a left padding

    .img {padding-left:11px;}
    HTML:
    for more info on DTD, read a post I made a few days back

    http://csschat.com/showthread.php?t=20

    Ash
     
    bacanze, Mar 11, 2007 IP
    advancedfuture and Clive like this.
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #3
    Consider what you've told the browsers.

    First, you said the cells should have a width of 160px. Then you put a 300px width image into that 160px cell. The cells in that columns expand as they should, but IE is apparently drawing the text before the expansion, fitting the text into the original 160px. IE is not necessarily wrong, it's just not what you expected.[1]

    If you want to use a 300px image, then either declare the tds to be 300px wide or don't say anything at all.

    And, yes! You definitely need a DTD so IE acts somewhat sane. I feel there is no sane reason to use a transitional DTD on a new document—you're not transitioning from anything. You're going to write valid html, are you not? Use a strict DTD.

    cheers,

    gary

    [1] Tables are very complex. You need to study both the html specs and the css specs.
     
    kk5st, Mar 11, 2007 IP
    Clive likes this.
  4. Clive

    Clive Web Developer

    Messages:
    4,507
    Likes Received:
    297
    Best Answers:
    0
    Trophy Points:
    250
    #4
    Looks like you've been given the most important things to consider before proceeding to "fixing" your site's look in IE.
     
    Clive, Mar 12, 2007 IP