Solved

How to display Images uniformly over Browsers?

Posted on 2016-07-22
6
84 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
[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

 
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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

617 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