CSS query: Firefox vs IE8

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

CSS query: Firefox vs IE8

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
dejvos
Forum Contributor
Posts: 122
Joined: Tue Mar 10, 2009 8:40 am

Re: CSS query: Firefox vs IE8

Post 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.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: CSS query: Firefox vs IE8

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
jackpf
DevNet Resident
Posts: 2119
Joined: Sun Feb 15, 2009 7:22 pm
Location: Ipswich, UK

Re: CSS query: Firefox vs IE8

Post 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.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: CSS query: Firefox vs IE8

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
jackpf
DevNet Resident
Posts: 2119
Joined: Sun Feb 15, 2009 7:22 pm
Location: Ipswich, UK

Re: CSS query: Firefox vs IE8

Post by jackpf »

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: CSS query: Firefox vs IE8

Post by simonmlewis »

So can you put them into a CSS file? And if so, how?
Is there a particular statement for Firefox?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
jackpf
DevNet Resident
Posts: 2119
Joined: Sun Feb 15, 2009 7:22 pm
Location: Ipswich, UK

Re: CSS query: Firefox vs IE8

Post 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.
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: CSS query: Firefox vs IE8

Post by John Cartwright »

Moved to HTML, CSS and other UI Design Technologies.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: CSS query: Firefox vs IE8

Post 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
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: CSS query: Firefox vs IE8

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: CSS query: Firefox vs IE8

Post 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
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: CSS query: Firefox vs IE8

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: CSS query: Firefox vs IE8

Post 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.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: CSS query: Firefox vs IE8

Post 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.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply