Why is browser distorting images?

I have created a graphic (png) which I am placing inside a DIV tag. Looks great in design view, but when I preview in my browser (Safari) the aspect ratio seems to be changing and is being streteched. The image size and DIV size are the same, there is no padding.

Okay, here is the code:
#banner
#nav_bar
#mono_slideshow
#spacer
#welcome_text
body {
background-image: url(Images/WebBackground.png);
#welcome_text p {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
#welcome_text p {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
!Images/SciptLogoNewWeb.png|height=80|width=1177|src=Images/SciptLogoNewWeb.png!
[Galleries | #]
[Weddings | #]
[Engagements | #]
[Senior Photos | #]
[Nature | #]
[Abstracts | #]
[Architecture | #]
[Investment | #]
[Contact Me | #]
[About Me | #]
[Calendar | #]
[Proofing | #]
[Blog | #]
Thank you for visiting. John Douglas Imaging is located in Lansing, Michigan and provides photographic services to all of Michigan or your special destination. John Douglas Imaging uses state of the art photographic equipment and editing software to provide you with the best possible images. John Douglas Imaging photographs weddings, engagements, sports, family portraits, children, senior portraits, and corporate photography.
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", );
</script>
</body>
</html>
the image I'm having trouble with is in the "banner" div tag
I'm attaching the png image also.
Thanks for your help.

Similar Messages

Why are my attachment images being embedded as distorted thumbnails in the body of the text in Mac Mail?

Why are my attachment images being embedded as distorted thumbnails in the body of the text in Mac Mail? How can I attach image files as normal attachments?

Attachments – Disable Embedded Attachments

Distorted images in internet explorer, chrome, and firefox

Hello everyone.
it's my first time writing in a forum.i have just bought a dell notebook inspiron 15 which i upgrated from windows 8 to windows 8.1. (First time working with windows 8.) i'm having distorted images at some sites, double or blurry either in internet explorer
firefox or chrome. also very often i'm getting an error message that the web page cannot be viewed(in explorer) and in firefox that i should communicate with the web page in order to inform them that . when i refresh the page loads normally..so why does that
happen..is there a problem with the browsers or are the websites outdated?
In addition, web players other than youtube, like for example JWplayer start playing for a moment and then stop.After refreshing they stop at the same spot. i have the latest update of adobe flash and no problem with my internet connection.
thank you in advance
Anna, Greece
p.s i should note that i'm not very used in computer language so a simple explanation will be very welcomed. :)

Hi，
This pages all display fine in my PC, for IE, you can click Tools\Internet Options\Advanced, then under "Accelerated graphics" enable or disable hardware acceleration to check for hardware or software compatibility issues with viewing certain Internet websites.
Or under "Multimedia", enable automatic image resizing, check the result.
or clear browser history, temporary internet files, tools\internet options\general\delete... or reset IE as a test.
These are solutions for IE, since this issue happend on all browsers, I guess that it might be related with your video card--hardware device, if so, it's recommended to take this pc to a local shop to repair it.
Yolanda Zhu
TechNet Community Support

Why blank browser or Live View?

I am creating a home page with an interactive object using JQuery and Dreamweaver. I am following a tutorial and I know that the html code is correct. The problem comes when I add a CSS rule. When I add that rule, I cannot see the page displayed in Live View or my FireFox browser. I don't know how to troubleshoot that so I can determin why the browser is blank.
What do I need to do or what do I need to search to find the answer? Based on the steps in the tutorial, I have done everything. What could be missing from the tutorial?
Thanks.

This is the CSS code: I kept running into this issue after I added the .marquee_caption rule.
@charset "utf-8";
/* CSS Document */
.marquee_container {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 30px;
    margin-left: 0px;
    overflow: hidden;
    position: relative;
.marquee_photos {
    position: absolute;
    left: 0px;
    top: 0px;
.marquee_caption {
    color: #FFF;
    background-image: url(../images/template/marquee_caption-------.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    margin: 0px;
    width: 700px;
    padding-top: 15px;
    padding-right: 0px;
    padding-bottom: 10px;
    padding-left: 0px;
    position: absolute;
    left: 0px;
    top: 340px;
.marquee_caption_content {
    width: 410px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 25px;
.marquee_caption h2 {
    font-size: 1.25em;
    font-weight: normal;
    text-transform: uppercase;
    color: #FFF;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 12px;
    margin-left: 0px;
.marquee_caption_content p {
    color: #FFF;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 12px;
    margin-left: 0px;
.marquee_caption_content a {
    color: #FC0;
.marquee_caption_content a:hover {
    color: #FFF;
.marquee_caption_content .marquee_flag {
    float: left;
    margin-right: 10px;
This is the code for the html file. Everything went well until I added the third css rule for photos shown above:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>marquee</title>
<link href="includes/marquee.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="marquee_container">
        <div class="marquee_photos">
            <img src="images/photos/london.jpg" class="marquee_panel_photo" alt="London" width="700" height="350" />
        </div>
        <div class="marquee_caption">
            <div class="marquee_caption_content">
                <img src="images/template/flag_england.jpg" class="marquee_flag" alt="English Flag" width="20" height="13" />
                <h2>London</h2>
                <p>This is a test caption<br/>This is a test caption!</p>
                <p><a href="#">Check it out!</a></p>
            </div>
        </div>
        <div class="marquee_nav">
            <a class="marquee_nav_item"></a>
            <a class="marquee_nav_item selected"></a>
            <a class="marquee_nav_item"></a>
        </div>
    </div>
    <div class="marquee_panels"></div>
</body>
</html>

Distorted images???

I've just restarted aperture today and on the timeline all the thumbnail images that are portrait/upright in shape have distorted. If I click on them they gradually become normal but does anyone know why aperture is doing this and what I can do to get them all back to normal??

I am experiencing distorted images too, but my problem seems to be restricted to just some of the images from one download - all in the same project. I am keen to attempt the suggested solution above (ie generate thumbnails), but since I have just over 210,000 images in this library wonder will this solution work if I just select the photos in the affected project.
Any advice??

Why cant i upload images from pc onto website

why cant i upload images that i have browsed and selected

Hello Susan,
If you want to upload any photo into website, It depends on which website you are using. And you must be authorized for uploading images.
So can you tell here which kind of website or what was the website you were trying to upload image?

Why In-browser editing in Adobe Muse not available

Hi
Why In-browser editing in Adobe Muse not available in my program as you can confirm in the attached image?
Thanks in advance.
Best regards,
Augusto

The version of Muse that has in-browser editing will be available next week, but right now the only way to have access to that feature is to get the private beta. If you're a subscriber, wait until Monday, and you should get the update with in-browser editing.

2 out of 6 pages not loading browser background image

Does anyone know why out of 6 pages on my website, only 2 of them are not loading the choosen browser background image? All other pages load them in when uploaded to the site online. They appear to be correct in iWeb before publishing.
Once they are published, it is just white. If I select a color instead of the image, the color displays. Thoughts?
All the best
iMac G5 20 Mac OS X (10.3.9)

One more question. I know that when you publish your
site to a non .mac acct, the podcasting code needs to
be changed. Can someone help me out with that? You
click the subsribe button and it launches iTunes, but
then it errors out. Thoughts?
Your RSS URL is invalid: http://www.onetvshow.com/ONE/our%20podcast/rss.xml
www.onetvshow.com is not listed with WHOIS.
Does anyone know of a free/cheap program I can use to
edit some of the code. I need to insert some form
mail code and then also for the podcast code edits.
You are asking the wrong guy if it repetitive and on going basis, I say AppleScript

Photoshop CC distorted image when zoomed out. Text, edges and Straight lines.

I get this distorted image when working on a file. When I zoom in its fine. But as soon as I zoom out all the lines, text , and edges start to become distorted. I've checked that all my drivers are up to date. I've re installed photoshop and still the same thing. Any Suggestions. ( files look fine when saved or exported, this just happens while Im working )

That looks like a Moiré pattern. Did you scan the image?
If not, can you tell us what operating system?
And is your video card driver fully up to date from the maker's website?

My i phone 4 screen suddenly starts showing funny and distorted images then goes blank. how do i get the screen back to normal.?

my i phone screen starts blinking and showing funny and distorted images before going blank. now it's blank,how do i get it back to normal.?

Did you already try to reset the phone by holding the sleep and home button for about 10sec, until the Apple logo comes back again? You will not lose data, but a reset can cure some glitches.
If this does not work, try to set it up as new device, explained in this article:
How to back up your data and set up as a new device
Don't use the backup afterwards, to rule out a software problem. If the camera is working again, restore from the backup.

Why does the smiley images in iChat on my Macbook Pro come across as symbols to my iPad and iPhone recipients? example: 3 comes across instead of a "Heart" image

Why does the smiley images in iChat on my Macbook Pro come across as symbols to my iPad and iPhone recipients? example: <3 comes across instead of a "Heart" image

Those chat images only work with iOS based devices. If they're being sent to someone without an iOS device, it will go through as an ASCII character.

Why are my duotone images turning black and white when put in indesign?

why are my duotone images turning black and white when put in indesign?
I have been playing duo and montotone images into indesing with no trouble. Then all of a sudden as I placew them they go black and whitre. I have tried everything from re saving, re making in photoshop and differant colours et5c. But nothing seems to wrok. The images already in my document arew fine it is just new ones. If someone could help that would be great

Can you start a new document and then load one of the duotones known to be good in the working file and have it correct? If so, try one of the duotones known to be bad in the working document in the new file. Does it work?
If no to either suggestion, can you share one of the images known to be good and one known to be bad? ZIP 'em up and upload to dropbox and plop a link here. Or, to keep the file sizes down, you can quickly make a new set and provide those.
As well, the ID version and OS info would probably be helpful.
Take care, Mike

Why are my Illustrator images getting thicker strokes when I take the bounding box and make them smaller?

Why are my Illustrator images getting thicker strokes when I take the bounding box and make them smaller? This has never happened to me. I'm not an expert at Illustrator, but I do know some fundamentals.

Thank you for responding so quickly. No apologies necessary - I know this Forum isn't McDonalds - don't expect an answer to be served up right away. You helped me out with a big issue yesterday.
I am using a mac - OSX 10.7.5
I have Adobe Creative Suites - CS5 - Illustrator version is 15.0.2
The contents I am placing are all Vector - Illustrator files
But, I wonder about some of the vector files I work with. Could a "line weight/thickness" be 'assigned' to the drawing and screw things up? I used 'simple' linear (line) drawings from SolidWorks that have been converted to ai files. It's just weird because I checked the stroke of the drawing and it's not out of line.
I am attaching part of some box labels. You can see how the drawings, of the products, on the 'left side' are "thick" after embedding them. I think the "Global Logo" was pasted into a template not linked that's why it's okay. But look at the Quiet Thunder logo - it looks terrible. These labels are only 2.25" X 6.5", so its important I keep the images lightweight.
Your help is very much appreciated. Thank you!

Why are some jpg images scrambled when they appear in my screen saver? The same images look fine in Preview and Finder. Some images appear scrambled in the screen saver 'preview' window and the actual screen saver. Other jpg images look fine.

Why are some jpg images scrambled when they appear in my screen saver? The same images look fine in Preview and Finder. Some images appear scrambled in the screen saver 'preview' window and the actual screen saver. Other jpg images look fine.

The desktop image is fine, taken from the exact same pool of jpg photos. However, as soon as the slide show screen saver comes on, the images are scrambled. What is it about the apple screen saver algorithm that scrambles the pics?

FCE/DVD Slideshows - Distorted Images

Despite reading the many posts regarding pixel aspect ratios and distorted images, I remain very confused about how to solve my problem.
I use FCE to create slideshows on DVD from still photos, but try as I might, I cannot figure out how to avoid the distorted (squashed) images in the finished DVD.
I use Lightroom and/or Photoshop to edit the images, then simply import them to FCE. I export the slideshow using Quicktime Conversion, H.264 Compression, Dimensions of 1442x1080. I use iDVD to convert the QT movie to DVD, for viewing on a widescreen TV.
I've tried the different options in QT Conversion to preserve the aspect ratio, to no avail. Most recently, I used Photoshop to change the pixel aspect ratio to 0.9 in the jpeg files, but that seemed to make no difference in the distortion.
I would very much appreciate any help you could offer.
Thanks,
DBennett

I export the slideshow using Quicktime Conversion, H.264 Compression, Dimensions of 1442x1080. I use iDVD to convert the QT movie to DVD, for viewing on a widescreen TV.
This is a significant part of the problem. If you intend to make DVDs then you must export from FCE to QuickTime Movie. DO NOT export to QuickTIme Conversion. While useful for many things, QT Conversion is not useful for transferring your video to iDVD or other DVD authoring tool.
And as has been mentioned above, if you want your photos to fill a widescreen TV (ie, 16x9) then you need to start by creating a sequence using one of the highdef Easy Setups in FCE. I'd recommend either one of the 720p30 or 1920x1080i60 Easy Setups. (1440x1080 is an anamorphic Easy Setup and is probably also a source of your distortion.) Of course, your images must also be 16:9 aspect ratio if they are to fill the screen. Don't scale up the images once they are in FCE. As for image size, 1x to 2x the video frame size (in pixels) seems to be the sweet spot unless you are using a Ken Burns type of effect and need to pan across a very large surface area.

Why is browser distorting images?

Similar Messages

Maybe you are looking for