CODEWITHSUNDEEP
htmlcss
WinWin
WinWin

Reputation: 7743

How to control font size in an eBay listing

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;">
 ...
</body>

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?

Upvotes: 3

Views: 3568

Answers (2)

Adam Bond
Adam Bond

Reputation: 41

The answers above are all incorrect, or useless.

You should make each element more specific by wrapping your entire auction code in an id element, such as straight after the < body > tag, put

<div id="myauction">

Insert your auction code here.

</div><!-- END OF MYAUCTION -->
</body>

If you find that some elements are still not working properly, then put them into yet another id element too, such as

<div id="column1">
<div class="itemdetails">
<h2>Item name</h2>
<p>Item description</p>
</div><!-- END OF ITEMDETAILS -->
</div><!-- END OF COLUMN1 -->

Then use CSS something like #myauction #column1 .itemdetails h2 {color:black; etc...} #myauction #column1 .itemdetails p {font-family:Helvetica; etc...}

That will make the h2 and p tags more specific (probably) than anything the Ebay CSS is doing to them.

Blender (above) doesn't know what he's talking about, by the way. Bad advice is worse than no advice.

Upvotes: 4

Blender
Blender

Reputation: 298432

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:

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

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

Upvotes: 6

Related Questions