CSS Forum

**michelle1908** · 05-21-2007, 09:08 PM

I'm having another problem with Mozilla. I didn't take the advice to make it work in Mozilla first. I think I just like to "feel like" I've succeeded, even if it's short lived...

Here's the css in question, particularly the LOGO.

Code:

body {
background: #c5b28a;
padding:0; 
font-family: verdana, trebuchet, sans-serif;
font-size: 12px;
color: black;
text-decoration: none;
text-align: center;
margin: 0 auto;
}
.wrap {
background-color: #ccbd9e;
width: 800px;
border: 1px solid #dcd1d5;
text-align: left;
margin: 75px auto;
}
.wrap2 {
margin: 10px;
background: url('images/site3/bkg.gif') repeat-y;
}
.logo {
position: relative; 
left: -89px; 
top: 160px;
background: url('images/site3/logo.gif') no-repeat; 
height: 210px;
margin: auto;
}
.picleft {
float: left;
}
p {
line-height: 150%;
color: #f5f1e8;
padding:0 0 15px 0;
margin:0;
}
.menu {
width: 200px;
position: relative;
left: 560px;
top: -25px;
font: 11px verdana, arial, sans-serif;
}
.menu a{
text-decoration: none;
color: #465366;
} 
.menu a:link {
border-bottom: 1px solid #c5b28a;
display: block;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 5px;
}
.menu a:active {
border-bottom: 1px solid #c5b28a;
display: block;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 5px;
}
.menu a:visited {
border-bottom: 1px solid #c5b28a;
display: block;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 5px;
color: #774f38;
}
.menu a:hover {
border-bottom: 1px solid #c5b28a; 
display: block;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 5px;
color: black;
}
h1 {
font: 25px garamond, serif;
padding: 5px 0 2px 0;
margin:0;
}
#residential {
color: #B2B398;
}
h2 {
color: #c5b28a;
font: 20px garamond, serif;
padding: 20px 0 0 0;
margin:0;
}
.content {
/*testing
position: relative;
top: -135px;
*/
margin-top: -135px;
width: 360px;
padding: 15px 0 15px 15px;
}

Here's the html:

HTML Code:

<body>
<div class="wrap">
<div class="wrap2">
    <div class="picleft"><img src="images/site3/residential.gif" alt="Residential Services"></div>
    <div class="logo"></div>
    <div class="menu"><a href="site3.htm">Home</a> <a href="#">Residential 
      Services</a> <a href="#">Business Services</a> <a href="#">Workshops</a> 
      <a href="#">FAQ</a></div>
    <div class="content"><h1 id="residential">Residential Services</h1>
    <p>Do you panic when someone unexpectedly drops by your house? 
      Does your home feel like an obstacle course of paper, books 
      and clothes? Organizing your surroundings will help you 
      achieve the peace of mind and balance that you desire in 
      life so you can gain the most from your family, career and 
      home. Being in control is about knowing your strengths and 
      resources and using them to your advantage.</p>
    <p>About 80% of the clutter in your home is a result of disorganization, 
      not a lack of space. Cleaning professionals say that getting 
      rid of excess clutter would eliminate 40% of the housework 
      in an average home. Organize For You provides ideas, structure 
      and systems that suit your personality and goals. Whether 
      it is a cluttered room or a disorganized home office, we 
      will find the most suitable and creative solutions for you. 
    </p>
      <h2>Home Staging</h2>
        <p>Are you selling your home? Does it need a makeover? Contact 
        us about staging your home to put on the market.</p>
    <h2>Speaking Engagements</h2>
     <p> Looking for a speaker for your church or local non-profit 
      organization? Organize For You offers workshops on organizing 
      your home, office or finances. </p>
    </div>
  </div>
</div>
</body>

**LadynRed** · 02:47 PM

Ok.. what is the problem with it ? Where is it supposed to be ?

For one thing, you've got several things set to position:relative where there may not be a reason to do so.

When you are positioning, the element is positioned relative to it's NEAREST POSITIONED ANCESTOR. If there is no positioned ancestor, then the element is positioned relative to the BODY.

Based on what you've got there, you'd be better off floating that menu to the right, and leave off the position:relative on the logo and just use the normal document flow.

I have one other comment - the contrast of the brown/gray of your headings against the tan background is very bad, you need to darken them up, a lot. The white on the tan is also not great contrast, people with some visual impairments won't even be able to see what's there.

**michelle1908** · 05-23-2007, 05:54 AM

I forgot to include the link so you can see what I'm talking about. The logo is supposed to be in the center like it shows in IE. Would absolute positioning work better?

**LadynRed** · 05-23-2007, 11:59 AM

In this case, position: absolute will solve the problem, as long as you make some other modifications.

One thing you need to do is give the logo div a defined width. Right now it has no width, therefore it is taking up the entire width of it's containter. Size it to match your logo.

Make these these changes to your CSS:

.wrap {
background-color: #ccbd9e;
width: 800px;
border: 1px solid #dcd1d5;
text-align: left;
margin: 75px auto;
position: relative;

.logo {
position: absolute;
left: 380px;
top: 160px;
background: url(images/site3/logo.gif) no-repeat;
height: 170px;
width: 170px;

.content {
margin-top: 15px;
width: 360px;
padding: 15px 0 15px 15px; }

Remove the .picleft you don't need it. There's no reason to float that image, the normal document flow will put the image in the upper left corner.

Quote:

This works in IE6 and FF.