SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot iScrawl's Avatar
    Join Date
    Mar 2009
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Differences in design between Chrome and Explorer

    I noticed that my website looks very different in the different browsers.
    Now, I know it's normal because each browser got his own HTML parsing method, but, in the case of my site (www.playwithroger.com) - I can't find the cause...

    If you look at my website's home page with explorer, you will see big spacers between each cube that contains the game links and image. But in Chrome, they are gone...

    Can someone help me pin point the cause of those spaces?

    10X!
    Hanan Moiseyev
    Online games and Videos - http://www.playwithroger.com
    Share your art - http://www.iscrawl.com

  2. #2
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Probably some kind of CSS styling issue. I have not looked at the page but one thing that could help is if you set all the margins and padding to 0px. In your CSS style sheet, the first element in it should be:
    * {
    margins:0px;
    padding:0px;
    }

  3. #3
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please do not use some general reset; it's a redundant waste of time.

    This;
    Code:
    <td height="3" background="images/h_splitter.png" colspan="2"/>
    is likely the culprit. IE will generate an anonymous inline box that will be the height of the line-height; about 1.2&#215;font-size. Setting font-size to zero in those spacer tds should fix the problem. Better yet, lose the table layout, but that's for another topic.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  4. #4
    SitePoint Zealot iScrawl's Avatar
    Join Date
    Mar 2009
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Gary,

    The h_splitter.png line you mentioned is not the cause according to my tests...
    It's just those dotted lines.
    The spaces are showing up between the frames...

    And what do you mean by:
    Please do not use some general reset; it's a redundant waste of time
    Hanan Moiseyev
    Online games and Videos - http://www.playwithroger.com
    Share your art - http://www.iscrawl.com

  5. #5
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by iScrawl View Post
    Hi Gary,

    The h_splitter.png line you mentioned is not the cause according to my tests...
    It's just those dotted lines.
    The spaces are showing up between the frames...
    You're right. I suggested the other because 1) I had not seen the page in IE (did not have a Win box up), and 2) IE, in standards mode generates an inline box of the same height as the line-height no matter you want smaller. But, you're in quirks mode, where it would be better you weren't, and the automagical line box is not generated.

    Your space is caused by this bit:
    Code:
    <tr>
    </tr><tr>
    </tr><tr>
    </tr><tr>
    </tr><tr>
    </tr><tr>
    </tr><tr>
    </tr><tr>
    …
    </tr><tr>
    </tr><tr>
    </tr><tr>
    </tr><tr>
    </tr><tr>
    </tr><tr>
    </tr><tr>
    </tr><tr>
    </tr><tr>
    </tr>
    Firefox properly ignores them because they're invalid without at least one th or td in them. IE doesn't. Get rid of all those empty tr elements, and the extra space goes away.

    And what do you mean by:[resets are time wasters]
    This is oft discussed. You can find my arguments here, and here.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  6. #6
    SitePoint Zealot iScrawl's Avatar
    Join Date
    Mar 2009
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks for the help with this man!
    I got it sorted out the minute I added some remarks to the HTML output...
    Looks better now (still needs allot of graphic design, but better)
    10x!
    Hanan Moiseyev
    Online games and Videos - http://www.playwithroger.com
    Share your art - http://www.iscrawl.com


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
  •