Extra space in IE, not enough in Firefox

[dhammell]

I have been creating portals and sections using CSS for a site redesign and found that a couple of the sections aren't behaving as they should. I will give the code so you can see what I mean.

HTML

<div class="countrybox">
<div class="csectionbanner">Forestry Commission Wales</div>
<div class="cbuttonscontainer">
<a class="cbuttons" href="#">Great Britain ></a>
<a class="cbuttons" href="#">England ></a>
<a class="cbuttons" href="#">Scotland ></a>
<a class="cbuttons" href="#">Wales ></a>
<a class="cbuttons" href="#">Forest Research ></a>
</div>
<div class="cdescription">test</div>
</div>

<div class="longsection">
<div class="sectionbanner">Events</div>
<div class="longcontent">Test</div>
</div>

CSS

/*Links formatted to appear in the country box*/
a.cbuttons {
display: block;
width: 123px;
height: 18px;
padding: 5px 0 0 0;
background-color: #993333;
color: White;
text-decoration: none;
text-align: center;
vertical-align: baseline;
border-left: 1px solid #993333 ;
border-top: 1px solid White;
border-bottom: 1px solid #993333;
border-right: 1px solid White;
}

a.cbuttons:link {
background-color: #993333;
}

a.cbuttons:hover {
background-color: Maroon;
text-decoration: underline;
}

/*Container for country section*/
.countrybox {
width: 345px;
height: 128px;
max-height: 128px;
margin: 0 0 8px 0;
padding: 0;
}

/*Banner for country section does not have same margin settings as standard banner*/
.csectionbanner {
height: 18px;
padding: 2px 0 0 10px;
margin: 0;
background-color: #993333;
background-image: url(images/wbanner_topcorner.gif);
background-position: left top;
background-repeat: no-repeat;
color: white;
font-size: 14px;
font-weight: bold;
}

/*Holds the buttons and gives cdescription a box to be relative to*/
.cbuttonscontainer {
width: 125px;
height: 128px;
margin: 0;
}

/*Country description positioned to the right of the buttons*/
.cdescription {
position: relative;
top: -127px;
left: 125px;
width: 210px;
height: 114px;
padding: 5px;
background-color: #993333;
background-image: url(images/wbanner_bottomcorner.gif);
background-position: right bottom;
background-repeat: no-repeat;
color: white;
}

*Long section container*/
.longsection {
width: 345px;
height: 316px;
margin: 0 0 8px 0;
}

.longcontent {
width: 325px;
height: 266px;
padding: 10px;
background-color: #eeeeee;
background-image: url(images/content_bottomcorner.gif);
background-position: right bottom;
background-repeat: no-repeat;
}

/*Standard homepage banner*/
.sectionbanner {
height: 18px;
padding: 2px 0 0 10px;
margin: 0 0 5px 0;
background-color: #993333;
background-image: url(images/wbanner_topcorner.gif);
background-position: left top;
background-repeat: no-repeat;
color: white;
font-size: 14px;
font-weight: bold;
}

There is too much space in IE, but in Firefox they collide. Can anyone give me a clue to what is happening here?

Thanks

[StupidScript]

Your padding and margin measurements are somewhat incomplete. Did you validate your stylesheet? I believe you need to specify a measurement unit in all instances:

padding: 5px 0px 0px 0px;

for example, not:

padding: 5px 0 0 0;

This is one of the most notoriously error-prone areas of CSS and its implementation by the browser manufacturers. I'll bet you can see problems with rendering in other IE versions, too ... they're all a little different in this regard.

[dhammell]

Thanks Stupidscript. I tried specifying all the values with units but it does not seem to have helped.

[xfinx]

padding: 5px 0 0 0; is valid!
I always check my stylesheet.. and I never have errors, when I use that notation!

[SuzyUK]

zero is always zero regardless of em, cm, px etc, so it's perfectly fine to omit the unit of measure
on it.

re question.. it's the maths somewhere but I haven't quite debugged it all to see what IE doesn't like but likely the heights are involved too.

