View Full Version : filling a layer with colour + doctype

11-25-2011, 04:38 PM
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?

<!doctype html>

<title>layer fill</title>

<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">



11-25-2011, 04:45 PM
I'm not sure I see your issue.

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

11-25-2011, 05:16 PM
Adding the doctype, the layer looks like this:


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


It only seems to look the way I want in Internet Explorer...

11-25-2011, 05:23 PM
This is FF9 and IE9 both with the doctype:


11-25-2011, 06:43 PM
...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.

11-25-2011, 06:52 PM
Why not add the color to your <p> tag instead, then add some padding to it.

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.

11-25-2011, 07:13 PM
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.