Dale Lists wrote:
> ... I am trying to place header text at the bottom of the background
> image as shown on the below linked page.
>
> <http://conditioncritical.net/test.php>
> I am testing with FireFox on Mac and Windows.
Firefox will like the following on all platforms, I think.
1: move that background-image to #main, and tidy up a bit...
div#main {
position: absolute;
top: 70px;
left: 180px;;
color: #000700;
font: 13px Verdana, sans-serif;
padding: 10px;
border: solid 5px #000000;
background: #ffffff url(/css/images/header_bg.jpg) no-repeat;
width: 620px;
}
2: position h1 with 'padding-top', and make it adjust somewhat to
font-resizing by applying a 'negative margin-top'...
h1 {text-align: right;
color: #FF8C1A;
letter-spacing: 0.4em;
text-transform: lowercase;
font: bold 25px sans-serif;
white-space: nowrap;
padding-top: 145px;
margin-top: -1.1em;
}
Opera 9tp2 tested: fine.
Firefox 1.5.0.1 tested: fine.
IE6 tested, and it is a bit unhappy since it can't resize those px-fonts
without 'ignoring' them, but otherwise it is doing fine too.
regards
Georg
--
http://www.gunlaug.no
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
