A challenge for the masters in css - CSS-Tricks

This topic is empty.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts

November 16, 2011 at 12:22 am #35179

Member

Hi Guys,
i have a page in dot.net frame in which a link opens to a popup in lightbox which shows a dynamic content in a iframe.

The issue is when the popup is opened it shows a horizontal scroll and a black background color (fraction of seconds) untill the iframe is loaded as the Class is kept for background color and overflow-x hidden in iframe but the still the problem continues. Can anyone help me out for this.

November 16, 2011 at 1:24 pm #90744

standuncan

Member

Link?

November 16, 2011 at 11:51 pm #90786

matthewb

Member

hi stan, thanks for responding to my question. i’m sorry to say that i can’t share u the link for some copyright issues :( . I hope you get back to me again with some solution.

November 17, 2011 at 12:12 am #90787

chrisburton

Participant

Perhaps you mean confidentiality? Unless you provide some sort of mockup example of what your issue is, I don’t think we’ll be able to help you.

November 17, 2011 at 1:49 am #90790

matthewb

Member

Ya i mean confidentiality i m giving you the code by which u can get idea.







<br />
<html lang="en"><head><title><br />
<br />
</title><br />
<link type="text/css" rel="stylesheet" href="http://localhost/companyName/CSS/style.css"/><br />
<script src="//localhost/companyName/JSFiles/jquery1.6.js" type="text/javascript"></script><br />
<script src="//localhost/companyName/JSFiles/jquery.easing.js" type="text/javascript"></script><br />
<script src="//localhost/companyName/JSFiles/script.js" type="text/javascript"></script><br />
<script src="//localhost/companyName/JSFiles/dropdowntabs.js" type="text/javascript"></script><br />
<br />
<br />
<br />
<style type="text/css"><br />
dl.field dt.lblPopup, dl.field dt.lblPopup{float:left; font:normal 14px/16px "Gill Sans MT";margin-right:0;text-align:right;width:150px;color:#333;}<br />
span.roundPopup input, span.roundPopup{background:#fff url("images/static.png")no-repeat 0 100px ;}<br />
span.buttonPopup, span.buttonPopup input, span.buttonPopup input:hover, span.buttonPopup:hover{background:url(images/button-blue.png) no-repeat left top #fff; line-height:22px; height:27px; 		display:inline-block;  border:#F00 solid 0px; font-weight:600; cursor: pointer; padding-left:10px; color:#222; font-size:12px; }<br />
</style><br />
</head><br />
<body><br />
<form id="aspnetForm" action="fit.aspx" method="post" name="aspnetForm"><br />
<div><br />
<input type="hidden" value="" id="__EVENTTARGET" name="__EVENTTARGET"/><br />
<input type="hidden" value="" id="__EVENTARGUMENT" name="__EVENTARGUMENT"/><br />
<br />
</div><br />
<br />
<script type="text/javascript"><br />
//&lt;![CDATA[<br />
var theForm = document.forms;<br />
if (!theForm) {<br />
theForm = document.aspnetForm;<br />
}<br />
function __doPostBack(eventTarget, eventArgument) {<br />
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {<br />
theForm.__EVENTTARGET.value = eventTarget;<br />
theForm.__EVENTARGUMENT.value = eventArgument;<br />
theForm.submit();<br />
}<br />
}<br />
//]]&gt;<br />
</script><br />
<br />
<br />
<script type="text/javascript" src="/companyName/WebResource.axd?d=W05acR2BV-DBB1Abf9ZpaxGi6uBhoOkFzAFZUJ3G6CbVy_iYR3Qgai9EeoYmQHPeqnlFc_3i1Hp9QZS548QelISXOek1&amp;t=634208975469717278"></script><br />
<br />
<br />
<script type="text/javascript" src="/companyName/ScriptResource.axd?d=n7viFftalCfuNxLRw-EA-8MjLvaIQiqc6GyzIUhYWZGZIdNuVRxpwktOZhNtrmDQM_6c0WFgstsyt-_05wtojrZ78ziQUIi80mllytH1EvQM6Df-2IxHLHfwrS9Of9fjxnZNbg__U2g9ScU_buqaXx9sztHbjXzdEdnG0BjPxoatyNx_0&amp;t=5c2f384e"></script><br />
<script type="text/javascript"><br />
//&lt;![CDATA[<br />
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');<br />
//]]&gt;<br />
</script><br />
<br />
<script type="text/javascript" src="/companyName/ScriptResource.axd?d=YimIb6JIscUH1usSDaDNil2tc9wdjbyesgnukhvAfpTNHMqgDZBej7PVPQFM0vV0VJp7lAGJJQHzCiwFU5SF661cZzUO5j1uDdVAeoibgvxVN9YWTZKQze2S6GE5J026UDBO4eRJyAaosJupB3oovDnpEoAkLHCdEUOzJP09ljraYB_7ynVidH2k22oWu_Ky6KpIQQ2&amp;t=5c2f384e"></script><br />
<script type="text/javascript"><br />
//&lt;![CDATA[<br />
Sys.WebForms.PageRequestManager._initialize('ctl00$ScriptManager1', document.getElementById('aspnetForm'));<br />
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);<br />
//]]&gt;<br />
</script><br />
<br />
<div id="jConfirmDiv"><br />
</div><br />
<br />
<style type="text/css"><br />
html,body{background:#333 !important; height:100%; width:100%}<br />
body #aspnetForm{width:auto !important;width:auto9 !important;}<br />
#cboxLoadedContent iframe{overflow-x:hidden !important;overflow-y:auto !important;}<br />
*{margin:auto!important;padding:inherit!important;}<br />
#cboxLoadedContent, #cboxContent {overflow-x:hidden !important;}<br />
<br />
@media �screen {<br />
body #aspnetForm{width:auto !important;}<br />
#cboxLoadedContent iframe{overflow-x:hidden !important;overflow-y:auto !important;}<br />
}<br />
<br />
</style><br />
<div class="left"><br />
<div><br />
<p style="text-align: center; "><br />
Our products are measured at the widest part of the blade - the width of cuff links is their circumference.</p><br />
<hr /><br />
<p style="text-align: center; "><br />
&nbsp;</p><br />
<p style="text-align: center; "><br />
&nbsp;</p><br />
<p style="text-align: center; "><br />
&nbsp;</p><br />
<table cellspacing="0" cellpadding="1" border="1" align="center" style="width: 300px; "><br />
<thead><br />
<tr><br />
<th scope="col"><br />
<font size="3"></font><font color="#FFFFFF">Style</font></th><br />
<th scope="col"><br />
<font size="3"></font><font color="#FFFFFF">Dimensions</font></th><br />
</tr><br />
</thead><br />
<tbody><br />
<tr><br />
<td style="text-align: center; "><br />
<font size="3">Standard</font></td><br />
<td style="text-align: center; "><br />
<font size="3">8.5 cm or more<br /><br />
(3.5 in or more)</font></td><br />
</tr><br />
<tr><br />
<td style="text-align: center; "><br />
<font size="3">Narrow</font></td><br />
<td style="text-align: center; "><br />
<font size="3">7 cm to 8 cm<br /><br />
(2.75 in to 3.25 in)</font></td><br />
</tr><br />
<tr><br />
<td style="text-align: center; "><br />
<font size="3">Standard</font></td><br />
<td style="text-align: center; "><br />
<font size="3">6.5 cm or less<br /><br />
(2.5in or less)</font></td><br />
</tr><br />
</tbody><br />
</table><br />
<br />
</div><br />
</div><br />
<br />
<br />
<div><br />
<br />
<input type="hidden" value="0" id="__SCROLLPOSITIONX" name="__SCROLLPOSITIONX"/><br />
<input type="hidden" value="0" id="__SCROLLPOSITIONY" name="__SCROLLPOSITIONY"/><br />
</div><br />
<br />
<script type="text/javascript"><br />
//&lt;![CDATA[<br />
<br />
theForm.oldSubmit = theForm.submit;<br />
theForm.submit = WebForm_SaveScrollPositionSubmit;<br />
<br />
theForm.oldOnSubmit = theForm.onsubmit;<br />
theForm.onsubmit = WebForm_SaveScrollPositionOnSubmit;<br />
Sys.Application.initialize();<br />
//]]&gt;<br />
</script><br />
<input type="hidden" value="/wEPDwUKMTAyMTMzODg1NmRk" id="__VIEWSTATE" name="__VIEWSTATE"/><br />
</form><br />
<br />
<br />
</body><br />
</html><br />

hope this will help you…..

November 17, 2011 at 1:58 am #90791

chrisburton

Participant

@matthewb Please wrap the code like this (without spaces) < pre >< code >CODE HERE< /pre >

November 17, 2011 at 3:44 am #90793

chrisburton

Participant

….wow

November 17, 2011 at 7:32 am #90804

Mottie

Member

@matthewb It is difficult to work with that code because we don’t have any dynamic content to load and we have no idea what scripts are being loaded. Maybe it would be best to post a demo on jsFiddle.net that will show us the issue.

And just to ask, did you try adding allowtransparency="true" and then making the iframe body background transparent? Here is a reference if you need it.

November 20, 2011 at 4:25 am #90990

matthewb

Member

ya @cnwtx i have tried scrolling=”no” & allowtransparency=”true” but it does’nt work and bcoz of confidentiality of company i can’t keep this at demo.

can any one solve this out.

November 24, 2011 at 11:58 pm #91237

matthewb

Member

@Adman ya i have also tried background: transparent; to the body. But it does’nt works.

November 25, 2011 at 5:10 am #91245