Suzanne — Thu, 17 Jun 2004 15:22:35 +0000

Now to preload your rollovers.

Glad you found it, it looks good!

clarke1866 — Thu, 17 Jun 2004 07:56:12 +0000

Thanks again for your comments, I had not heard of the favlet, very interesting, but didn't help much. I ended up going piece by piece through the code erasing things until I figured out what happened.

The problem turned out to be in the CSS for the h1 tag:

Before:

font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    color: #fff;
    padding:10px;

'
After:

 font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    color: #fff;
    padding:10px;
margin:0;
text-align: left;

This round has ended, css 0, me 1.

Thanks again for your help!

Suzanne — Wed, 16 Jun 2004 15:47:40 +0000

Oh yes, much nicer to have links to the style sheets than having to go exploring for them, thank you. Now we need to train you to clearly comment your CSS all the time so that we know what is where without having to refer directly to the HTML tree for every declaration... At least your naming convention is nice and conventional, though.

A few tips that won't affect that space:

shorthand the hex values for colours -- #eeffee is equally written as #efe,
shorthand the background properties OR use the specifics.
e.g. background: Black; is bad -- it should be background-color: black;
e.g. background-image: url(something) #000 no-repeat; is bad -- it should be background: url(something) #000 no-repeat;
To avoid cross-browser issues with image locations, use url(/something) (with the forward slash) instead of just url(something).
You can shorthand the margin/padding properties as such: margin: 10px 0; which will give 10px to the top and bottom and 0 to the left and right.
Keep all HTML positioning OUT when using CSS positioning -- you have your body aligned in the HTML

As for your specific problem, do you know how to make favelet?

javascript:var t=document.getElementsByTagName('div');for(i=0;i<t.length;i++){void(t[i].style.padding='5px;');b=t[i].id;h=t[i].innerHTML;void(t[i].innerHTML='<p style=\'color:red;font-weight:bold;\'>'+b+'</p>'+h);void(t[i].style.border='2px solid red');}

make that a bookmark, and then call it for your page and you'll be able to see where all your divs with IDs are and how they are affecting things.

CSS troubles

clarke1866 — Wed, 16 Jun 2004 09:25:35 +0000

Thankyou for your reply,

Yes the code was a little shaky in that area. I'm new to both php and CSS and learning how to make things clean is tricky. I've cleaned up the code (both php and css) thanks to your comment, and the problem still persists. Both the CSS and HTML validate, so nothing obviously wrong. Yet still I have this band of background colour which stripes throught the header area when using firefox. This does not appear when using IE. I've made some screenshots available to show what I see:
Firefox:

and IE:

Here are the relavant CSS links if you'd like:
Style CSS
Layout CSS

Even if you aren't sure, I'm not even sure how to begin tracking this down... Again, thanks for any help!
clarke
Better living through MaxPower.

Suzanne — Mon, 14 Jun 2004 15:36:20 +0000

<div id="hdr"><span style="padding:5px;font-size:13px;color:#fff;position: relative; left: 10pt; top: 100pt">
Better living through MaxPower.
 <a href=""></a><br/></span></div>

What the... ? Blank hyperlinks and line breaks for what reason? Span for what reason? For the sake of eyeballs looking and helping, you might want to ditch the redundancies and tighten up the code a little.

You might want to look at the padding/margin declarations for the two divs on either side of the break for this problem. Padding/margin apply differently in IE than other browsers. It's usually IE5.5 that's the problem, but I've found IE6 has equal issue with padding/margins.