6 replies [Last post]
JimL
Offline
newbie
Last seen: 18 years 22 weeks ago
Joined: 2004-03-16
Posts: 4
Points: 0

I am developing a simple site using CSS for the first time.

Here is the test URL:

http://dev.admin.ox.ac.uk/tr01/index.htm

When I view the page in IE6 it displays correctly. However, in Netscape 7 and Opera 6 the background image in the main page section (the area with the blue menu and text about BaatzRacing.com) does not seem to tile correctly and leaves unsightly gaps between the elements above and/or below (depending on which of the two browsers you use).

The url of the stylesheet is:

http://dev.admin.ox.ac.uk/tr01/style.css

Am I making a mistake in my CSS?

I'd also be interested in comments on how the page displays in other browsers.

Cheers, Jim

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 18 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Problems with background images

It breaks at the bottom in Safari also. I can't see anything immediately wrong with the code (HTML and CSS). The only thing I can suggest at present is less reliance on <div>s. Getting rid of a few of these wouldn't harm (not sure it'd help with the break, maybe).

You don't really need the div surrounding the <ul> menu and the main text either.

It could possibly be the #maintext div that's breaking the others, but I'm not sure. If I have more time later I'll have another look.

The next sentence is true. The previous sentence is false. Discuss...

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 41 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Problems with background images

Hi

No mistake, you just haven't allowed for css bugs in Mozilla and Safari.

Create a new style in your style sheet:

.clear{
clear:both;
font-family:sans-serif;
font-size:0px;
line-height:0px;
height:1px;
overflow:hidden;
}

This has far more than is ABSOLUTELY required, but this way it should keep the div to 1px or below in all browsers!

then the end of your page should look like this:

<p>rggdsggagr</p>
</div>
<div class="clear"></div>
</div>
<div id="pageBottom"></div>
</body></html>

That should take care of it. If a gap opens up like this, or an element is in the wrong place vertically, this bug is often the cause.

Also. Given that most systems can't cope with files sizes as small as your background.gif and bgMiddle.gif, I would suggest making these bigger, as most users won't notice the load but rendering will be MUCH faster, if say, the bgMiddle.gif is five pixels high, and the background is say 64x64.

By the way, those images a WAY too big in bytes, they need compressing. I have Trout's GIF optimizer (a freebie) and it takes bgMiddle.gif at 859 bytes and makes it 84 bytes! No image quality loss at all. Similarly, the background.gif goes down to 70bytes. Even title.gif it can save nearly 800 bytes.

Just a thought.

Trevor

JimL
Offline
newbie
Last seen: 18 years 22 weeks ago
Joined: 2004-03-16
Posts: 4
Points: 0

Problems with background images

Fantastic!

Thou art a 24 carat genius! Laughing out loud

The problem is fixed entirely in Netscape now! However, the fix does not quite do the trick in Opera, but unless you have another flash of genius I'm happy to live with that.

If you have the time to explain, I'd be happy to understand how the .clear class does its magic. Also I've never seen the "clear" property before.

Regarding your image tips, I'll definitely implement them. I'll up them in size and have a look for the Trout GIF optimizer to shrink my images down in bytes.

Does the optimizer handle transparency okay?

Cheers, and many thanks! Jim

JimL
Offline
newbie
Last seen: 18 years 22 weeks ago
Joined: 2004-03-16
Posts: 4
Points: 0

Problems with background images

I have just realized that your fix works in Opera as well.

By putting your DIV at the top of my pageLayout DIV, it removes the gap in Opera too:

<div id="pageLayout">
<div class="clear"></div>
<h1 id="pageTitle">BaatzRacing.com</h1>

Thou art doubly a genius!

Cheers, Jim

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 41 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Problems with background images

Hi

I'm def NOT a genius, but I AM good at remembering things folks tell me. The clear definition I used is bigger than normal to allow for Safari, which I found the mods I did worked with, but the standard one wouldn't in all cases.

I'm not so hot at why it works, but as I understand it a container (Div) can be like a milk bottle with a hole in the bottom as well as the top. If for some reason it ain't full, some browsers can't see the bottom (ie it fills from the top and leaves the space at the bottom). IE is bright enough not to fall for this, but the W3C specs suggest the other browsers are right, not IE. Yet another IE implementation that makes sense (like height means min-height in IE seems a good idea, sometimes).

The Trout Optimizer handles transparancy as well. If you use a GOOD image package and use its optimisation options, trout often doesn't save much space. You can find it here:

http://www.chemware.co.nz/tgo.htm

Enjoy it, I have found it to be 100% harmless, unless you try to further compress by changing the color pallette, in which case beware and make backups.

Trevor

JimL
Offline
newbie
Last seen: 18 years 22 weeks ago
Joined: 2004-03-16
Posts: 4
Points: 0

Problems with background images

Many thanks for all your help with this.

It will be nice when browsers finally get their acts together and do what the CSS is telling them to do!

I'll download the Trout Gif optimizer and have a look.

Many thanks again!

Cheers, Jim