A few issues CSS Question

Question A few issues ( SitePoint Forums CSS )
Updated: 2008-11-23 03:50:02 (9)

A few issues

Hey

I'm having a few issues with a design I'm creating. I've got the majority of things sorted, it's just these few.

The design is located at; http://www.chrisgwynne.com/new/
The CSS file is located at; http://www.chrisgwynne.com/new/includes/style.css

IE displays it pretty much how I want it. Always does

Mozilla however has the following problems.

- The background image doesn't show the for main area (scrollbar area)
- The background image of the content (the dotted background) only goes down a certain length then it stops.
- There is supposed to be a 100px bottom margin to the wrapper container and whilst it shows this in IE it doesn't in Mozilla.
- The footer is extended by roughly extra 10px

Any ideas?

Regards,
Chris

Answers: A few issues ( SitePoint Forums CSS )

A few issues

Hi,

Quote:

The background image doesn't show the for main area (scrollbar area)

Ie doesn't understand background:fixed unless its on the body. Mozilla does understand background:fixed which is why you can't see it. Although ie does what you want it's not right and doesn't follow the specs.

Fixed positioning is always in respect of the viewport and not the element its attached to. This means that the background will only show when the element is in the same place as the background image.

If you specify a fixed image at say top 50 and left 50 but your element is at the bottom of the window then the background will never show.

In your case you don't mean fixed anyway so just take it out and it will show exactly as you wanted

Code:

#main
{
background-color: #F9F6EB;
background-image: url(http://www.chrisgwynne.com/new/images/main.gif);
background-repeat: no-repeat;
height: 75%;
margin: 0;
padding: 0;
overflow: auto;
position: absolute;
top: 115px;
width: 100%;
}

Paul

Paul O'B

A few issues

Quote:

- The background image of the content (the dotted background) only goes down a certain length then it stops

You haven't supplied any content in the after style so it isn't giving moz anything to get hold of.

Use this instead:

Code:

#wrapper:after 
{
content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

Paul

Paul O'B

A few issues

Whoops!

Post one should be like this:

Code:

#main
{
background-color: #F9F6EB;
background-image: url(http://www.chrisgwynne.com/new/images/main.gif);
background-repeat: no-repeat;
height: 75%;
margin: 0;
padding: 0;
overflow: auto;
position: absolute;
top: 115px;
width: 100%;
}
* html #main {background-attachment: fixed;}

Ie needs position fixed because it fixes it in the element itself (which it shouldn't do).

Paul

Paul O'B

A few issues

Thanks Paul, that's fixed those two issues nicely.

Any idea on these two

- There is supposed to be a 100px bottom margin to the wrapper container and whilst it shows this in IE it doesn't in Mozilla.
- The footer is extended by roughly extra 10px

?

Regards

Chris Gwynne

A few issues

Hi,

Just going to have a look but I'm just wondering if your header should be 115px high and not 20%. When you resize the height smaller the two images go out of sync.

Code:

#header
{
background-color: #BA9F36;
background-image: url(http://www.chrisgwynne.com/new/images/header.gif);
background-repeat: no-repeat;
background-position: left bottom;
height: 115px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 100%;
}

If you specify the 115px the split images stay together.

Where is the footer extended by 10px and is this just moz?

Paul

Paul O'B

A few issues

Ok fixed that issue, thanks.

Chris Gwynne

A few issues

Hmmm I'm not sure moz knows where to put the margin with all those 100% heights etc. There isn't really anything for it to base it on.

The easiest thing to do is just add a 100px hight empty div which will work on all browsers.

Take out the margin bottom and use this filler style instead.

Code:

#wrapper
{
background-image: url(http://www.chrisgwynne.com/new/images/wrapper.gif);
background-repeat: repeat-y;
margin: auto;
margin-top: 100px;
min-height: 100%; /*for mozilla */
text-align: left;
width: 681px;
}
#filler {height:100px}
* html #wrapper 
{
height: 100%;
} /*for ie*/

Code:

	</div>
	<div class="side">vcb vc vb vb bb bb hgb vcb vb bfb vb bvvcb vbcvb bvc v</div>
  </div>
<div id="filler"></div>
</div>
<div id="footer">Copyright ? 2002-2004 Chris Gwynne, all rights reserved. Powered

It's a shamed to have to add it to the html but it works relaibly

Still not sure what I'm looking for on the footer?
Paul

Paul O'B

A few issues

As for the footer, I've changed the background color of the page to black so it's more clear as to the problem.

In IE the wrapper is pushed up right to the top and bottom. Whereas in Moz there remains a slight gap, as noticed by the black part..

Chris Gwynne

A few issues

It still looks the same to me lol.

In Ie I get the same size footer as moz and the black part above the footer. When I resize the height smaller the blackpart gets smaller and eventually disappears.

It seems to be exactly the same as firefox. I have the 2 windows open side by side at the same height and I can't really pin down what you mean.

I'm probably just being thick as its time to go to sleep

Paul

Paul O'B

- Source: A few issues SitePoint Forums CSS
- Previous Question: margins simple question. SitePoint Forums CSS
- Next Question: inline list inside h3 SitePoint Forums CSS