[EMAIL PROTECTED] wrote: >http://videointegrations.com/serenity/facial_rosacea_mask.html > <http://videointegrations.com/serenity/facial_rosacea_mask.html> >Well, I decided to try putting some borders into the table and it looks >decent in all but IE6;-( >Anyone got any bright ideas? > >-Scott > > Hi Scott, During a week or so I was wondering what would give the strange IE-stretching of the images on the left side of the serenity-pages, which disappeared after hovering over some link anywhere. Today I had to know! Here is the story:
*Debugging IE* *Step 1: Isolating the problemarea* Comment out parts of the page, and see if the problem is still there. If yes: in that part was the problem. If no, go on and omit more parts. > Repeat! My first thought: the strange enlarging-effect of some images in IE could be caused by something in the menu, so I dismissed the menu. Problem still onboard! - Then great steps: I dismissed the whole #AllContent. It wasn't that! - Problem can be only in something in the #Header and the classes/ID's below. - Making the area narrower and narrower ... and ... in the end there was only the image "serenity_swish.gif" and the stylesheet itself: surprise! See (in IE) example-1 <http://home.tiscali.nl/developerscorner/css-discuss/serenity_mask1.html> and source code of it. *Step 2: Collect the css* See in the stylesheet what styles can possibly can have influence on the area in which the problem is showing. > Copy that styles, and paste them as style declarations in the head of the page. > Disconnect the stylesheet. > If well done, the problem will still be there. See (in IE) example-2 <http://home.tiscali.nl/developerscorner/css-discuss/serenity_mask2.html> and source code of it. *Step 3: Isolating the problem* Now we have just the conditions and the effect conveniently arranged on one page, and now intervening/testing is easy. > If you don't see it immediately, there is always the trial and error method. > Worst case scenario: some patience, but the problem can be targeted. First thought was the particulairity of the img {width:auto;} and img {height:auto;}. Images: don't they have an auto width and height by default? So turned off both "auto"'s. Result! See (in IE) example-3 <http://home.tiscali.nl/developerscorner/css-discuss/serenity_mask3.html> and source code of it. *Step 4: Solving the problem* In this case: omitting the general "auto"'s and see if you can miss them or need them somewhere else in the page (if yes, then add a special class/ID for that). *Step 5: Documentating the problem* This is the easiest part! For safety: open your notepad and write down what problem and solution you found. Save in map "Tips and Tricks" + link to Bookmark/Favorites, in case over time x you 'll happen to get the same problem, remembering that you had solved this already some months/years ago ("but how did I do that?"). - But unless it is a small thing in a complicated css, I mostly don't need opening the safety-map: 'cause it is burned in my brains. ;-) Greetings, francky ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
