PDA

View Full Version : problem with spry tabs in popup window


bizzeca
04-24-2012, 04:32 PM
The spry tabs works fine if the page is directly accessed, however, when the page is accessed through the pop-up window (image below) the spry tabs are not click-able and all the contents are displayed all at once.

http://i301.photobucket.com/albums/nn67/phibztah/CSSproblem.jpg

I am using a local server so I do not have a url link.

CSS Code

@charset "UTF-8";

/* SpryTabbedPanels.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* Horizontal Tabbed Panels
*
* The default style for a TabbedPanels widget places all tab buttons
* (left aligned) above the content panel.
*/

/* This is the selector for the main TabbedPanels container. For our
* default style, this container does not contribute anything visually,
* but it is floated left to make sure that any floating or clearing done
* with any of its child elements are contained completely within the
* TabbedPanels container, to minimize any impact or undesireable
* interaction with other floated elements on the page that may be used
* for layout.
*
* If you want to constrain the width of the TabbedPanels widget, set a
* width on the TabbedPanels container. By default, the TabbedPanels widget
* expands horizontally to fill up available space.
*
* The name of the class ("TabbedPanels") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabbedPanels container.
*/
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}

/* This is the selector for the TabGroup. The TabGroup container houses
* all of the tab buttons for each tabbed panel in the widget. This container
* does not contribute anything visually to the look of the widget for our
* default style.
*
* The name of the class ("TabbedPanelsTabGroup") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabGroup container.
*/
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
}

/* This is the selector for the TabbedPanelsTab. This container houses
* the title for the panel. This is also the tab "button" that the user clicks
* on to activate the corresponding content panel so that it appears on top
* of the other tabbed panels contained in the widget.
*
* For our default style, each tab is positioned relatively 1 pixel down from
* where it wold normally render. This allows each tab to overlap the content
* panel that renders below it. Each tab is rendered with a 1 pixel bottom
* border that has a color that matches the top border of the current content
* panel. This gives the appearance that the tab is being drawn behind the
* content panel.
*
* The name of the class ("TabbedPanelsTab") used in this selector is not
* necessary to make the widget function. You can use any class name you want
* to style this tab container.
*/
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
font: bold 0.7em sans-serif;
background-color: #DDD;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
}

/* This selector is an example of how to change the appearnce of a tab button
* container as the mouse enters it. The class "TabbedPanelsTabHover" is
* programatically added and removed from the tab element as the mouse enters
* and exits the container.
*/
.TabbedPanelsTabHover {
background-color: #CCC;
}

/* This selector is an example of how to change the appearance of a tab button
* container after the user has clicked on it to activate a content panel.
* The class "TabbedPanelsTabSelected" is programatically added and removed
* from the tab element as the user clicks on the tab button containers in
* the widget.
*
* As mentioned above, for our default style, tab buttons are positioned
* 1 pixel down from where it would normally render. When the tab button is
* selected, we change its bottom border to match the background color of the
* content panel so that it looks like the tab is part of the content panel.
*/
.TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: 1px solid #EEE;
}

/* This selector is an example of how to make a link inside of a tab button
* look like normal text. Users may want to use links inside of a tab button
* so that when it gets focus, the text *inside* the tab button gets a focus
* ring around it, instead of the focus ring around the entire tab.
*/
.TabbedPanelsTab a {
color: black;
text-decoration: none;
}

/* This is the selector for the ContentGroup. The ContentGroup container houses
* all of the content panels for each tabbed panel in the widget. For our
* default style, this container provides the background color and borders that
* surround the content.
*
* The name of the class ("TabbedPanelsContentGroup") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the ContentGroup container.
*/
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
border-top: solid 1px #999;
border-right: solid 1px #999;
background-color: #EEE;
}

/* This is the selector for the Content panel. The Content panel holds the
* content for a single tabbed panel. For our default style, this container
* provides some padding, so that the content is not pushed up against the
* widget borders.
*
* The name of the class ("TabbedPanelsContent") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the Content container.
*/
.TabbedPanelsContent {
padding: 4px;
}

/* This selector is an example of how to change the appearnce of the currently
* active container panel. The class "TabbedPanelsContentVisible" is
* programatically added and removed from the content element as the panel
* is activated/deactivated.
*/
.TabbedPanelsContentVisible {
}

/* Vertical Tabbed Panels
*
* The following rules override some of the default rules above so that the
* TabbedPanels widget renders with its tab buttons along the left side of
* the currently active content panel.
*
* With the rules defined below, the only change that will have to be made
* to switch a horizontal tabbed panels widget to a vertical tabbed panels
* widget, is to use the "VTabbedPanels" class on the top-level widget
* container element, instead of "TabbedPanels".
*/

/* This selector floats the TabGroup so that the tab buttons it contains
* render to the left of the active content panel. A border is drawn around
* the group container to make it look like a list container.
*/
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
}

