Highlighted

max-width blury

New Here ,
Apr 01, 2020

Copy link to clipboard

Copied

I've just recently changed my entire 490,000+ page site to a responsive web design. In Dreamweaver, I use a vertical split, code-design view. On the design side, the images are now blurry. Here is an example:

 

Screen Shot 2020-04-01 at 8.00.21 AM.png

 

The code I'm using for the img:

 

<img src="/checkmark.gif" style="max-width: 13px; margin: 0 auto; display: inline-block; vertical-align: middle" alt="Baseball Almanac Checkmark" />

 

The actual size of the image is 13x13, but as you can see it is displaying in the design view blurry.

 

Any ideas why / how to fix? If I remove the max-width line completely, same thing, blurry image.

 

Sean

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

You have conflicting styles in your stylesheet which is at the source of your problem. See screenshot from Firefox Inspect Element (F12).

 

image.png

 

Width: 100% is grossly distorting low res images.  Change width to max-width or remove that style entirely.

 

Views

359

Likes

Translate

Translate

Report

Report
This conversation has been locked.

max-width blury

New Here ,
Apr 01, 2020

Copy link to clipboard

Copied

I've just recently changed my entire 490,000+ page site to a responsive web design. In Dreamweaver, I use a vertical split, code-design view. On the design side, the images are now blurry. Here is an example:

 

Screen Shot 2020-04-01 at 8.00.21 AM.png

 

The code I'm using for the img:

 

<img src="/checkmark.gif" style="max-width: 13px; margin: 0 auto; display: inline-block; vertical-align: middle" alt="Baseball Almanac Checkmark" />

 

The actual size of the image is 13x13, but as you can see it is displaying in the design view blurry.

 

Any ideas why / how to fix? If I remove the max-width line completely, same thing, blurry image.

 

Sean

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

You have conflicting styles in your stylesheet which is at the source of your problem. See screenshot from Firefox Inspect Element (F12).

 

image.png

 

Width: 100% is grossly distorting low res images.  Change width to max-width or remove that style entirely.

 

Views

360

Likes

Translate

Translate

Report

Report
Apr 01, 2020 0
Adobe Community Professional ,
Apr 01, 2020

Copy link to clipboard

Copied

Something else in your code is allowing your images to be displayed much larger than 13x13 pixels, causing major pixelization.

Could you share a link to your page online so we could take a look?

Likes

Translate

Translate

Report

Report
Apr 01, 2020 0
New Here ,
Apr 01, 2020

Copy link to clipboard

Copied

That particular page, that I was using as an example, is here:

 

Mitchell Report

 

Sean

Likes

Translate

Translate

Report

Report
Apr 01, 2020 0
Adobe Community Professional ,
Apr 01, 2020

Copy link to clipboard

Copied

I'm seeing the correct size in the browsers, but your page does have a fair number of errors that should be cleaned up to ensure all browsers see it as intended. Run your pages through the validators at...

HTML: https://validator.w3.org/nu/

CSS: https://jigsaw.w3.org/css-validator/

...and repair the listed problems. That will at least make sure you have the most consistent experience possible for your viewers. As for DW's Design View, sometimes it just won't display correctly, especially when you use old html attributes and css to control the layout and styles of a page.  

Likes

Translate

Translate

Report

Report
Apr 01, 2020 1
New Here ,
Apr 01, 2020

Copy link to clipboard

Copied

Thank you Jon,

 

Yes, I tested it on a dev server for a month. I knew it was displaying correctly on all browsers, tablets, and modern smartphones. Just annoyed the heck out of me that when I work on it in Dreamweaver, it looks ridiculous. Nearly every image on every page is like that as well.

 

I figured since CSS is not my strong suit, I might have been missing an easy solution. Heck, I'm not even great with Dreamweaver, I just manage to struggle through it, since 1999!

 

That is why you saw those errors. I literally, two weeks ago, converted 490,000+ pages from an old school table based site that was using a fake mobile solution, to that responsive design (which I started working on back in October). When I get the bugs worked out on the pages and databases this month, I'll go back and get that CSS as perfect as possible.

 

Until then, will just keep working with horribly out of focus images that display as intended, and worked before in DW, but not anymore. LOL

 

Sean

Likes

Translate

Translate

Report

Report
Apr 01, 2020 0
Adobe Community Professional ,
Apr 01, 2020

Copy link to clipboard

Copied

Font Awesome icons instead of raster images. No pixelation at any size.

 

