CSS Troubles

clarke1866 posted this at 08:12 — 14th June 2004.

They have: 3 posts

Joined: Jun 2004

Greetings all,

I've almost completed my front page but am having some problems with browser differences. Since this is the first time I've tried CSS, I'm pretty sure its a CSS related problem.

Specifically, the problem is that in IE the site looks fine, but in Mozilla (firefox) there is a band of colour (the bg colour) running just below the header. If anyone can tell me (or point me in the right direction) how to fix this it would be great! Hrmmm perhaps you'll need to visit MaxPower to see for yourself

Thanks for any help,
clarke
Better living through MaxPower.

Suzanne posted this at 15:36 — 14th June 2004.

She has: 5,507 posts

Joined: Feb 2000

<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.

clarke1866 posted this at 09:25 — 16th June 2004.

They have: 3 posts

Joined: Jun 2004

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 posted this at 15:47 — 16th June 2004.

She has: 5,507 posts

Joined: Feb 2000

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.

clarke1866 posted this at 07:56 — 17th June 2004.

They have: 3 posts

Joined: Jun 2004

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 posted this at 15:22 — 17th June 2004.

She has: 5,507 posts

Joined: Feb 2000

Now to preload your rollovers.

Glad you found it, it looks good!