/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
*/
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
}

/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
*/
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
}

/* This selector floats the content panels for the widget so that they
* render to the right of the tabbed buttons.
*/
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
}

bizzeca
04-24-2012, 04:33 PM
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Business Permit Processing with Focus on Fire Inspection Certificate System | Kompanyeros 2011</title>

<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="author" content="Erwin Aligam - styleshout.com" />
<meta name="description" content="Site Description Here" />
<meta name="keywords" content="keywords, here" />
<meta name="robots" content="index, follow, noarchive" />
<meta name="googlebot" content="noarchive" />

<link rel="stylesheet" type="text/css" media="screen" href="images/Azulmedia.css" />
<style type="text/css">
<!--
.style20 {font-size: x-small}
-->
</style>
<script src="SpryAssets/SpryTabbedPanels2.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels2.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style23 {color: #000000}
.style25 {font-size: 1em}
.style26 {color: #E3E9F1}
.style5 {color: #BDBDBD; font-weight: bold; }
.style8 { color: #BDBDBD;
font-size: 12px;
font-weight: bold;
}
.style12 { font-size: 9px;
font-style: italic;
}
.style13 {font-size: 9px}
-->
</style>
</head>

<body>
<form action='forFSIC_toFireMarshal.php' method='post'>
<!-- wrap starts here -->
<div id="wrap">
<div id="header">
<h1 id="logo">PasigCity<span class="gray">FireDepartment</span></h1>
<h2 id="slogan">Fire Safety Inspection Certificate System</h2>

<img src="images/logo bfp.png" alt="pfd logo" width="100" height="100" />
<!-- Menu Tabs -->


</div>

<div></div>
<div class="align-left"></div>
<!-- content-wrap starts here -->
<div id="content-wrap">

<div id="****">





<div class="box">

<h1 align="center">Application Information</h1>


<table width="600" border="0">
<tr>
<td width="35%"><div align="left">IO No.</div></td>
<td width="5%">:</td>
<td><?php echo $row['IOno'] ?></td>
</tr>
<tr>
<td><div align="left">Applicant Name</div></td>
<td>:</td>
<td><?php echo $row['APPsurname'] . ", " . $row['APPfirstname'] . " " . $row['APPmiddleinit']; ?></td>
</tr>
<tr>
<td><div align="left">Business Name</div></td>
<td>:</td>
<td><?php echo $row['BIname']; ?></td>
</tr>
<tr>
<td><div align="left">Business Tel. No.</div></td>
<td>:</td>
<td><?php echo $row['BItelno']; ?></td>
</tr>
<tr>
<td><div align="left">Business Street</div></td>
<td>:</td>
<td><?php echo $row['BIaddressno'] . " " . $row['BIaddressst']; ?></td>
</tr>
<tr>
<td><div align="left">Business Barangay</div></td>
<td>:</td>
<td><?php echo $row['BIaddressbrgy']; ?></td>
</tr>
</table>

</div>
<a name="SampleTags"></a>

<div class="box">
<table width="875" height="613" border="0">
<tr>
<h1 align="center"><strong>Business Occupancy Checklist Form </strong></h1>
<td width="500" bordercolor="#212B5C" bgcolor="#212B5C"><div align="left">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab style23 style25" tabindex="0">General Information</li>
<li class="TabbedPanelsTab style25 style23" tabindex="0">Bldg. Construction</li>
<li class="TabbedPanelsTab style25 style23" tabindex="0">Exit Details</li>
<li class="TabbedPanelsTab style25 style23" tabindex="0">Means of Egress</li>
<li class="TabbedPanelsTab style25 style23" tabindex="0">Lighting and Signs</li>
<li class="TabbedPanelsTab style25 style23" tabindex="0">Features of Fire Protection</li>
<li class="TabbedPanelsTab style25 style23" tabindex="0">Bldg. Service Equipment</li>
<li class="TabbedPanelsTab style23 style25" tabindex="0">Hazardous Areas</li>
<li class="TabbedPanelsTab style23 style25" tabindex="0">Operating Features</li>
<li class="TabbedPanelsTab style23 style25" tabindex="0">Defects and or Deficiencies Noted During Inspection</li>
<li class="TabbedPanelsTab style23 style25" tabindex="0">Recommendations</li>
</ul>

<div class="clear"></div>
<!-- content-wrap ends here -->
</div>

<!-- wrap ends here -->
</div>

<!-- footer starts here -->
<div id="footer-wrap">

<div class="footer-left">
<p class="align-left">
&copy; 2011 Business Permit Processing with Focus on Fire Inspection Certificate System | Kompanyeros</p>
</div>

<div class="footer-right">
<p class="align-right">
<a href="index.html">Home</a> |
<a href="index.html">Help</a></p>
</div>

</div>
<!-- footer ends here -->
</form>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
</body>
</html>



Removed some of the codes because it exceeds the allowed amount.