SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot pacman2504's Avatar
    Join Date
    Oct 2003
    Location
    North Wales
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Conflict with CSS and doctype?

    Code:
    #1 {
      display: inline;
    	width: 200px;
    	height: 200px;
    	border: 1px solid black;
    }
    #2 {
      display: inline;
    	width: 200px;
    	height: 200px;
    	border: 1px solid red;
    }
    Now, these two divs won't display at all unless I completely remove the doctype declaration!?!

    The page is XHTML Strict but this won't work in transitional either.

    Can anybody help?
    In the land of the witless, the half-wit is king.
    Business and liability insurance quotes

  2. #2
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Holland
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Invalid

    Add the doctype again and validate your CSS; you'll learn that the width and height properties are invalid for a display: inline element.
    Adding the doctype makes the browser behave according to the standards, and seemingly it decides to not show your contradictory styled elements; without it, the browsers goes into quirks mode, trying to display just about everything.

    Either remove width and height, or display: inline, and the world is a better place again.
    Regards,
    Ronald.

  3. #3
    SitePoint Zealot pacman2504's Avatar
    Join Date
    Oct 2003
    Location
    North Wales
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that, but I've just run the code through the validator and it validates.

    I'm sure I've displayed fixed-width elements inline before.
    In the land of the witless, the half-wit is king.
    Business and liability insurance quotes

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Another thing: IDs can't start with numbers. That's probably why you have to remove your DOCTYPE to get it working.

    Off Topic:

    IE for Windows incorrectly honors widths on inline elments, causing some false expectations.

  5. #5
    SitePoint Zealot pacman2504's Avatar
    Join Date
    Oct 2003
    Location
    North Wales
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IDs can't start with numbers
    I only used 1 and 2 as examples, but didn't realise it wasn't valid.
    IE for Windows incorrectly honors widths on inline elments, causing some false expectations
    That will explain where I've seen it before.

    Ah well, a table it is, then! Thanks, guys.
    In the land of the witless, the half-wit is king.
    Business and liability insurance quotes

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Ah well, a table it is, then! Thanks, guys
    If you could explain what you were doing we could offer valid css alternatives .

    Why are you tring to create block elements but then making them display inline? You probably should be using floats.

    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
  •