Part of image should display but has disappeared

HTML & CSS
1

I am trying to make the top part of .businessWoman img appear, but haven’t been able to do anything with it. Please have a look at my html and css. Could someone please tell me how I can make the top part of the image appear (it is just the very top of the image that has disappeared)? Thanks in advance.

2

you have a negative setting on your businessWoman img style.

Remove


top: -14px

that will move her head down and visible. What’s happening is with the negative positioning you are pushing her up in the outer container which is set to overflow: hidden

3

Thanks, AtSea webdesign.

I thought that there was a way to display the very top of her head, over the colourful background image, like the shoes are showing over the navy line and white background. If this isn’t possible, don’t worry, I will be happy with the way it is, I was just curious.

4

you should be able to do that by setting the z-index for both divs. The girl should have a higher z-index than the container underneath. Think of it as stacking papers on top of each other. You can only see what’s on the very top

5

Just use a different float clearer and remove the overflow:hidden.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Experiment</title>
<style type="text/css">
html, body {
    min-width:900px;
}
body {
    background: #002535 url('http://website-building.info/images/mainbg.jpg') no-repeat 50% 0;
    color: #000;
}
img {
    border: none;
}
#pageWrapper {
    width: 900px;
    text-align: left;
    margin: 0 auto;
    margin-top: 9.5em;
}
.outer {
    position:relative;
    z-index:0;
    margin: 0 auto;
    color: #002535;
}
.outer .content {
    position:relative;
    z-index:1;
}
.outer p, .outer img {
    float:left;
    position:relative;
    width: 100%;
}
#apdiv {
    position:absolute;
    left:0;
    top:0;
    height:999em;/* we could have used bottom:0 but IE doesn't understand that so we need to use a height bigger than we ever need and the extra height is hidden by the overflow:hidden on the parent.*/
    width:100%;
    background: url('http://website-building.info/images/headerbg.png') no-repeat;
    opacity:.5; /* FX/Opera/Safari/Chrome */
    -ms-filter:"alpha(opacity=50)"; /* IE8 */
    filter:alpha(opacity=50); /* IE6/IE7 */
}
.businessWoman {
    float: left;
    width: 366px;
    position: relative;
    margin-top: -14px;
}
.businessWoman img {
    left: 15px;
    position: relative;
}
.headerInfo {
    float: right;
    width: 40%;
    margin-right: 10em;
    margin-top: 3em;
}
.headerInfo img {
    width: 138px;
    padding-right: 1em;
}
#contentWrapper {
    background: #FFF;
    overflow: hidden;
    width: 100%;
    padding: 1em;
    position:relative;
}
.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
.clearfix {display:inline-block;}
/* mac hide \\*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide */
</style>
</head>
<body>
<div id="pageWrapper">
    <div class="outer">
        <div class="content clearfix">
            <div class="businessWoman"><img alt="business woman jumping for joy" height="406" src="http://website-building.info/images/business-woman.gif" width="366" /> </div>
            <div class="headerInfo">
                <h1>Heading here</h1>
                <p>Paragraph here.</p>
                <p>Paragraph here.</p>
                <p><img alt="See Portfolio" height="45" src="http://website-building.info/images/portfoliobtn.gif" width="138" /> <img alt="Contact Me" height="45" src="http://website-building.info/images/contactbtn.gif" width="138" /></p>
            </div>
        </div>
        <div id="apdiv"></div>
    </div>
    <div id="contentWrapper"></div>
</div>
</body>
</html>