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 2 of 2
  1. #1
    Regular Coder dswimboy's Avatar
    Join Date
    Nov 2003
    Location
    mostly in Ann Arbor
    Posts
    458
    Thanks
    0
    Thanked 0 Times in 0 Posts

    center left-aligned text over watermark

    I want to center multiple paragraphs of left aligned text over a water mark, and be standards compliant.

    my html code is like this:
    Code:
    <HTML>
    <DIV id="watermark">
    <DIV class="text">This is the first paragraph about this, that, and the other day.</DIV>
    <DIV class="text">The second paragraph is a little below, and not indented. Just blah blah about how much college chemistry is bad.</DIV>
    </DIV>
    </HTML>
    my css, really isn't working out. here's what i got.
    Code:
    /* CSS */
    
    #watermark {
    	background-image: url(images/watermark.gif);
    	background-position : center;
    	background-repeat : no-repeat;
    	min-height: 300px;
    	padding-top: 25px;
    	padding-bottom: 25px;
    	text-align: center;
    }
    .text {
    	width: 400px;
    	margin-bottom:20px;
    	text-align:left;
    }
    firefox has the text aligned to the left, and not centered over the water mark. IE has the text over the watermark, but completely ignores the min-height property (is that what it's called?)

    I care more about the text being centered over the watermark in FF, than anthing in IE. what do you suggest?

    IEv6.0.2900
    FFv1.0.7
    "There is more than one way to do it."

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    IE doesn't support min-height, however another bug in IE6 will allow us to fake min-height. Add this to your CSS
    Code:
    * html #watermark {
    height:300px;
    }
    IE resizes its containing elements height when the content exceeds its height.
    The * is a universal selector. Saying that anything inside of the html tag and in the universal select will be used. IE should ignore this because its invalid but it doesn't hence why it only works in IE. I'm sure what you mean by centering text. Perhaps you can post a link or at least tell us where that image is located?


  •  

    Posting Permissions

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