SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Overriding Display

    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

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    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

  3. #3
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2014
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    img{ width: 100px;
    height:100px;
    }
    A good example is
    Example:
    Code:
    img{width:100px;
    height: auto;
    }
    Or
    Code:
    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

  5. #5
    SitePoint Member
    Join Date
    Feb 2014
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cssbonding View Post
    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:
    Code:
    img{ width: 100px;
    height:100px;
    }
    A good example is
    Example:
    Code:
    img{width:100px;
    height: auto;
    }
    Or
    Code:
    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

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,494
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    Code:
    <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:

    Code:
    <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">
    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.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •