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).
CSS query: Firefox vs IE8
Moderator: General Moderators
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: CSS query: Firefox vs IE8
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.
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.
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;
}I have tried line-height, but it assigns it to the text in the box only, not the form.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: CSS query: Firefox vs IE8
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
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
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: CSS query: Firefox vs IE8
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!
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!
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: CSS query: Firefox vs IE8
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:
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
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; }
If you have multiple elements inside box1, you'll have to add up their individual heights and make sure they line up