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 7 of 7
  1. #1
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    817
    Thanks
    43
    Thanked 6 Times in 5 Posts

    filling a layer with colour + doctype

    I am trying to make a layer remain filled with colour after applying the doctype at the top of the page. But doing so, ruins the effect. It only looks the way I want it when I remove the doctype.

    What am I not doing that I should be doing?

    Code:
    <!doctype html>
    <html>
    
    <head>
    <title>layer fill</title>
    </head>
    
    <body>
    <div id="Layer1" style="position:absolute; left:200px; top:14px; width:60; height:20; z-index:1; background-color: #80FF80; layer-background-color: #CCCCCC; border: 1px none #000000">
    <center>
    <p>fifteen</p>
    </center>
    </div>
    
    </body>
    
    </html>
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I'm not sure I see your issue.

    I copied your code and viewed in a browser, The test stays green for me.
    Teed

  • #3
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    817
    Thanks
    43
    Thanked 6 Times in 5 Posts
    Adding the doctype, the layer looks like this:

    http://aapress.com.au/demo/fifteena.gif

    The way I need it to look and function is this:

    http://aapress.com.au/demo/fifteenb.gif

    It only seems to look the way I want in Internet Explorer...
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    This is FF9 and IE9 both with the doctype:

    <!DOCTYPE HTML>
    Attached Thumbnails Attached Thumbnails filling a layer with colour + doctype-fillerff.jpg   filling a layer with colour + doctype-fillerie.jpg  
    Teed

  • #5
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    817
    Thanks
    43
    Thanked 6 Times in 5 Posts
    ...and that is the issue I am having.

    I am trying to get the layer to fill all around the word just like it looks in the web editor (I use FrontPage, but I don't think that is the problem in this instance). But when you add the doctype it doesn't look like the proper sized rectangle I have created.

    I want it to look like http://aapress.com.au/demo/fifteenb.gif

    I would have hoped that the layer one creates in the web editor, whatever size and shape filled with a colour, would be faithfully recreated in any browser. That doesn't seem to happen.

    Adding the doctype, I was hoping this would fix it, but it doesn't seem to.
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Why not add the color to your <p> tag instead, then add some padding to it.

    Code:
    p {
        background-color: #80FF80;
        padding: 10px;
    }
    On a side note, not sure why you need to use that center tag either. Long outdated and wont be supported at all in the near future.
    Teed

  • #7
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    817
    Thanks
    43
    Thanked 6 Times in 5 Posts
    I can get rid of <center></center> with text-align: center, and what you suggested works. Thanks.

    But there is still a problem.

    If that word (in this case, 'fifteen') was only the word 'and', how can I retain the rectangular size of the layer?

    In other words, I want to fix the size of the layer (with the colour fill) regardless of what's inside.
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)


  •  

    Posting Permissions

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