Solved

How to display Images uniformly over Browsers?

Posted on 2016-07-22
6
83 Views
Last Modified: 2016-08-05
I had this question after viewing HTML rendered differently in IE and Firefox.
My code below produces different results, see attached.
The following ASP code produces different results in IE, and Firefox,  or Chrome.
How do I make the results uniform? Here is my code:
An image is displayed by the HTML page:
<div class="InnerLeft" id="div1" style="border-style: hidden; border-color: #FFFFFF; width: 180px; height:639px; top: 50px; background-color: #FFFFFF; width: auto">
<img id="pic1" class="centered-and-cropped" style="javascript:resizeEventHandler(); margin-right: 1px;margin-left:1px;" />
</div>
The CSS Style:
div.InnerLeft {
        border-style : none;
        border-color: inherit;
        border-width: medium;
        width: 15%;
        position: fixed;
        float: left;
        left: 0px;
    }
/* pictures to crop */
    #pic1.centered-and-cropped { object-fit: cover;margin-top:auto; }
The Java Script:
function resizeEventHandler(div2) {
        var docWidth = document.documentElement.clientWidth;
        var docHeight = document.documentElement.clientHeight;
var img = document.getElementById("pic1");
        img.style.visibility = "hidden";
        img.style.width = "97%";
        img.style.height = "25%";
        }
PicDispaly.docx
0
Comment
Question by:josephdts
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 41725297
Please don't post Word files like 'docx' in your questions.  They make it more difficult because they have to be opened in another program.
0
 
LVL 83

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 250 total points
ID: 41725301
This has been a problem forever.  Eric Meyer came up with a 'CSS reset' that is designed to remove almost all of the differences in padding and margin between the browsers.  Following that, you can apply your own CSS which will be more likely to produce the same results in all browsers.  http://meyerweb.com/eric/tools/css/reset/
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 41726155
Your best bet will be to create a sample page with just this basic script, upload it to your site and give us the link.  Either that or create the code in a playground like jsbin, jsfiddle or codepen.

Quickly, you are using image height and width as a percentage.  If you are going to work with percentage, then just set the width and let the height adjust as needed. (or vice versa).  If you want to maintain exact dimensions, then set the size of both inn pixels.

The reason you are having issues is probably because each browser has it's own defaults and your height and width dimensions may be a percent of a different physical size which is why Dave is offering the reset.

If you are trying to make your site responsive for mobile and desktop, try using either bootstrap http://getbootstrap.com/ or foundation http://foundation.zurb.com/.  The core of each is a responsive css grid (and reset) that takes care of adjusting sizes.

Also, you can't get wrapped up in exact size with web.  Leave that for your print products.  There are currently over 1000 different display sizes from 300 px wide to 3000 and all different ratios plus portrait and landscape. Some people have new high resolution displays' and then zoom in because of their presbyopia.  All of this changes how things are displayed so don't try and drive yourself nuts.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 34

Expert Comment

by:Slick812
ID: 41726735
greetings josephdts, , I looked at your code work above, and can not understand what you are trying to do, in your javascript, you do not seem to do anything usefull -
function resizeEventHandler(div2) {
        var docWidth = document.documentElement.clientWidth;
// you get the client width and height , BUT NEVER use them, WHY?
        var docHeight = document.documentElement.clientHeight;

var img = document.getElementById("pic1");
// you hide the image with every Resize, WHY?
        img.style.visibility = "hidden";

        img.style.width = "97%";
//You use the same dimensions % here for every resize, WHY?
        img.style.height = "25%";
        }

Open in new window


In your CSS, you have unfounded and even conflicting css sets, you go all over the place with your BORDER sets in the -
<div class="InnerLeft" id="div1" style="border-style: hidden; border-color: #FFFFFF; width: 180px; height:639px; top: 50px; background-color: #FFFFFF; width: auto">

and in the InnerLeft CSS, you have the   border-style: hidden;  which means there is NO Border displayed, and then you set a border color, that can not be seen , WHY?

in the style for your <div> you set it to NON RESPONSIVE, fixed width and height as
    width: 180px; height:639px;
and you go to a ton of trouble in your CSS and javascript for a RESONSIVE image in width changes, but the <div> width never changes, so the responsive for image is a waist of time. . . . and , all your non-standard CSS and javascript, seems like no browser could correctly display the mixed up code work you use.  What are you trying to achieve in your display, surlely you must need a Responsive display for your <div> image container?
0
 
LVL 110

Accepted Solution

by:
Ray Paseur earned 250 total points
ID: 41740586
I think you've gotten pretty good answers to the question (basically, you've got "more" code when "less" would be better) so I don't really have anything to add to the explanations.  But I do have this scalable, floating Grumpy Cat.  It's completely self-contained, and you can use view source to see how it works.
https://iconoun.com/demo/grumpycat.html
0
 

Author Comment

by:josephdts
ID: 41744845
I ended up using  img.style.minHeight and minHeight style properties for img object in JavaScript to produce reasonable results, even though not completely the same across browsers. To achieve better results, I basically have to ditch the old code completely.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question