Page 1 of 2

CSS query: Firefox vs IE8

Posted: Sun Aug 23, 2009 9:35 am
by simonmlewis
Hi all

I have a bit of a problem with DIV boxes/containers that are controlled by CSS.

Here's the CSS class:

Code: Select all

.bestsellerheader
{
background-image: url(../images/head_bestsellers.jpg);
background-repeat: no-repeat;
background-color: #EA1C22;
padding-left: 10px;
height: 31px;
font-size: 13px;
padding-top: 5px;
color: #ffffff;
}
 
In IE this works fine, you get the box, with the image in the top left just once. But in Firefox you get the space below the image because of the "padding-top: 5px". If I take the padding out, Firefox is ok, but IE places the text right at the top of the box.

Is there a good method to place the text vertically aligned. I have tried vertical-align: middle, but it fails in IE. The text remains at the top of the box.

I'm sure I am not the first to come across this.

Re: CSS query: Firefox vs IE8

Posted: Sun Aug 23, 2009 9:58 am
by dejvos
Actualy, I can't imagine the situation, but generaly it's not good idea using vertical padding (top, bottom) with height and horizontal padding (left, right) with width in one element.

It's because they (IE and FF) interpret padding different ways.

For more concrete solution, piece of code should help.

Re: CSS query: Firefox vs IE8

Posted: Sun Aug 23, 2009 10:04 am
by simonmlewis
Sorry.... not sure how your response helps.... at all.
I can see that my method isn't working - I'm after someone who has done DIVs in both browsers and got them to work.

Re: CSS query: Firefox vs IE8

Posted: Sun Aug 23, 2009 10:20 am
by jackpf
If you can't get it to work in both browsers, chances are IE's doing it wrong.

Use conditional statements to fix whatever's broken.

Re: CSS query: Firefox vs IE8

Posted: Sun Aug 23, 2009 10:24 am
by simonmlewis
Use conditional statements to fix whatever's broken.
Sorry, what do you mean? When it comes to CSS, how do you do conditional statements?

IE uses padding to move things, but doesn't add to overall size, whereas FF does. There's my problem!

I need both to position text vertically centered.

Re: CSS query: Firefox vs IE8

Posted: Sun Aug 23, 2009 10:41 am
by jackpf

Re: CSS query: Firefox vs IE8

Posted: Sun Aug 23, 2009 10:51 am
by simonmlewis
So can you put them into a CSS file? And if so, how?
Is there a particular statement for Firefox?

Re: CSS query: Firefox vs IE8

Posted: Sun Aug 23, 2009 11:43 am
by jackpf
No, you have to put them in the HTML. But you could have a conditional statement to include a stylesheet...so indirectly, yes.


And no, no other browsers support this.

Re: CSS query: Firefox vs IE8

Posted: Sun Aug 23, 2009 5:12 pm
by John Cartwright
Moved to HTML, CSS and other UI Design Technologies.

Re: CSS query: Firefox vs IE8

Posted: Mon Aug 24, 2009 12:33 am
by matthijs
Can you describe in more detail what you want to achieve? It's not clear at all what the problem is. Once it is clear, I'm sure the solution is much easier then falling back on conditional comments

Re: CSS query: Firefox vs IE8

Posted: Mon Aug 24, 2009 2:07 am
by simonmlewis
Both of the last two comments have been noted.

The third from last comment has the answer, though I don't know how to do a conditional statement for FireFox, or to save "if it is ANY IE browser, do this...".

The problem is mentioned right at the start of this topic.

Re: CSS query: Firefox vs IE8

Posted: Mon Aug 24, 2009 2:31 am
by matthijs
Sorry, the problem is not clear at all. Is it the positioning of the image? The padding in the box? The alignment of the text?

Seriously, using conditional comments is not a solution. It is a hack in case there is no other real solution

Re: CSS query: Firefox vs IE8

Posted: Mon Aug 24, 2009 2:43 am
by simonmlewis
Ok - I thought it was clear and I am not sure of any other way to describe it.

A DIV box is 31 pixels high. The text placed inside the box has to be in the centre.

In IE I can add padding and it will just push the text down without adding to the overall height.

In FF when you add padding, it DOES add to the overall height - 31 pixels plus 8px padding will make it 39pixels high.

It's either one or the other. I need a CSS solution that will make it work for both, without two stylesheets.

Re: CSS query: Firefox vs IE8

Posted: Mon Aug 24, 2009 3:28 am
by matthijs
Ok I think I get it. If it's just one line of text, what you can use is set the line-height to 32px (and no padding/margin). That way it's always centered in all browsers.

If it is more lines of text, then don't set the height but only use top and bottom padding.

Re: CSS query: Firefox vs IE8

Posted: Mon Aug 24, 2009 3:32 am
by simonmlewis
Brilliant!
So what does that do, that "height: 31px" doesn't do?

Do browsers see line-height and just automatically center it?

I don't know if you also know your "page numbering" problems, but if you do, please look at my last 'new topic', as I am doing my head it with it.

cheers.