.. the links

a.cbuttons

, are 25px high [18px + 5px[padding] + 2px[borders]) there are 5 of them = 125px which is fine for cbuttonscontainer (128px) but then you have also specified height on

countrybox

of 128px too, which is not enough for it to contain

csectionbanner

as well as the links

this might explain the scrunching up in FF, IE will be different as it treats height like min height and stretches to fit, so is likely stretching one bit then adding in the extra for another (a rough guess)

Not sure which way you want it to look so first just try removing the heights (and max-height for FF) and see if you can get it to look the same in both then let us know what if any height restrictions you want

Suzy

[dhammell]

Okay, the only height values left now are in cdescription, csectionbanner and cbuttons. This means that it now has the same space at the bottom in both FF and IE. Unfortunately the space is really big for no apparent reason! Surely the country box should only be the combined height of csectionbanner and the 5 cbuttons?

Here is the modified code:

/*Links formatted to appear in the country box*/
a.cbuttons {
display: block;
width: 123px;
height: 18px;
padding: 5px 0px 0px 0px;
background-color: #993333;
color: White;
text-decoration: none;
text-align: center;
vertical-align: baseline;
border-left: 1px solid #993333 ;
border-top: 1px solid White;
border-bottom: 1px solid #993333;
border-right: 1px solid White;
}

a.cbuttons:link {
background-color: #993333;
}

a.cbuttons:hover {
background-color: Maroon;
text-decoration: underline;
}

/*Container for country section*/
.countrybox {
width: 345px;
margin: 0px 0px 8px 0px;
padding: 0px;
}

/*Banner for country section does not have same margin settings as standard banner*/
.csectionbanner {
height: 18px;
padding: 2px 0px 0px 10px;
margin: 0px;
background-color: #993333;
background-image: url(images/wbanner_topcorner.gif);
background-position: left top;
background-repeat: no-repeat;
color: white;
font-size: 14px;
font-weight: bold;
}

/*Holds the buttons and gives cdescription a box to be relative to*/
.cbuttonscontainer {
width: 125px;
/*height: 128px;*/
margin: 0px;
}

/*Country description positioned to the right of the buttons*/
.cdescription {
position: relative;
top: -124px;
left: 125px;
width: 210px;
height: 114px;
padding: 5px;
background-color: #993333;
background-image: url(images/wbanner_bottomcorner.gif);
background-position: right bottom;
background-repeat: no-repeat;
color: white;
}

[SuzyUK]

I forgot my manners!
Welcome to WebmasterWorld! dhammell

>>space still too big
second problem, is completely different and I didn't notice it before, it's caused by the relative positioning of

cdescription

When you position an element relatively it only "offets" the element from it's static (default) position, but the space it should be occupying in the flow of the document is "reserved" for it

try ~ instead of using the top position co-ordinate to offset it, use a negative top margin instead to physically move it upwards

.cdescription {
position: relative;
/* top: -124px; */
margin-top: -124px;
left: 125px;
width: 210px;
height: 114px;
....etc

Suzy

[dhammell]

It's working! CSS is good but it could drive you to drink sometimes.

Thanks for that Suzy, and thank you for the welcome!

[StupidScript]

Good job!

Suzy:

..zero is always zero regardless of em, cm, px etc, so it's perfectly fine to omit the unit of measure on it.

I do agree, but I just got spanked by the validator last weekend for omitting the unit of measurement on a zero-value specification. Just mentioning it. I always appreciate your words of wisdom. :)

[Fotiman]

The validator has been acting up lately. :(

[SuzyUK]

but I just got spanked by the validator

.. hehe!

anyway did it flag as an error or just a warning?

If a warning then read this recent thread on CSS Validator warnings [webmasterworld.com]

if an error I'm sure someone could find the bit in the specs as back up here :)

Suzy
still chuckling at the vision

[StupidScript]

Hmmm ... can't recall ... I "fixed" it, anyway. Me bum still smarts! ;)