CSS Overriding Display

Aroberts2014 · February 25, 2014, 9:27am

Hi Guys, I was reading on a previous thread about the element.style overriding the CSS.
Can you guys please have a look at my website as it’s overriding my CSS…

herbertsoflondon . co . uk /services

I would be very appreciative of some assistance.
Thank You

ronpat · February 25, 2014, 10:58am

Hi, Aroberts2014. Welcome to the forums.

You’ll have to be a little clearer about the problem. Which element style is overriding what CSS?

The URL seems to be:
http://www.herbertsoflondon.co.uk/herberts-services

Aroberts2014 · February 25, 2014, 11:02am

Hi Ronpat I’m not too sure when I firebug the images it has element.style and if you look on a desktop it super sizes / stretches the images in the article. I cannot find the style doing this. sorry about the url error by the way. can you advise please??

Thanks

cssbonding · February 25, 2014, 2:35pm

Firebug is not stretching the images, it’s because you have set the size for both height and width

A big no no in image sizing is:

img{ width: 100px;
height:100px;
}

A good example is
Example:

img{width:100px;
height: auto;
}

Or

img{
width: auto;
height: 100px;
}

If you want nicely proportioned images, you would have to increase the size of the images so it can fit in the web page. The only way you can get away with that is vector images i.e. buttons

Aroberts2014 · February 25, 2014, 6:38pm

cssbonding:

Firebug is not stretching the images, it’s because you have set the size for both height and width

A big no no in image sizing is:
img{ width: 100px;
height:100px;
}
A good example is
Example:
img{width:100px;
height: auto;
}
Or
img{
width: auto;
height: 100px;
}
If you want nicely proportioned images, you would have to increase the size of the images so it can fit in the web page. The only way you can get away with that is vector images i.e. buttons

hi I think you are missing the point here. I do not want them to fill the page I want them sized as the image size itself. it was like that until I changed a css attribute but I cannot remember which one and need help finding the one causing the issue.
thanks

PaulOB · February 25, 2014, 8:19pm

Hi,

You have the images by default in your html like this:


<img width="671" border="0" height="72" style="vertical-align: middle; border: 0px none; margin: 0px; width: 100%;" alt="Services" src="http://www.herbertsoflondon.co.uk/newwebsite/images/servicesheader.jpg">

However when you open the window wider some JS runs and changes the image style to this:


<img width="671" border="0" height="72" style="vertical-align: middle; border: 0px none; margin: 0px;[B] width: 100%[/B];" alt="Services" src="http://www.herbertsoflondon.co.uk/newwebsite/images/servicesheader.jpg">

Note that the width:100% has been added dynamically by a js routine (responsive.js I expect) and thus changes the images width to be 100% of the available space while at the same time limiting the height to only 72px (as per the attribute) resulting in a long squashed looking image. You could force images to be height :auto and not get squashed but they would be very blurry on those 100% wide images.

You need to review what responsive.js is supposed to be doing as it looks a little strange to me.

I’m a little confused as you suggest it was working until you changed some css but I can’t see what css could easily over-ride that js as you would need !important to over-ride inline styles and then that means the image won’t scale down on smaller windows.

ronpat · February 25, 2014, 8:37pm

Hi, Aroberts2014. I didn’t see the problem at first because I browse with JavaScript disabled and apparently most of the content is missing from the page without JavaScript enabled. I cannot help you with the JavaScript issues.