TechnoBlogy » CSS http://technoblogy.net Technology with a Big difference Mon, 05 Dec 2011 17:29:42 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 AJAX Tab Container – Style Problem http://technoblogy.net/ajax-tab-container-style-problem/ http://technoblogy.net/ajax-tab-container-style-problem/#comments Sun, 01 Nov 2009 15:03:10 +0000 Nauman http://technoblogy.net/ajax-tab-container-style-problem/ Cause

Since the release of ASP.Net 2.0, all the pages’ DTD are set to XHTML 1.0 Transitional by default. Consequently, AJAX Control Toolkits were also created to adhere with standard. All the rendered AJAX controls will follow the said document type definition. As it turns out, our page only adhere to HTML 4.01 Transitional DTD making the tab looked distorted.

Solution

Well one solution it to change the DTD of your page to XHTML 1.0 Transitional. This will quickly fixed your problem (best practice as well). But if time is not in your side you can do a little CSS hack to make your tab looking good again. Just include the CSS code below internally inside your page:

<style type="text/css">

.ajax__tab_default .ajax__tab_inner {height : 100%;}
.ajax__tab_default .ajax__tab_tab {height : 100%;}

.ajax__tab_xp .ajax__tab_hover .ajax__tab_tab {height : 100%;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_tab {height : 100%;}

.ajax__tab_xp .ajax__tab_inner {height : 100%;}
.ajax__tab_xp .ajax__tab_tab {height:100%}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_inner {height : 100%;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_inner {height : 100%;}

</style>

.customtabstyle .ajax__tab_outer {height:85%;}
.customtabstyle .ajax__tab_inner {height:85%;}
.customtabstyle .ajax__tab_tab {height:85%;}
.customtabstyle .ajax__tab_hover .ajax__tab_outer {height:85%;}
.customtabstyle .ajax__tab_hover .ajax__tab_inner {height:85%;}
.customtabstyle .ajax__tab_hover .ajax__tab_tab {height:85%;}
.customtabstyle .ajax__tab_active .ajax__tab_outer {height:85%;}
.customtabstyle .ajax__tab_active .ajax__tab_inner {height:85%;}
.customtabstyle .ajax__tab_active .ajax__tab_tab {height:85%;}

Just remember that the CSS should be inside your .aspx file and not in an external .css file. The style will not take effect in doing so.

]]> http://technoblogy.net/ajax-tab-container-style-problem/feed/ 3 CSS – Conditional Statements http://technoblogy.net/css-conditional-statements/ http://technoblogy.net/css-conditional-statements/#comments Sun, 01 Nov 2009 13:31:02 +0000 Nauman http://technoblogy.net/css-conditional-statements/ For CSS to work in cross browser environment, we have to write some conditional statements to make our styles look same in all the browsers.

Below is the sample code that demonstrate how to write conditional statement tin CSS.

<html>
<head>
<title>Conditional CSS</title>
<style type="text/css">
body
{
color:blue;
}
</style>
<!–[if IE 7]>
<style type="text/css">
body
{
background-color:red;
}
</style>
<![endif]–>
</head>
<body>
<p>
Nauman Farooq
</p>
</body>
</html>

If you copy-paste above code as an .html file and browse into IE 7, you will get the background color of the page as red and color of the text as blue but if you will browse the same page in FireFox, the background property of the body tag will not be applicable and it will be default (white) while you will see the color of the text as blue as you were seeing into IE 7.
This is because the color of text has been specified as default style while the background is written as conditional statement.

]]> http://technoblogy.net/css-conditional-statements/feed/ 0