I'm in the process of redoing one of my websites using EW. The website was created and maintained with FP.

I've begun to create some master pages (which will become templates) and am having several difficulties. The one, described, here, relates to a problem with padding in an unordered list in IE7. You can see the problem in IE7 by viewing http://www.enfolded.info/references/refPhilosophyError.htm  (compare it to what happens in in Opera and Firefox). The relevant code in this file is,

.cat ul {
list-style-type: none;
margin: .0px;
padding: .2em .2em .2em 1em;
line-height: 2em;
}

The workaround I discovered is to split the spacing between margin and padding, i.e.,

.cat ul {
list-style-type: none;
margin: 0 0 0 .5em;
padding: .2em .2em .2em .5em;
line-height: 2em;
}


the results of which can be seen by veiwing <URL: http://www.enfolded.info/references/refPhilosophyError.htm > (compare it to what happens in in Opera and Firefox).

You should, too, note that there is also a problem in IE7 with the rendering of the sidebar background-color.

Any comments on the padding problem and suggestions for fixing the sidebar background-color problem?

BTW, I tried long and hard to use <div>s rather than a table for the reference entries, but despite days of trying different layouts, I couldn't make them stable, given the varying lengths of text: I'd think I had it right, add another entry with either longer or shorter text and--bingo!--the structure for the entire page fell apart. If you have the secret for doing this type of page without a table, I'd love to see the solution. Keep in mind, I regularly update reference pages with new reference entries, inserted where most appropriate on the page.

BTW2, FWIW, unordered list inlines and floats do not render properly in the FP design window. You can see what I mean by viewing <URL: http://www.enfolded.info/references/refPhilosophy.htm > in FP.

-Tom

You problem arises from a combination of issues. First you have invalid CSS and have not used classes correctly in your html. You applied class=".cat ul" which is a contextual selector. Firefox ignores it while IE tries to do what it thinks you want it to do so that's why you have extra space there.

There is code that does not belong in the classes such as z-index (only use it on position absolute) and have divs where you shoud be using structural htlm such as your categories section title. Use an h2 or h3 there with your class. You don't need the div around the ul in the rightpanel and that adds its own browser specific margin and padding.

 My recommendation is to simplify your css a lot. Put your font in your body definition for example and you won't need to repeat it in every other definiton on the page. Use contextual selectors properly and you won't need classes on every one of your links.

Hi Tom,

Please excuse this reply if it appears duplicated. The last time I tried to post, it logged me back in and the post disappeared. I don't think it got sent, so here goes again.  :)

As Cheryl has stated, you need to alter the HTML so that only the ".cat" class is applied to the Div, and not as ".cat UL".

Also, as you have discovered yourself, IE7 appears to have a display bug with lists within Divs, which is fixed by specifically declaring a left margin property for the list:

div ul {margin-left:0px;}

 As to your sidebar background color problem, I can't see it on IE7 or FF (2.0.0.6). They both display the background color of the "rightPanel" div as expected. Would you please explain what you expected to see, and what you do see instead?

Tables ARE the recommended method for displaying tabular data, such as you have done with the book images and descriptions.

Regards,

Colin Ramsden

http://www.lotechsolutions.com