Solved

How to display Images uniformly over Browsers?

Posted on 2016-07-22
6
66 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
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 52

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 33

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 108

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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 Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

930 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now