I would like to integrate the style switcher, the font size increase/decrease functionality in my web pages for accessibility reasons. I have created 6 different css files which i have imported them in the style sheets section in my website (domino designer).
The css files are:
- default.css
/* default font size*/
@import url(small.css);
/* Netscape 4 safe font sizes */
body, div, p, th, td, li, dd {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
h1 {
font-size: 130%;
font-weight: bold;
}
h2 {
font-size: 110%;
font-weight: bold;
}
2.xx_small.css
/* xx_small.css*/
body,
body div,
body p,
body th,
body td,
body li,
body dd {
font-size: xx-small;
voice-family: “"}"”;
voice-family: inherit;
font-size: x-small
}
html>body,
html>body div,
html>body p,
html>body th,
html>body td,
html>body li,
html>body dd {
font-size: x-small
}
3.x_small.css
/* x_small.css*/
body,
body div,
body p,
body th,
body td,
body li,
body dd {
font-size: x-small;
voice-family: “"}"”;
voice-family: inherit;
font-size: small
}
html>body,
html>body div,
html>body p,
html>body th,
html>body td,
html>body li,
html>body dd {
font-size: small
}
4.small.css
/* small.css*/
body,
body div,
body p,
body th,
body td,
body li,
body dd {
font-size: small;
voice-family: “"}"”;
voice-family: inherit;
font-size: medium
}
html>body,
html>body div,
html>body p,
html>body th,
html>body td,
html>body li,
html>body dd {
font-size: medium
}
5.medium.css
/* medium.css*/
body,
body div,
body p,
body th,
body td,
body li,
body dd {
font-size: medium;
voice-family: “"}"”;
voice-family: inherit;
font-size: large
}
html>body,
html>body div,
html>body p,
html>body th,
html>body td,
html>body li,
html>body dd {
font-size: large
}
- large.css
/* large.css*/
body,
body div,
body p,
body th,
body td,
body li,
body dd {
font-size: large;
voice-family: “"}"”;
voice-family: inherit;
font-size: x-large
}
html>body,
html>body div,
html>body p,
html>body th,
html>body td,
html>body li,
html>body dd {
font-size: x-large
}
Afterwards I have also created my form with the following code in it (Pass-through HTML):
<form name="font_select" action="GET">
<tr>
<td>
<input
type="button"
onclick="javascript:fontsizedown();"
value=" font - "
/>
</td>
<td>
<input
type="button"
onclick="javascript:fontsizeup();"
value=" font + "
/>
</td>
</tr>
<td colspan="2">
</td>
<td colspan="2">testing
</td>
I have also imported my 5 css files in the HTML head content section.
For some reason the functionality is not working, what am i doing wrong?
Your help will be much appreciated. Thanks in advance
Nayiri Yildizian