...

View Full Version : filling a layer with colour + doctype



tpeck
11-25-2011, 05: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>
<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>

teedoff
11-25-2011, 05: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.

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

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

<!DOCTYPE HTML>

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

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

tpeck
11-25-2011, 08: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum