Normally, I edit my external style sheet working directly within the style sheet and take advantage of Intellisense. Today I was using the Modify Styles Task Panel to make some changes and noticed that the edited styles was not quite as I expected.
Original style -
#leftColumn1 {
padding: 10px 10px 10px 10px;
background-color: #eaeff5;
float: left;
border-right: solid 1px #9bb6d2;
width: 150px;
}
After using the modify Styles Task Panel, I ended up with this:
#leftColumn1 {
padding: 10px 10px 10px 10px;
background-color: #eaeff5;
float: left;
border-right: solid 1px #9bb6d2;
width: 150px;
border-right-style: solid;
border-bottom-style: solid;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-color: #9bb6d2;
border-bottom-color: #9bb6d2;
I now have double styles for the right border – one in shorthand one not – and a bottom border set of rules which is not in shorthand.
Since this is not what I wanted or expected, I went it search of an answer. Chris Leeds led me to this What’s the deal with multiple background properties in a double nested list in the CSS Properties task pane?
Following his instructions, I can use the CSS Properties Task Panel (expanded) to accomplish the style rules written in shorthand OR edit the style sheet itself which for me is easier.
#leftColumn1 {
padding: 10px 10px 10px 10px;
background-color: #eaeff5;
float: left;
border-right: solid 1px #9bb6d2;
border-bottom: solid 1px #9bb6d2;
width: 150px;
}
Chris Leeds is the author of the series of books on Expression Web
- Expression Web Step by Step (Microsoft Press)
- Expression Web 2 Step by Step (Microsoft Press)
He is also the developer of ContentSeed, a content management system.
