Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Nov 2002
    Posts
    672
    Thanks
    1
    Thanked 1 Time in 1 Post

    DOM inserted image doesn't inherit text-align

    In a game I made at http://xfox.digibase.ca/games/lights, an image is inserted into the innerHTML of a div when the user wins. All <div> tags use margin:auto as well as text-align:center. Images are inline, so text-align should work (and in every other case in which I tried to reproduce this error, it works fine). This problem happens in Mozilla (works in IE but they treat text-align the same as margin and don't recognize margin). I'm not sure if this is a bug or not (I would have submitted it as a bug if I could figure out exactly what went wrong).

    The source of the page is a bit cryptic since I used javascript to write the pattern rather than hard code the entire thing. Mozilla's DOM Inspector can show the DOM structure in real time (the page validates as XHTML 1.1 and is well formed). I guess I'll have to reveal a simple solution to walk you to the win screen. Follow the image index (or see status bar) to click the images in any order prior to scrambling:

    Code:
    1, 2, 13, 14, 0, 4, 8, 15, 7, 11
    Is there something that slipped by me? Or is this simply a Mozilla bug?

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    It didn't work because you made img tags as block element.

    img{display:block}
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Posts
    672
    Thanks
    1
    Thanked 1 Time in 1 Post
    Quote Originally Posted by glenngv
    It didn't work because you made img tags as block element.

    img{display:block}
    I can't believe I forgot that. It's required for tables to fit their content against the borders rather than the baseline. Things like this happen when you haven't touched a project in months. Thanks

    Edit: It would be great if the DOM Inspector (or another utility) could display the CSS inheritance of each element in the structure. CSS use is growing more and more.
    Last edited by Tails; 07-07-2004 at 05:22 PM.


  •  

    Posting Permissions

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