Forum Moderators: not2easy
For all practical purposes they are identical tags except the Headline_Text does not have the background set, the font is red (instead of black) and it has position: absolute;. The text alignment is centered, but without width set to 100% the text appears flush left.
The problem with setting the headline_text to width 100% is that it leaves a gap in the background when the monitor is set to a low resolution and the user needs to scroll horizontally to view the entire page.
Both headline & headline divs are wrapped by the container id.
What can be done to get the background for headline to stretch all the way to the right (when the user needs to scroll) and to get the headline_text to align the text to center at the same time?
html, body {
margin: 0;
padding: 0;
height: 93%;
}
#container{
background-color: #FCFCFC;
margin: 0;
padding: 0;
height: 93%;
}
#headline {
background-color: #EFEFEF;
border-top-style: ridge;
border-bottom-style: inset;
border-top-color: #DFDFDF;
border-bottom-color: #DFDFDF;
font-family: "Times New Roman", Times, serif;
font-size: 40px;
font-style: oblique;
font-weight: bolder;
font-variant: normal;
text-transform: uppercase;
color: #000000;
letter-spacing: 12px;
text-align: center;
margin: 0;
padding: 0;
left: 0;
top: 0;
}
#headline_title {
position:absolute;
text-align: center;
font-family: "Times New Roman", Times, serif;
font-size: 40px;
font-style: oblique;
font-weight: bolder;
font-variant: normal;
text-transform: uppercase;
color: #FF0033;
letter-spacing: 12px;
left: -2px;
top: 3px;
width: 100%;
margin: 0px;
padding: 0px;
}
quick question ~ are you intending this to produce do a drop shadow/double text effect?
Why, yes I am!
It is good 'ol IE that's the problem again ..grrrr
The stretching background can be fixed by using min-width for compliant browsers, when the content is larger element than (overflows) it's only IE that is incorrectly stretching the containing element the other browsers are allowing the content to overflow the box.. but putting a min-width on for them will keep the visual effect intact ;)
Then when absolutely positioning the second bit of text IE needs a width of 100% otherwise it defaults to the size of the text and so it appears left aligned {though this is not the correct way to size an absolute box, the correct way is to use all four co-ordinates top: 0; left: 0; right: 0; bottom: 0; ). Then IE goes is it's quirky "haslayout" mode due to absolute positioning and the width and is not handling the letter-spacing the same (did I say grrr) so then adding width 100% to both elements at least forces IE to treat them the same way and keeps the text in alignment..
test HTML:
<div id="container">
<h1>headline text</h1>
<h2>headline text</h2>
</div>
CSS:
h1, h2 {
font-size: 40px;
line-height: 50px;
font-family: "Times New Roman", Times, serif;
font-style: oblique;
font-weight: bolder;
font-variant: normal;
text-transform: uppercase;
letter-spacing: 12px;
color: #000000;
margin: 0;
padding: 0;
text-align: center;
white-space: nowrap;
width: 100%; /* IE needs a dimension on both elements to make them act the same way */
}h1 {
border-width: 3px 0;
border-color: #aaa;
border-style: double;
background-color: #efefef;
position: relative;
}h2 {
position: absolute;
color: #f00;
top: 2px; /* because of the border: 3px - 1px */
left: 1px;
right: 0;
bottom: 0;
}/* reset width and set min-width for the compliant browsers ones */
html>body h1, html>body h2 {
width: auto; min-width: 500px;
}
The min width is adjustable, and should be wide enough to cover the text, or any background image... I added nowrap too to keep text on one line..
HTH anyway..
Suzy
Thanks for the help. This has befuddled me for a few days now and your solution is the light at the end of the tunnel.
Thanks
