Wed, 2017-04-19 01:19
CSS Sprites-PageBreeze1
What I am trying to accomplish is:
1. convert pictures to sprites
2. have it display correctly for different screen sizes
3. have it display correctly for different browsers (note: IE is the worst)
The website currently in tables because I could not get it to display correctly in CSS
I believe I need "if IE then ..." to display correctly in CSS
The CSS Sprites Generator:
https://www.hscripts.com/tools/css-sprites-generator/index.php
The 16 image sprite "image_3699" it is stored in "Images" folder
- - -
Any help would be appreciated
Let me know if more information is needed. If code is needed, let me know what code
Thank You
falcon
The webpage:
http://freetutorials.name/Reference1/PageBreeze%20HTML%20Editor%20Screenshots.html
The sprite
image_3699
Pagebreeze image 3699
#image1 { background-image: url(./image_3699.png); background-position: -7px 0px; width: 969px; height: 616px; }
#image2 { background-image: url(./image_3699.png); background-position: -6px -616px; width: 970px; height: 609px; }
#image3 { background-image: url(./image_3699.png); background-position: -4px -1225px; width: 972px; height: 615px; }
#image4 { background-image: url(./image_3699.png); background-position: -5px -1840px; width: 971px; height: 610px; }
#image5 { background-image: url(./image_3699.png); background-position: -5px -2450px; width: 971px; height: 617px; }
#image6 { background-image: url(./image_3699.png); background-position: -6px -3067px; width: 970px; height: 612px; }
#image7 { background-image: url(./image_3699.png); background-position: -8px -3679px; width: 968px; height: 618px; }
#image8 { background-image: url(./image_3699.png); background-position: -1px -4297px; width: 975px; height: 613px; }
#image9 { background-image: url(./image_3699.png); background-position: -4px -4910px; width: 972px; height: 612px; }
#image10 { background-image: url(./image_3699.png); background-position: -5px -5522px; width: 971px; height: 618px; }
#image11 { background-image: url(./image_3699.png); background-position: -4px -6140px; width: 972px; height: 616px; }
#image12 { background-image: url(./image_3699.png); background-position: -6px -6756px; width: 970px; height: 613px; }
#image13 { background-image: url(./image_3699.png); background-position: 0px -7369px; width: 976px; height: 616px; }
#image14 { background-image: url(./image_3699.png); background-position: 0px -7985px; width: 976px; height: 616px; }
#image15 { background-image: url(./image_3699.png); background-position: -9px -8601px; width: 967px; height: 613px; }
#image16 { background-image: url(./image_3699.png); background-position: -5px -9214px; width: 971px; height: 621px; }
Sun, 2017-04-23 20:57
#1
Making it hard on yourself
The page, as rendered, is so simple as to not need any heroic effort for it to render properly on any common browser going back to IE6.
Problems:
Tables for layout purposes was deprecated in 1996 with the introduction of CSS. IE 5/6 did have some issues due to MSFT's unwillingness to share the causes. (It seems, I guess to save money, they used a hybrid layout engines derived from desktop applications to control layout in the browser. Issue? Application containers are mostly static, while web page containers are mostly dynamic. See On having layout.)
You are using element tags and attributes that are obsolete under a transitional doctype which allows damn near anything. Things are even worse under a strict DTD, which you should use unless you are maintaining a really old page and don't want to bring it into this century. All new pages should use strict html4 or html5 markup. See W3C html validator results for html4 strict.
I don't see anything that gives reason for scripting the images. Especially since the script generates invalid markup. If there are solid reasons, please tell us.
Regarding 'browsershots', I guess these old eyes just missed it, but I could not find IE in the checklist. :Shrug:
Please try again with valid markup plus css and we can maybe fix your issue the better way.
gary