A quiet house today I was on my own. I spent a good six hours playing with cascading style sheets. I have bought a book! I spent some time four years ago looking at how to use them and then suggested a design for the school web site- it is still used today. I want to know more about cascading style sheets so as to be able to create a number of weblogs for different uses, style sheets will control how they look. The principle appears simple. Style sheets are just rules on how a browser should present the code that it receives. Styles can be placed in a separate sheet, as the heading of a document or as part of a tag. You can place contradictory rules, for example blue text for headings in a separate file then later you can specify that text for headings should be red. The instruction closest to the tag is the one that is implemented. OK, so it sounds easy, but experience suggests it is going to be tricky - like learning to read a skill I never fully got the hang of!
The first hour or so were fine I read a bit, played a bit, then made a test weblog and started changing things. What helped me here was this article that told me about Movable
Type's IDs, Divisions and Classes. I thought I was flying, in fact after three hours I had a layout that I had chosen, I am not saying it was well designed but I had chosen it. It looks like the layout I am using now but all the lines matched and defined the different areas. Then I had a thought, what will it look like in Microsoft Explorer? You guessed? Most of the lines did not join up in the same way as they do in Netscape, the fonts were of a different face and size. In other words useless. I persisted and made a number of compromises. The solution I have come up with, and it may well be a poor one, is to place a style sheet in the header of a template and let it render the text and control the size of margins, borders and padding. The last three items are another problem as it takes some time to understand how they differ.
I am left with a number of questions:
Has Movable Type been designed with Netscape in mind?
Does Netscape keep to the agreed standards and Microsoft Explorer not?
What would my weblog look like in other types of browser or older versions of Microsoft Explorer or Netscape?
Am I using a variety of units e.g. px and "small" x-large that are confusing things?
I suspect it is Microsoft products not keeping to the accepted standards but I do not know for sure. I am definitely suspicious!
I then went for a cycle ride with Lynne it cleared the head.
Posted by mikec at August 19, 2003 09:55 PMMike here is one that I have been developing:
A {
FONT-WEIGHT: bold; COLOR: #999999; TEXT-DECORATION: none
}
A:hover {
COLOR: #000000; TEXT-DECORATION: none
}
BODY {
FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
TD {
FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
.lhs {
BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 11px; BORDER-BOTTOM-WIDTH: 1px; WIDTH: 121px; PADDING-TOP: 5px; BACKGROUND-COLOR: #eeeeee; TEXT-ALIGN: right; BORDER-RIGHT-WIDTH: 1px
}
.lhsad {
BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 11px; BORDER-BOTTOM-WIDTH: 1px; WIDTH: 121px; PADDING-TOP: 5px; BACKGROUND-COLOR: #eeeeee; TEXT-ALIGN: right; BORDER-RIGHT-WIDTH: 1px
}
.lhsb {
PADDING-RIGHT: 6px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; PADDING-TOP: 2px
}
.lhssq {
PADDING-RIGHT: 6px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; BACKGROUND-REPEAT: repeat-y; BACKGROUND-COLOR: #999999
}
.lhssqs {
PADDING-RIGHT: 6px; FONT-WEIGHT: bold; BACKGROUND-IMAGE: url('http://newsimg.bbc.co.uk/nol/shared/img/nav/v3_990033_square.gif'); PADDING-BOTTOM: 2px; PADDING-TOP: 2px; BACKGROUND-REPEAT: repeat-y; BACKGROUND-COLOR: #999999
}
.lhslt {
PADDING-RIGHT: 6px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; BACKGROUND-COLOR: #cccccc
}
.lhsdl {
PADDING-RIGHT: 6px; FONT-SIZE: 11px; COLOR: #999999
}
.lhsnlp {
PADDING-RIGHT: 6px; FONT-WEIGHT: bold; FONT-SIZE: 10px; PADDING-BOTTOM: 2px; COLOR: #999999; PADDING-TOP: 2px
}
.lhsmi {
BACKGROUND-COLOR: #cccccc
}
.lhsl {
PADDING-RIGHT: 6px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px
}
.lhsbsn {
PADDING-RIGHT: 6px; FONT-WEIGHT: bold; BACKGROUND-IMAGE: url('http://newsimg.bbc.co.uk/nol/shared/img/nav/v3_990033_square.gif'); PADDING-BOTTOM: 2px; PADDING-TOP: 2px; BACKGROUND-COLOR: #cccccc
}
.lhs A:visited {
COLOR: #000099
}
.smalltext {
FONT-SIZE: 9px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
.dakota {
FONT-SIZE: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif
}
.angels {
FONT-SIZE: 9px; FONT-FAMILY: Arial, Helvetica, sans-serif
}
.subheadline {
FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #6487dc; FONT-FAMILY: Helvetica, Verdana, Arial, sans-serif; TEXT-DECORATION: none
}
.subheadline:hover {
COLOR: #e60000
}
.sectionheading {
FONT-WEIGHT: bold; FONT-SIZE: 16px; COLOR: #6487dc; FONT-FAMILY: Helvetica, Verdana, Arial, sans-serif; TEXT-DECORATION: none
}
.strap {
FONT-WEIGHT: bold; FONT-SIZE: 14px; COLOR: #6487dc; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.maxheadline {
FONT-WEIGHT: bold; FONT-SIZE: 36px; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.headline {
FONT-WEIGHT: bold; FONT-SIZE: 24px; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.indexname {
FONT-WEIGHT: bold; FONT-SIZE: 18px; COLOR: #000069; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
.codetext {
FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: Courier New, Courier, mono; TEXT-DECORATION: none
}
.bannerlink {
FONT-WEIGHT: bold; FONT-SIZE: 13px; COLOR: #ffffff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
.bannerlink:hover {
COLOR: #000069; TEXT-DECORATION: underline
}
.columnlink {
FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #ffffff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
.columnlink:hover {
COLOR: #e60000; TEXT-DECORATION: none
}
SELECT {
FONT-SIZE: 11px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
INPUT {
FONT-SIZE: 11px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
UNKNOWN {
FONT-SIZE: 9px; COLOR: #000000; LINE-HEIGHT: 12px
}
.llitem {
FONT-SIZE: 11px; COLOR: #000000; LINE-HEIGHT: 12px
}
.fontsize1 {
FONT-WEIGHT: bold; FONT-SIZE: 65%; COLOR: #ffffff; FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif
}
I have just been on the support forum for Movable Type. It is interesting to note the number of people having problems with IE6 and display problems. I have just looked at my version it is IE5. I basially do not know what you lot out there are seeing!
Posted by: Mike Chapman at August 19, 2003 11:30 PMHere's my take on the subject:
Q. Has Movable Type been designed with Netscape in mind?
A. I believe the Movable Type templates are designed for browsers which support web standards. It happens that Netscape/Mozilla have been more standards compliant than Internet Explorer (IE).
Q. Does Netscape keep to the agreed standards and Microsoft Explorer not?
Y. Well, partly so. One well-known example is that styles like {border: 1px dotted #000} display as dashed in IE. It also causes rendering problems.
Q.What would my weblog look like in other types of browser or older versions of Microsoft Explorer or Netscape?
A. The best thing is to install these other browsers and test them out. The next most popular browser after IE and Netscape is probably Opera. I also test my sites out in Lynx for a completely text-based experience, which helps me to gauge how accessible they are.
Q. Am I using a variety of units e.g. px and "small" x-large that are confusing things?
A. Personally I prefer sticking to one measurement unit for consistency. In Internet Explorer, however, if font sizes are specified in pixels, you will not be able to resize them using your browser (via View > Text Size) which can be a bother if you have difficulty making the text out. Problem is, most people still use IE. The workaround is to use relative specifications such as em, x-[something] or percentage.
Cheers...
Posted by: Vanessa Tan at August 20, 2003 11:20 AM