Page 2 of 2
Re: CSS query: Firefox vs IE8
Posted: Mon Aug 24, 2009 4:18 am
by matthijs
The line-height sets, well the line-height of the paragraph. So say that you have set that to 18px, with a font-size of 12px in the body. Now if you have one line of text inside a box of 32px height, it will stack up to the top of the box, and you'll have 32-18=14px of space below the paragraph. Instead if you take a line-height of 32px, the paragraph will take up the full height of the box. (even better not to set the height of the box at all, since the paragraph line-height will make the box as high as that already).
As you've noticed IE can be tricky dealing with margins and paddings (do a google for margin-collapsing for example).
Re: CSS query: Firefox vs IE8
Posted: Mon Aug 24, 2009 9:35 am
by simonmlewis
This works only if the box has text-only inside it.
I now have a box that has a <form> on one line, then text on the next line.
This is the CSS.
Code: Select all
.searchbox
{
background-image: url(../images/navbkrndsearch.jpg);
background-repeat: repeat-x;
width: 220px;
height: 47px;
float: right;
text-align: right;
padding-right: 15px;
}
The contents of the box are at the top, so looks all wrong.
I have tried line-height, but it assigns it to the text in the box only, not the form.
Re: CSS query: Firefox vs IE8
Posted: Mon Aug 24, 2009 10:14 am
by matthijs
Why the need for the fixed height? In general, try not to set heights on things. Let boxes expand with the content they have. Makes everything much easier. So say you have a box with something in it, be it another box, text, forms etc doesn't matter. Now if you do not set a fixed height on the outer box, but only a padding, everything inside matches nicely.
In case you do want to set a fixed height of a box, then you might as well make everything in it fixed height as well. And then it's easy to center or align everything. You might even use absolute positioning. But again, that's normally not what you want
Re: CSS query: Firefox vs IE8
Posted: Mon Aug 24, 2009 11:00 am
by simonmlewis
Well I am not particularly looking for a height here, (though it does have to be a set height). It's moreso the position of the form and text inside the box. Which is what I said a few comments ago.
The text and form need to be vertically centered.
About NOT setting heights - sometimes to have a good design, you have to have set heights so all boxes are the same and look better. If they are all over the place, they look rubbish!
Re: CSS query: Firefox vs IE8
Posted: Tue Aug 25, 2009 12:42 am
by matthijs
Then what I would advise you is get a good book on CSS and study the box model concept very well. And then read about how - sometimes - internet explorer misses a thing. Luckily it's mainly IE6 which screws things up, and it's (almost) time to stop supporting that browser. It's all not very complicated matter, but you have to understand how margins, paddings, heights, boxes, the document flow, positioning, etc really work. Otherwise with each and every page you create there will be a couple of things a few px off.
For this particular situation:
Code: Select all
.box1 { height:200px;position:relative; }
.box2 { height:160px;position:absolute;top:20px; }
// or
.box1 { height:180px;padding-top:20px; }
.box2 { height:160px; }
now box2 will be centered.
If you have multiple elements inside box1, you'll have to add up their individual heights and make sure they line up