Taming the Tabs

1
Taming the Tabs
Other logos can be added within the grey stripe
if required
Alan Brown
2
Change?

• More elegant design
• Move away from table based layouts
• Internet Explorer
• Does not resize well
• Internet Explorer 7

3
(No Transcript)
4
(No Transcript)
5
(No Transcript)
6
Solutions Mind the Gap

• The culprit is the bottom-margin on .mainSpacer
  (1em)
• Either change the bottom-margin to 0
• From
• .mainSpacer margin 0 1em 1em 1em
• To
• .mainSpacer margin 0 1em

7
(No Transcript)
8
Mind the Gap part 2

• Or .....
• Extend the .mainSpacer div to cover both the tabs
  and the search content
• As well as the search tips

9
(No Transcript)
10
(No Transcript)
11
Solutions - Resize

• Limit the number of tabs to fit 800 x 600
• Set appropriate min-widths for the tabbed area
  and the navigation area.
• IE min-width hack
• http//www.cssplay.co.uk/boxes/minwidth.html

12
(No Transcript)
13
(No Transcript)
14
Min Width

• Styles.css
• /Tabbed Interface Fix with minimum
  widths/
• .folderWrapper float left width 71
  min-width 535px
• .mainSpacer margin 0
• ie_styles.css
• /Tabbed Interface Fix for IE with minimum
  widths/
• /the thick border is for a min-width hack/
• .folderWrapper float left width 71
  border-right 535px solid fff
• .mainSpacer float left position relative
  margin-right -535px

15
(No Transcript)
16
(No Transcript)
17
(No Transcript)
18
Solutions IE7

• Without a DOCTYPE IE7 will go into quirks mode
  and behave like IE6
• Just need to point IE7 to ie_styles.css
• lt!--if lte IE 7gt
• ltlink rel"stylesheet" media"all"
  type"text/css" href"/screens/ie_styles.css" /gt
• lt!endif--gt

19
IE 7 continued

• This also needs to be changed for system
  generated pages using the wwwoption
• INSERTTAG_INHEADltscript type"text/javascript"
  src"/screens/bibdisplay.js"gtlt/scriptgtltscript
  type"text/javascript" src"/screens/brief.js"gtlt/s
  criptgtlt!--if lte IE 7gtltlink rel"stylesheet"
  media"all" type"text/css" href"/screens/ie_styl
  es.css" /gtlt!endif--gt

20
IE 7 more

• With a DOCTYPE IE 7 is pretty much standards
  based with a few modifications can use styles.css
• .mainActiveTab /added for ie 7/ width 102px
  background transparent float left margin 0
  5px -1px 0
• .mainInactiveTab /added for ie 7/ width
  100px background transparent float left
  margin 0 5px 0 0

21
WC3 Standards

• XHTML 1.0 has been around since 2000 as a
  reformulation of HTML 4.
• DOCTYPE to XHTML 1.0 Transitional on editable
  pages
• Validation.
• http//validator.w3.org/

22
(No Transcript)
23
Invalid code

• lt!--patron--gt adds a dated ltBRgt tag at the end
  of the logged in message.
• lt!--indexsort--gt lt!--submit--gt in the
  srchelp_ pages insert javascript functions that
  are not correctly labelled.
• A lot of the search forms have no action
  identified.

24
Fixing code

• Replace lt!--submit--gt with
• ltinput type"image" src"/screens/submit.gif"
  name"submit" value"submit" /gt
• Replace lt!--indexsort--gt with
• ltselect name"sortdropdown" id"sortdropdown"gt
  ltoption value"-"gtSystem Sortedlt/optiongt
  ltoption value"t"gt Titlelt/optiongt ltoption
  value"a"gt Authorlt/optiongt ltoption value"c"gt
  Yearlt/optiongt ltoption value"r"gt Reverse
  Yearlt/optiongt ltoption value"n"gt Call
  Numberlt/optiongt ltoption value"m"gt Material
  Typelt/optiongt lt/selectgt

25
Fixing Code - 2

• Update the form tag to add an action i.e. point
  back to the search screen. E.g. from
  srchelp_a.html.
• ltform method"get" action"/search/a"
  class"unpadded"gt
• Most pages will now validate when not logged in.
  Innovative would have to do something about the
  lt!--patron--gt message

26
No Javascript

• The advantage of making the changes means that
  you can use the catalogue with javascript turned
  off.

27
(No Transcript)
28
(No Transcript)
29
(No Transcript)
30
(No Transcript)
31
(No Transcript)
32
Styling Forms

• Replace the table that lays out search tab and
  other searches, with .mainActiveContainer,
  .srchHelpLeft, .roundedContent2
• .mainActiveContainer clear both position
  relative width 100
• .srchHelpLeft background transparent width
  70
• .roundedContent2 position absolute top
  0.4em right 0 background transparent width
  28

33
(No Transcript)
34
Styling Forms 2

• Using simple html and css to style the forms
  content
• ltpgtltlabel forsearchgtkeywordlt/labelgtltinput
  type"text" name"SEARCH" id"search" size"40"
  value"" /gtlt/pgt
• /styles.css/
• .mainActiveContainer form input margin 0
  padding 0
• .mainActiveContainer form p margin 0 padding
  0.4em 0 0 0
• label display block float left width
  5.6em text-align right margin-right 10px
  padding 0
• /ie_styles /
• label margin-right 7px

35
Gallery

• Web OPAC on different browsers, (Already seen IE
  6 and Firefox on Windows)

36
(No Transcript)
37
(No Transcript)
38
(No Transcript)
39
(No Transcript)
40
(No Transcript)
41
(No Transcript)
42
(No Transcript)
43
Lynx
44
Lynx 2
45
Lynx 3
46
Lynx 4
47
Resources

• IE 6 min width hack
• http//www.cssplay.co.uk/boxes/minwidth.html
• CSS layout for forms
• http//www.webcredible.co.uk/user-friendly-resourc
  es/css/css-forms.shtml
• The IE6 3 pixel text jog
• http//www.positioniseverything.net/explorer/three
  pxtest.html
• Bury Libraries Catalogue
• http//library.bury.gov.uk

48
Resources 2

• Validation
• WC3 Markup Validation Service
• http//validator.w3.org/
• Total Validator
• http//www.totalvalidator.com