🔒 Locked

[web] CSS compatibility problem

Started by CoffeeMug Feb 15, 2006 at 7:31 PM 4 replies 1.6k views

Original Post

Feb 15, 2006 at 7:31 PM

I uploaded a sample page here. My markup appears to have the following problem. If I open the page in Firefox or Opera there is about 1cm of vertical empty space between the header (the blue one) and the border (I purposely made it solid black). If I open the same page in IE, this space is gone. I can't for the life of me figure out what causes the empty space. I *want* the page to be rendered in every browser the way IE renders it now. Could someone throw me some hints? BTW, how's the design?

nmi

Feb 15, 2006 at 8:05 PM

In your css file, did you try changing:

#header #header-extra-1 h1 {	background: url(header_top_right.png) no-repeat top right;	font-size: 1.5em;}

#header #header-extra-1 h1 {	margin: 0 auto;	background: url(header_top_right.png) no-repeat top right;	font-size: 1.5em;}

I'm using Firefox and this removes the empty space.

BTW the design of that page looks nice. Maybe the text should have a little more space at the right side to the border.

Avatar God

Feb 15, 2006 at 9:42 PM

Quote:
Original post by nmi
BTW the design of that page looks nice. Maybe the text should have a little more space at the right side to the border.

I assume the black border is only there for the sake of seeing the spacing issue at the top, correct?

Blew

Feb 15, 2006 at 9:52 PM

Your problem is a typical one. The standard defines the behaviour of the css properties. Unfortunately, the standard (i believe) doesn't define what happens when you don't specify a value for some property. So basically each browser has it's own set of default values for all css/style properties.

Whenever i get problems with spacing like you have, i give values to all properties like borders, margins, paddings, alligns, indents for every cell/table/div that's giving me problems on some browser. That usually does the trick.

Hope that helps.

CoffeeMug

Feb 15, 2006 at 10:16 PM

Quote:
Original post by Avatar GodI assume the black border is only there for the sake of seeing the spacing issue at the top, correct?

Yes, the black border is of course there to illustrate the issue. I also plan to remove the red letters in the header and come up with something more pleasing to the eye.

nmi and blew: thanks for your suggestions. I will try the margin fix tomorrow.

Avatar God

Feb 15, 2006 at 10:21 PM

Quote:
Original post by CoffeeMug
Quote:
Original post by Avatar GodI assume the black border is only there for the sake of seeing the spacing issue at the top, correct?

Yes, the black border is of course there to illustrate the issue. I also plan to remove the red letters in the header and come up with something more pleasing to the eye.

Well, in that case, I like the design, except that the text is a bit large. And put your name on it : )

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.