CSS Help Needed - Clickable Table Cell
-
I am developing a web application that will be viewed with Microsoft Internet Explorer 6 on a machine with touch screen. The touch screen is the only input/output device. There is no mouse or keyboard available for the end user. (Imagine an electronic information kiosk.) Here's my current problem: I am populating a table that contains square, "button-like" cells with information from a database. The buttons are styled using a CSS Style Sheet. I need the entire square cell to be hyperlink sensitive to accomodate for the inaccuracies of a touch screen. Centered vertically and horizontally in the button should be a link text. Currently, my solution allows for everything but centering the text vertically. I am using the following class to style a block hyperlink of size 75px by 75px: A.selectCategoryButton { display: block; width: 75px; height: 75px; vertical-align: middle; text-align: center; text-decoration: none; font-family: Verdana; font-size: 12px; color: white; border: 1px solid black; background-color: #0074E8; } An example of one cell in my table looks something like this:
The result rendered in a browser is a 75px by 75px cell that is entirely "click-able" with all the properties defined in my class, BUT the text appears at the top of the button like this: ___________ | Link Text | | | | | | | |_________| I think this has to do with the fact that the CSS vertical-align property can only be used with in-line objects and not block objects. Any workarounds or other solutions? Feedback is greatly appreciated... This is a somewhat time sensitive project.
-
I am developing a web application that will be viewed with Microsoft Internet Explorer 6 on a machine with touch screen. The touch screen is the only input/output device. There is no mouse or keyboard available for the end user. (Imagine an electronic information kiosk.) Here's my current problem: I am populating a table that contains square, "button-like" cells with information from a database. The buttons are styled using a CSS Style Sheet. I need the entire square cell to be hyperlink sensitive to accomodate for the inaccuracies of a touch screen. Centered vertically and horizontally in the button should be a link text. Currently, my solution allows for everything but centering the text vertically. I am using the following class to style a block hyperlink of size 75px by 75px: A.selectCategoryButton { display: block; width: 75px; height: 75px; vertical-align: middle; text-align: center; text-decoration: none; font-family: Verdana; font-size: 12px; color: white; border: 1px solid black; background-color: #0074E8; } An example of one cell in my table looks something like this:
The result rendered in a browser is a 75px by 75px cell that is entirely "click-able" with all the properties defined in my class, BUT the text appears at the top of the button like this: ___________ | Link Text | | | | | | | |_________| I think this has to do with the fact that the CSS vertical-align property can only be used with in-line objects and not block objects. Any workarounds or other solutions? Feedback is greatly appreciated... This is a somewhat time sensitive project.
Why not apply the v-align style to the TD element? -- Ian Darling "The moral of the story is that with a contrived example, you can prove anything." - Joel Spolsky
-
I am developing a web application that will be viewed with Microsoft Internet Explorer 6 on a machine with touch screen. The touch screen is the only input/output device. There is no mouse or keyboard available for the end user. (Imagine an electronic information kiosk.) Here's my current problem: I am populating a table that contains square, "button-like" cells with information from a database. The buttons are styled using a CSS Style Sheet. I need the entire square cell to be hyperlink sensitive to accomodate for the inaccuracies of a touch screen. Centered vertically and horizontally in the button should be a link text. Currently, my solution allows for everything but centering the text vertically. I am using the following class to style a block hyperlink of size 75px by 75px: A.selectCategoryButton { display: block; width: 75px; height: 75px; vertical-align: middle; text-align: center; text-decoration: none; font-family: Verdana; font-size: 12px; color: white; border: 1px solid black; background-color: #0074E8; } An example of one cell in my table looks something like this:
The result rendered in a browser is a 75px by 75px cell that is entirely "click-able" with all the properties defined in my class, BUT the text appears at the top of the button like this: ___________ | Link Text | | | | | | | |_________| I think this has to do with the fact that the CSS vertical-align property can only be used with in-line objects and not block objects. Any workarounds or other solutions? Feedback is greatly appreciated... This is a somewhat time sensitive project.
I haven't tried it, so this is no more than a swag, but is it possible to place the text within
tags and define the box characteristics (margins, padding, etc) for the P element to constrain the text to the center of the cell containing it? "Your village called -
They're missing their idiot." -
I am developing a web application that will be viewed with Microsoft Internet Explorer 6 on a machine with touch screen. The touch screen is the only input/output device. There is no mouse or keyboard available for the end user. (Imagine an electronic information kiosk.) Here's my current problem: I am populating a table that contains square, "button-like" cells with information from a database. The buttons are styled using a CSS Style Sheet. I need the entire square cell to be hyperlink sensitive to accomodate for the inaccuracies of a touch screen. Centered vertically and horizontally in the button should be a link text. Currently, my solution allows for everything but centering the text vertically. I am using the following class to style a block hyperlink of size 75px by 75px: A.selectCategoryButton { display: block; width: 75px; height: 75px; vertical-align: middle; text-align: center; text-decoration: none; font-family: Verdana; font-size: 12px; color: white; border: 1px solid black; background-color: #0074E8; } An example of one cell in my table looks something like this:
The result rendered in a browser is a 75px by 75px cell that is entirely "click-able" with all the properties defined in my class, BUT the text appears at the top of the button like this: ___________ | Link Text | | | | | | | |_________| I think this has to do with the fact that the CSS vertical-align property can only be used with in-line objects and not block objects. Any workarounds or other solutions? Feedback is greatly appreciated... This is a somewhat time sensitive project.
Use padding to achieve what you want. Regards, Rohit Sinha Browsy
Do not wait for leaders; do it alone, person to person. - Mother Teresa