How to REALLY control font size in an eBay listing [closed]

Tags: html,css,ebay

Problem :

I am trying to control font size in an eBay listing such that it will look the same (more or less) on Firefox and Internet Explorer 8.

To simplify things I just specify a single font size for the entire body text:

<body style="font-family: Verdana; font-size: 12px;">

Yet, while locally (on my PC) the font looks as I want it to look like:

Firefox 3.6:

enter image description here

Internet Explorer 8:

enter image description here

On eBay itself, the font looks much bigger (which is not what I want):

Firefox 3.6 on eBay:

enter image description here

Internet Explorer 8 on eBay:

enter image description here

I tried of course different font-size unit specification (em, %, etc.) but the discrepancy remains.

Why is this happening and how can I get around this (without resorting to posting an image of the text...).

I understand that there might be some collision between eBay's CSS and my HTML (I don't use any CSS, I only use inline style!), but I don't know how to tell eBay not to override my style.

Any idea how to overcome this?

Solution :

Might be a dirty trick, but have you tried overwriting the CSS using the !important declaration?

Like so:

foo: bar !important;

I would suggest you open up Firebug on Firefox (or Chrome's inspector on Google Chrome) and see what styles are overwriting the ones you added.

Another thing to try is adding those styles (the whole style= attribute) to the text blocks itself. If that works, your code just isn't specific enough.

Your problem seems to be selector specificity. Here's what that means:

If I have CSS which applies to all of the elements in a document:

body * {
  foo: bar;

It will be overridden by a more specific selector, like this:

body p {
  foo: baz;

Because the p is selecting a specific element, while the * broadly selects all of them.

When you apply the style= attribute, like this <body style="..., you are making that CSS very unspecific, like the first chunk of code.

Instead, apply the style= attribute to your HTML:

  <p style="...">My content</p>

Try to get it as specific as possible, as specific selectors override non-specific ones.

    CSS Howto..

    How to center align text over CSS shape?

    How to get two results with one button using CSS & Jquery

    How do I change the MVC Bootstrap layout to have more than one columns

    How to Slide or Move this Set of Divs

    How to separate content and presentation layers on JSPs?

    How can I set a height, or allow a div to extend to the height of absolutely position elements within?

    How to asynchronously load CSS using jQuery?

    How a checkbox will trigger another input element in html via javascript?

    how to zoom in an image and center it

    Load More / Show Less issues using jquery

    How to make submenus drop down below parent menu, instead of flying out?

    How to reference a long class name with spaces in CSS?

    How to add spacing to text start in css

    How to apply css selector in ZK

    How to center part of a navbar

    How to change content of a div by clicking a button outside the div?

    How to Change Font-family using JQuery's .css() function?

    how change all fonts of a telerik control by one shot

    How to line up images in a horizontal row with CSS?

    How do I use CSS to to vertically center align an image in a div?

    How to recalculate css vw and vh values after resizing?

    How to align content of a div to the bottom?

    CSS + Show Animated GIF while Loads

    How do I add colored corners to a background image?

    how to create a tirangle and square with ccs only?

    How to pause .setInterval() on hover and on .click() of interior content?

    How to get all CSS of element

    How to make sidebar horizontal for xs devices

    meteor: how to use multiple classes in css selector

    How to make a custom select option menu style without image in CSS?