Double CSS Style rules

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.

Speak Your Mind

*