CSS Forum

**soap** · 01:18 AM

Hi guys!

So I have this html:

Code:

<body>
    <img src="http://www.webmaster-talk.com/images/logov3.png" alt="kingdm" width="182" height="97" style="position:absolute; top:10px; left:10px;" />
    
    <div id="holder">
        <div style="position:absolute; left:10px; width:10px; height:10px; border:1px solid white;"></div>
    </div><!-- end holder -->
</body>
</html>

and this CSS:

Code:

* {
    margin: 0;
    outline:none;
    }
html, body {
    background-color:#000;
    background-image:url('../../images/earth.jpg');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:bottom right;
    height: 100%;
    text-align:center;
    font-family:Helvetica, Verdana, Arial, sans-serif;
    font-size:12px;
    font-weight:bold;
    color:#fff;
    }
#holder {border:1px solid red;
    margin:-100px auto 0 auto;
    position:relative;
    top:50%;
    width:auto;
    height:200px;
    }

My question is why when I set #holder to width: auto, why does it stretch all the way across the screen? Does it have to do with relative positioning?
I need it to be auto width and not 100% of the browser.

It has to be positioned relatively because I am going to have divs inside of it that need to be position absolutely.

ALSO!!
how do you position a background image top AND center??

I'm trying background-position:top center; as per w3.org, doesn't work??

and yes, i'm using background-attachment:fixed; for firefox.

thanks!

**wayfarer07** · 09:29 AM

The auto width of any div is 100%, unless its position is absolute.

To position a background image top center, you do this:

Code:

background-image: url(...);
background-position: top center;
background-repeat: no-repeat;
background-color: #fff;

Or in shorthand (Usually preferable):

Code:

background: url(...) top center no-repeat #fff;

**soap** · 07-18-2008, 06:38 PM

As I said, I was trying top center, which didn't work but I figured out a new solution. now I have browser compatibility problems. YAY!!!!!

Expect to hear soon about display:inline-block!

haha

**chrishirst** · 07-18-2008, 06:54 PM

Quote:

display:inline-block!

Isn't supported by (m)any browsers.

**soap** · 07-18-2008, 07:24 PM

hurray, one of them being firefox 2?

I'm in for a ride, I can tell.
Here's my link :

http://new.kingdm.com

here's my css

Code:

@charset "utf-8";

* {
    margin: 0;
    outline:none;
    }
html, body {
    background-color:#000;
    background-image:url('../../images/earth.jpg');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:bottom right;
    height: 100%;
    width:100%;
    text-align:center;
    font-family:Helvetica, Verdana, Arial, sans-serif;
    font-size:12px;
    font-weight:bold;
    color:#fff;
    }
h1.username {
    font-size:11px;
    text-align:center;
    margin-top:8px;
    color:#d6d6d6;
    }
a {
    color:#adcedb;
    text-decoration:none;
    }
input {
    width:90px;
    margin:5px 0px 0px 0px;
    color:#000;
    height:12px;
    font-size:7pt;
    border:1px solid #4d4d4d;
    background-color:#fff;
    }
    #username {
        color:#8d8d8d;
        }
.clear {
    clear:both;
    }


/*************** DIVS *****************/
#holder {
    margin:-100px auto 0 auto;
    position:relative;
    top:50%;
    width:auto;
    min-width:900px;
    max-width:900px;
    height:200px;
    }
    
    #icon_main {
        width:130px;
        height:auto;
        margin:0px 22px;
        display:inline-block;
        position:relative;
        }
        #icon_glow {
            /*background-image:url(../images/iconBorder.png);
            background-repeat:no-repeat;*/
            width:100px;
            height:83px;
            padding:15px 0px 0px 2px;
            position:relative;
            top:0;
            margin:0 auto;
            }
/**************************************/
img#icon_border {
    position:absolute;
    left:50%;
    margin-left:-50px;
    }
    
#icon_gloss {
    position:absolute;
    background-image:url(../images/iconGloss.png);
    top:0;
    }

If you look in ff3, it looks just how i want it to, not the case in ff2, or IE. haven't checked opera, safari, etc.
I will be forever indebted to the one who can help me get through this nightmare!

Tim

**chrishirst** · 07-18-2008, 08:09 PM

Do we get a nice pretty picture / screen shot of how you want it to look?

**soap** · 07-18-2008, 10:08 PM

how it looks in ff3 is how i want it to look.

**soap** · 07-18-2008, 10:24 PM

the funny thing is, I post these things thinking i'm hopeless. then i figure them out an hour later.