Font Awesome iconsFont Awesome icons

 

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Font Awesome Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Font Awesome-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<style>
i {color:green}
</style>
</head>

<body>
<h3>These are Font Awesome Icons.</h3><p>No pixelation at any size</p>
<p><i class="fa fa-5x fa-check"></i></p>
<p><i class="fa fa-4x fa-check"></i></p>
<p><i class="fa fa-3x fa-check"></i></p>
<p><i class="fa fa-2x fa-check"></i></p>
<p><i class="fa fa-sm fa-check"></i></p>
<p><a href="https://fontawesome.com/v4.7.0/cheatsheet/">Font Awesome Cheat Sheet</a></p>
</body>
</html>

 

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Apr 01, 2020 1
New Here ,
Apr 10, 2020

Copy link to clipboard

Copied

Those are really cool Nancy, but it isn't just checkmarks, its almost ALL the images on ALL the pages inside of Dreamweaver that I use. The checkmark one was just a sample. The baseball at the bottom of every single page (490,000 of them) even displays stretched out oddly inside of DW, but the typewriter on the top of every single page, displays perfectly...

Likes

Translate

Translate

Report

Report
Apr 10, 2020 0
Adobe Community Professional ,
Apr 10, 2020

Copy link to clipboard

Copied

A very low resolution GIF will look blurry when your display magnification is greater than 100%.  In contrast, the higher resolution PNG maintains a decent appearance because it contains more pixels to begin with. 

 

Revert your display settings to normal magnification level. 

In DW, go to View > Design View Options > Magnification > 100% [Ctrl + 0 (zero)].

 

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Apr 10, 2020 0
New Here ,
Apr 10, 2020

Copy link to clipboard

Copied

Not that either. It's on virtually EVERY image. HUGE ones. Tiny ones. I've never switched the Magnification in DW. I think it has something to do with the css, it NEVER did this before, not on a single image, but now that I've put in a ton of styles, I get the distorted view:

 

Screen Shot 2020-04-10 at 1.05.05 PM.png

 

Now, here is a screenshot of the old site, same are in designer, no CSS in place, just good old fashioned html:

 

Screen Shot 2020-04-10 at 1.08.44 PM.png

 

Checkmarks, in DW, look perfectly fine.

Likes

Translate

Translate

Report

Report
Apr 10, 2020 0
Adobe Community Professional ,
Apr 10, 2020

Copy link to clipboard

Copied

You can find out if the distortion is caused by your CSS simply enough. 

Go to View > Design View Options > Style Rendering > disable Display Styles.

Incidentally, this has no effect on Live view, Real-Time Preview or Preview in Browser.

 

BTW, fix your code errors. You still have quite a few in your HTML and CSS.

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Apr 10, 2020 0
New Here ,
Apr 10, 2020

Copy link to clipboard

Copied

Did what you suggested:

 

Go to View > Design View Options > Style Rendering > disable Display Styles

 

Checkmark displays perfectly fine. So it is in the style sheet. The code for that are:

 

<td class="datacolBox"><img src="/checkmark.gif" style="max-width: 13px; margin: 0 auto; display: inline-block; vertical-align: middle" alt="Baseball Almanac Checkmark" /></td>

 

And in my style sheet I have:

 

.datacolBox { vertical-align: middle; padding: 4px; font-size: smaller; border-color: black; border-style: solid; border-width: 1px; }

 

Any ideas?

 

Sean

 

PS: The site was built back in 1999. Updated every day since. Lots of evolution there by a guy with twenty years plugging away with various tools. So it does have lots of errors. I'll be fixing some of those errors soon, just takes time, I've got a half million pages...

Likes

Translate

Translate

Report

Report
Apr 10, 2020 0
Adobe Community Professional ,
Apr 10, 2020

Copy link to clipboard

Copied

You have conflicting styles in your stylesheet which is at the source of your problem. See screenshot from Firefox Inspect Element (F12).

 

image.png

 

Width: 100% is grossly distorting low res images.  Change width to max-width or remove that style entirely.

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Apr 10, 2020 2
New Here ,
Apr 11, 2020

Copy link to clipboard

Copied

Switched to max-width, every single image "fixed" itself inside of DW. So much easier to work now. Just a few more thousand errors to get corrected now!

 

Thank you VERY MUCH Nancy.

 

Sean

Likes

Translate

Translate

Report

Report
Apr 11, 2020 0