CSs over-rides source code on image size?

HTML & CSS
1

Am I correct to believe that css can overide the source code?

In a WordPress install I have a page with hand-coded html in which images are set to display at 100px - but they’re showing in a browser at 150px, despite the source code also showing 100px.

Why? I’m assuming the size is being over-ridden by something in the WP css.

Only by setting a width and height in their css attribute can I get them to display at the intended size (and as shown in the source).

Css over-riding source seems to be the logical answer.

2

Have you tried using a tool like firebug for firefox or developer tools for chrome? You can highlight the image and have it show you which CSS rules have been applied to the element.

Good luck.

3

Yes, most likely. CSS styles will override those in the HTML. As kish, use a tool like Firebug, or some browsers (like Chrome and Safari and Opera) allow you to right click and “inspect element”, in which case you’ll be shown where the style on the img is coming from. And there are developer tools for IE, too, which you can install.

4

Yes css will win out over html attributes.

e.g.


td {border:1px solid #000}
table { width:100px}



<table width="500">
    <tr>
        <td>test</td>
    </tr>
</table>

The table will be 100px. Css was designed with this in mind so that old fashioned deprecated mark up could be over-ridden by default with css.

Therefore if your image dimensions are specified in the css then they will win out.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
img {
    width:500px;
    height:500px;
    display:block;
    background:red
}
</style>
</head>
<body>
<p><img src="img.gif" alt="" width="100" height="100" /></p>
</body>
</html>
5

Thanks, all.

And sorry for the slow response - wasn’t geting the email notifications, so checked and changed my email address and then I was blocked from posting pending my reply to the ‘verify’ email they sent (and which I didn’t get). Anyway…

Kish and ralph.m: > Have you tried using a tool like firebug for firefox or developer tools?

Yes, I use Web Developer in Firefox. And there was nothing immediately obvious in the css that’d cause such an issue.

And since my initial post, I viewed with ‘no style’ - and had the same issue… so figured it couldn’t be css.

Then… having, in bemusement, wondered if php/js could resize the image to display at a different size, I isolated this on a test page totally independent of WP and had the same issue.

With hindsight, this should have immediately suggested a browser cache issue, but, in brain-melt wtf now?-mode I wasn’t thinking clearly enough to recognise that… moreso as I did the usual shift-refreshing the page multiple times, and then emptying the cache, all to no bl**dy avail.

I’d thought page-caching wasn’t the issue as I added text to the page content and the new displayed fine with a refresh whilst the image stayed the same. And even when changing the image size in the code, even on shift-refresh it still loaded the image as before.

And, oh what fun… clearly this was an isolated issue - as a further shift refresh loaded the revision and Firefox now loads further revisions immediately and without issue. So then, lesson learned. :wink:

Paul: Thanks. And ‘well, I’m b*ggered’… I now know css does override html. A useful lesson - thanks.

Now, what else don’t I know about css? (…seriously, before posting I googled ‘css override html’ and similar but found nothing).