I've been trying to get this to work now for awhile but just keep fixing one thing and messing up something else...
I've got a rather difficult issue here.. I am trying to customize a proxy script but w/o using inline css...
Site works as its supposed to here:
http://www.countrywideproxy.com/index.php?q=aHR0cDovL3d3dy5tc24uY29tLw%3D%3D
But does not display properly here:
http://www.countrywideproxy.com/inde...5IUEhNQQ%3D%3D
(Click options and even it's aligned left...)
I tried to be very specific in my CSS, since it's a proxy the code is a mess so I'll post it here.
Code:
/************************************/
/* Begin URL Bar Styles
/************************************/
#countrywideproxy_hide
{
position: absolute;
z-index: 1000;
top: 0;
right: 5px;
width: 100px;
height: 20px;
background-color: #FFFFFF;
overflow: hidden;
text-align: center;
}
#countrywideproxy_bar
{
width: 100%;
margin: 0px;
border-bottom: 1px solid #725554;
color: #000000;
background-image: url(images/bg.gif);
font-size: 12px;
font-weight: bold;
font-family: Bitstream Vera Sans,arial,sans-serif;
padding: 0px;
overflow: hidden;
}
#countrywideproxy_bar img,
#countrywideproxy_bar form,
#countrywideproxy_bar input
{
margin: 0px;
padding: 0px;
border: 0px;
}
#countrywideproxy_bar #countrywide_logo
{
background: url(images/logo.gif) no-repeat left top;
cursor: pointer;
height: 87px;
width: 252px;
float: left;
}
#countrywideproxy_bar #countrywide_logo img
{
height: 87px;
width: 252px;
}
#countrywideproxy_bar #left_header {
height: 54px;
width: 489px;
float: left;
vertical-align: top;
text-align: left;
}
#countrywideproxy_bar #left_header #url_form
{
height: 42px;
width: 500px;
margin: 12px 0 0 0;
overflow: hidden;
}
#countrywideproxy_bar #left_header #url_form #countrywideproxy_q
{
height: 16px;
width: 376px;
background: url(images/proxy_url.gif) no-repeat left top;
color: #5d5d5d;
font-weight: bold;
padding: 10px 10px 10px 10px;
margin: 0px 0px 10px 0px;
}
#countrywideproxy_bar #left_header #url_form #submit
{
height: 32px;
width: 93px;
margin: 10px 0px 0px 0px;
}
#countrywideproxy_bar #left_header #countrywide_options {
height: 22px;
width: 82px;
margin: -2px 0px 0px 20px;
}
/************************************/
/* Begin Options Box Styles
/************************************/
#countrywideproxy_form
{
position: absolute;
top: 200px;
left: 0px;
width: 100%;
z-index: 1000;
margin: 0px;
}
#countrywideproxy_form #countrywideproxy_options {
width: 532px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
#countrywideproxy_form #countrywideproxy_options #countrywideproxy_title {
background-image: url(images/options_top.png);
background-repeat: no-repeat;
background-position: left top;
height: 23px;
width: 532px;
overflow: hidden;
}
#countrywideproxy_form #countrywideproxy_options #countrywideproxy_title p {
font-size: 12px;
font-weight: bold;
color: #C4C4C4;
padding-top: 4px;
padding-left: 17px;
overflow: hidden;
margin: 0px;
width: 200px;
float: left;
}
#countrywideproxy_form #countrywideproxy_options #countrywideproxy_title #countrywideproxy_close {
margin: 0px;
padding: 0px;
border: 0px;
text-align: right;
float: right;
height: 23px;
width: 26px;
}
#countrywideproxy_form #countrywideproxy_options #countrywideproxy_title #countrywideproxy_close img {
margin: 0px;
padding: 0px;
border: 0px;
}
#countrywideproxy_form #countrywideproxy_options #countrywide_option_text {
background-image: url(images/right_options_bg.gif);
background-repeat: repeat-y;
background-position: left top;
padding: 3px 32px 8px 32px;
text-align: left;
}
#countrywideproxy_form #countrywideproxy_options #countrywide_option_text #countrywide_option_ads {
height: 60px;
width: 468px;
margin: 10px 0px 10px 0px;
}
#countrywideproxy_form #countrywideproxy_options #countrywide_option_text ul {
white-space: nowrap;
margin: 0px 0px 0px 9px;
padding: 0px;
list-style-type: none;
}
#countrywideproxy_form #countrywideproxy_options #countrywide_option_text li {
font-weight: bold;
color: #9E9E9E;
font-size: 13px;
}
#countrywideproxy_form #countrywideproxy_options #countrywide_ads_title {
background-image: url(images/options_title.gif);
background-repeat: no-repeat;
background-position: left top;
height: 22px;
width: 532px;
}
#countrywideproxy_form #countrywideproxy_options #countrywide_ads_title p {
font-size: 12px;
font-weight: bold;
color: #C4C4C4;
padding-top: 4px;
padding-left: 17px;
margin: 0px;
}
#countrywideproxy_form #countrywideproxy_options #countrywide_ads_text {
background-image: url(images/right_options_bg.gif);
background-repeat: repeat-y;
background-position: left top;
padding: 3px 32px 8px 32px;
height: 69px;
}
#countrywideproxy_form #countrywideproxy_options #countrywide_ads_text #countrywide_ads_ads {
height: 60px;
width: 468px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
#countrywideproxy_form #countrywideproxy_options #countrywide_ads_bottom {
background-image: url(images/options_bottom.png);
background-repeat: no-repeat;
background-position: left top;
height: 4px;
width: 532px;
}
HTML Code:
<form method="post" action="' . $_script_url . '">
<div id="countrywideproxy_bar" style="height: 88px;">
<div id="countrywide_logo">
<a href="http://www.countrywideproxy.com/"><img src="http://www.webmaster-talk.com/images/logo.gif" alt="Countrywide Proxy" height="87" width="252"/></a> </div> <!-- End logo -->
<div id="left_header">
<div id="url_form">
<input id="countrywideproxy_' . $_config['url_var_name'] . '" type="text" name="' . $_config['url_var_name'] . '" value="' . $_url . '" />
<input id="submit" type="image" name="go" value="Go" src="http://www.webmaster-talk.com/images/proxy_travel.gif"/>
</div> <!-- End url_form -->
<div id="countrywide_options">
<a href="javascript: void(0);" onmousedown="slidedown(\'countrywideproxy_options\');"><img src="http://www.webmaster-talk.com/images/proxy_options.gif" width="82" height="22"/></a></div> <!-- End countrywide_options -->
</div> <!-- End left_header -->
</div> <!-- End countrywideproxy_bar -->
<div id="countrywideproxy_form">
<div id="countrywideproxy_options" style="height: 800px; display: none;">
<div id="countrywideproxy_title">
<p>
Proxy Configuration Options
</p>
<div id="countrywideproxy_close">
<a href="javascript: void(0);" onmousedown="slideup(\'countrywideproxy_options\');"><img src="http://www.webmaster-talk.com/images/options_close.gif" alt="Close Options" width="26px" height="23px"/></a></div>
</div> <!-- end countrywideproxy_title -->
<div id="countrywide_option_text">
<div id="countrywide_option_ads">
' . $ads . '
</div> <!-- end countrywide_option_ads -->
<ul>
<li>
<label>
<input type="checkbox" name="' . $_config['flags_var_name'] . '[' . $flag_name . ']"' . ( $flag_value ? ' checked="checked"' : '' ) . ' />
<b> . $GLOBALS[ '_labels' ][$flag_name][1] . '</b>
</label>
</li>
</ul>
</div> <!-- end countrywide_option_text -->
<div id="countrywide_ads_title">
<p>
Related Sites And Advertisements'
</p>
</div> <!-- end countrywide_ads_title -->
<div id="countrywide_ads_text">
<div id="countrywide_ads_ads">
' . $ads . '
</div> <!-- end countrywide_ads_ads -->
</div> <!-- end countrywide_ads_text -->
<div id="countrywide_ads_bottom">
</div>
</div> <!-- end countrywideproxy_options -->
</div> <!-- end countrywideproxy_form -->
</form>
(Note: The HTML is normally in PHP single quotes which is why it has variables and back slashes before single quotes in the Javascript.)
Last edited by Phaaze; 05-05-2007 at 06:45 PM..
|
