We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

position problem??

falfouli
falfouli asked
on
Medium Priority
244 Views
Last Modified: 2012-05-11
hi
my sie is www.icqmontreal.com
on the main page under membership renewal there is a green table.
i tested it on multiple screen sizes and it looks fine.but on my clients computer who has a 19 inch screen resolution the table is pushed all the way to the right and overlapping the weather.What is the problem with my positioning?and how can i fix this problem?
Comment
Watch Question

Commented:
please post your css style

Author

Commented:

@charset "utf-8";
/* CSS Document */
a{
outline:none; /*FF1.5+ IE7+*/
-moz-outline:none /* FF<=1.5*/
}

*{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;

}

BODY{

text-align:center;

background:url(../Images/bg.jpg) repeat top left;

margin:0px;

font-family:Arial, Helvetica, sans-serif;



}

.main_table {
	background-color:#FFF;
	padding-left: 6px;
	padding-right: 6px;
}



.menu_header {
	background-image: url(../Images/LeftLineMenu.gif);
	background-repeat: repeat-x;
	background-position: left;
	height:38px;
	vertical-align:middle;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	text-align:center;
	padding-top: 0px;
	overflow:hidden;
	width:890px;

	

}

.menu_header img

{

	position:relative;

	left:-4px;

	}



.sub_header {

	background-image: url(../images/QucikLink.gif);

	background-repeat: repeat-x;

	background-position: left;

	vertical-align:middle;

	color: #FFFFFF;

	font-size: 11px;

	font-weight: bold;

	text-align: Center;

	height:27px;

	padding-top:0px;

	text-align:left;
	

}

 #MM , #MPT, #PM, #ICB, #MPTHV   {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	background: #066;
	display:block;
	width: 200px;
	padding-left: 10px;
	font-size: 1em;
	color: #fff;
	text-decoration: none;
	line-height: 30px;
	margin: 0;
	border: 3px solid #060;
 }
 a#MM:hover, a#MPT:hover, a#PM:hover, a#ICB:hover, a#MPTHV:hover {
	text-decoration: underline;
	background: #060;
 }


.Salat_Calendar {

	background-image: url(../images/PrayerTime.gif);

	background-repeat:no-repeat ;

	

}

.ClickDetail_header {

	background-image: url(../images/LineClickSearch.gif);

	background-repeat: repeat-x;

	background-position: left;

	vertical-align:top;

	color: #FFFFFF;

	font-size: 11px;

	font-weight: bold;

	text-align:center;

	padding-top:1px;

}







.image_IcqExpansion

{

background-repeat: repeat-x;

background-repeat: repeat-Y;

}


 a:link  

{

	font-family:Tahoma, Verdana, Arial; 

	font-size:11px;

	text-decoration:underline;
	color:#060;

	}

a:hover

{

	font-family:Tahoma, Verdana, Arial; 

	font-size:11px;
	color:#0FC;

	

		

	}

	a:visited

{

	font-family:Tahoma, Verdana, Arial; 

	font-size:11px;

	text-decoration:underline;

		

	}

.txtbox

{

	background-color:#C3D7A6;

	width: 85px; 

}

.menu

{

	background-color: #074F21;

	width: 85PX;

	

	

}

.Table

{

	background-color:#C3D7A6;

}

.Head

{

	font-family:Tahoma, Verdana, Arial; 

	font-size:11px;

	text-decoration:underline;

	color: White;

	font-weight:bold;

	

		

	}



.Head:link 

{

	font-family:Tahoma, Verdana, Arial; 

	font-size:11px;

	text-decoration:underline;

	color: White;

	font-weight:bold;

	

		

	}

.Head:hover

{

	font-family:Tahoma, Verdana, Arial; 

	font-size:11px;

	text-decoration:underline;

	color: Yellow;

		

	}

	.Head:visited

{

	font-family:Tahoma, Verdana, Arial; 

	font-size:11px;

	text-decoration:none;

	padding:3px;

		

}

.Head_sub:active

{

	font-family:Arial; 

	font-size:9px;

	text-decoration:none;

	color: White;

	

	background-color:#C3D7A6;

	padding:3px;

		

	}

.Head_sub:link 

{

	font-family: Arial; 

	font-size:9px;

	

	color: Black;

	background-color:#C3D7A6;

	padding:3px;

	text-decoration:none;

		

	}

.Head_sub:hover

{

	font-family: Arial; 

	font-size:11px;

	text-decoration:underline;

	color: Black;

	padding:3px;

	

	

		

	}

	.Head_sub:visited

{

	font-family: Arial; 

	font-size:9px;

	text-decoration:none;

	color: Black;

	padding:3px;

	

		

}

	.Head_sub

{

	font-family: Arial; 

	font-size:11px;

	text-decoration:none;

	color: Black;

	background-color:#C3D7A6;

	padding:3px;

	text-align:left;

	border-bottom:1px solid #FFFFFF;

		

}
.holder {
	
	

}

#menu li a.current,#menu li a.current:hover,#menu li a.current:active {
	background:#069;
	text-decoration:underline;
	cursor:default;
	color:#FFF;
	

}



.gridheading

{

	font-family: Arial, Verdana  ;

	color : #5B6994;

	background-color  :#faf0e6;

	font-size : 10pt;

	border-color:#808080;



}

.td_gridheading

{

	border:1px solid black;



}





.search

{

	background-image: url(../images/ButtonSearch.gif);

    background-repeat: repeat-x;

	background-position: left;

    



}

.bluebutton

{

	background-color:#C3D7A6;

    BORDER-BOTTOM: 1px;

    BORDER-LEFT: 1px;

    BORDER-RIGHT: 1px;

    BORDER-TOP: 1px;

    COLOR: Black;

    FONT-FAMILY: Arial;

    FONT-SIZE:12px;

    TEXT-DECORATION: none

    



}



 



.textbox

{

    COLOR: Black;

    FONT-FAMILY: Arial;

    FONT-SIZE: 8pt;

    BORDER-RIGHT: 1px solid; 

    BORDER-TOP: 1px solid; 

    BORDER-LEFT: 1px solid; 

    BORDER-BOTTOM: 1px solid;

    HEIGHT: 15px;

}











body

{

		

}

/*Menu Css Starts*/



.top-menu {

	clear:both;

	margin:8px 0px 10px 0px;

	font-weight:bold;

	font-size:12px;

	font-family: "Arial";

	color:#fff;

	height:36px;

	background-color:#0a652a;

	text-transform:capitalize;

	text-decoration:none;

}



ul#menu {

	margin:0px;

	padding:0px;

	text-align:center;

	list-style:none;

	background: url(../images/LeftLineMenu.gif) repeat-x;

	float:left;

	width:890px;

	height:38px;

	font-family:Verdana;

	font-weight:bold;

	font-size:14px;

	text-decoration:none;

}

ul#menu li {

	text-align:center;

	float:left;

	list-style:none;

	width:auto;

	display:block;

	height:36px;



	

}



ul#menu li:hover {

	

}

ul#menu li a {
	 border-right:2px solid #0A652A;
       color:#FFFFFF;
       display:block;
       height:100%;
       line-height:36px;
       text-decoration:none;
      padding-left:19px;
      Padding-right:15px;
}



ul#menu li.parent ul.sub li 

{

	float:none;

	clear:both;

	background-color:#8c3b4f;

	border-bottom:1px solid #ac4660;

	height:28px;

	text-align:left;

	width:13em;

	width:237px;

	

}
ul#menu li.parent ul.subsmall li {
	width:150px;
	float:none;

	clear:both;

	background-color:#8c3b4f;

	border-bottom:1px solid #ac4660;

	height:28px;

	text-align:left;
	
}
ul#menu li.parent ul.subsmall2 li {
	width:90px;
	float:none;

	clear:both;

	background-color:#8c3b4f;

	border-bottom:1px solid #ac4660;

	height:28px;

	text-align:left;
	
}


ul#menu li ul li {padding:0px; margin:0px;}

ul#menu li.parent ul.sub li ul, ul#menu li.parent ul.subsmall li ul, ul#menu li.parent ul.subsmall2 li ul{margin:0px; padding:0px; display:none; margin:-33px 0 0 89px;}


ul#menu li.parent ul.sub li:hover ul, ul#menu li.parent ul.subsmall li:hover ul, ul#menu li.parent ul.subsmall2 li:hover ul{display:block;}



ul#menu li.parent ul.sub li a, ul#menu li.parent ul.subsmall li a, ul#menu li.parent ul.subsmall2 li a    

{
	background-color:#CCC;
	font-weight:normal;
	line-height:28px;
	border:2px solid #fff;
	font-weight:bold;
	font-size:12px;
	font-family:Arial;
	padding-left:7px;
	color: #006;

}

ul#menu li.parent ul.sub li a:hover, ul#menu li.parent ul.subsmall li a:hover, ul#menu li.parent ul.subsmall2 li a:hover  

{
	text-decoration:none;
	line-height:28px;
	color: #FFF;
	background-color: #696;
}

ul#menu li a:hover 

{
	text-decoration:none;
	color:#FF0;
	background-color:#526972;
}



ul#menu li.parent ul.sub li:hover, ul#menu li.parent ul.subsmall li:hover, ul#menu li.parent ul.subsmall2 li:hover  

{

	background-color:#ac4861;

	line-height:28px;

}





ul#menu li ul 

{

	border-top:1px solid #fff;

	right:99999em;

	position:absolute;

	top: auto;

	margin:0px;

	padding:0px;

	clear:both;

	z-index:999px;

	z-index:999;

}

ul#menu li.active 

{

	background-color:#8c3b4f;

}

ul#menu li.active ul 

{

	display:block;

	right:auto;

}



ul#menu li > ul { top: auto; left: auto;}

ul#menu li:hover ul, li.over ul { right:auto;  }

/*Menu Css Ends*/

.info {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	color: #0FC;
}
.title_ {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 30px;
	color: #030;
	font-weight: bold;
}
.text_ {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	color: #003;
}
sub_title {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	color: #000;
}
#TABLE1 #main #demos table tr td .message {
	padding:0px;
	margin:0px;
	text-align:left;
	color:#006;
	
}
#TABLE3 ol li {
	text-align:left;
	line-height:1.9;
	
}
#TABLE3 h2 {
	color:#900;
	font-size:2.5em;
}
#TABLE3 tr td #TABLE2 tr td table tr td img {
	margin-bottom: 15px;

}
#TABLE3 h3  {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.5em;
	margin:1em;
	color: #600;
	text-align:justify;
}
#TABLE3 p {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1em;
	line-height: 1.8;
	padding-right: 1.6em;
	padding-left: 1.6em;
	color: #003;
	margin-top: 0.5em;
	text-align:justify;
}
#TABLE3 #arabic p {
	font-size:1.5em;
	
}
#TABLE3 ul li {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1em;
	line-height: 1.8;
	text-align:left;
	color: #003;
}
#TABLE3 h4 {
	color: #600;
	font-size:1.2em;
}
#TABLE3 .space {
	padding-left:150px;
	
}
#TABLE3 .left {
	text-align:left;
	
}
#TABLE3 h5 {
	margin-left:18px;
	line-height:.1em;
	
}
#TABLE3 #gallery {
	margin-top:30px;
}
#TABLE3 tr td .sub_header {
	margin-top:0px;
	
}
#TABLE3 #right img {
	float:right;
	
}
#TABLE3 .sub_header h6 {
	margin-top:0px;
	text-align:center;
	padding-top:3px;
	
}
#TABLE3 .message {
	background-color:#066;
	color:#FFF;
	font-size:1em;
	padding:5px;
	font-style: italic;
	font-weight: bold;
	width:200px;
}
#TABLE3 .center {
	text-align:center;
	background-color:#FFC;	
}
#TABLE3 #important p {
	color:#C00;
	font-size:1em;
	text-decoration:underline;
	font-weight: bold;	
}
#TABLE3 .hajj h4 {
	text-align:left;
	color:#009;
	padding-left:10px;
	
}
#TABLE3 p a {
	color: #600;
	font-size:0.955em;
	font-weight: bold;
}
#TABLE3 p a:hover {
	color:#090;
	
}
#TABLE3 .expansionProject img {
	padding-top:0px;
	
}
#TABLE3 .membership h3 {
	text-transform: capitalize;
	text-align: right;
	color:#060;
	margin:7px;
}
#TABLE3 .makkah img {
	margin-left:-200px;
	
}
p .price {
	padding-left:145px;
	
}
p .price2 {
	padding-left:85px;
	
}
p .price3 {
	padding-left:38px;
	
}
#TABLE3 h4 a {
	color: #600;
	font-size:1.1em;
}
#TABLE3 h4 a:hover {
	color:#060;	
}
#aspnetForm #TABLE3 tr td .donate img {
	border: 2px solid #030;
	margin-top: 10px;
	margin-left: 20px;
}
/***************************************
5A: TABLE STYLES
****************************************/

#TABLE3 table#gearTbl {
	width: 500px;
	border: 1px solid #333;
	margin-top: 30px;
	border-collapse:collapse;
	background: #FF9;
	margin-right: auto;
	margin-left: auto;
}

#TABLE3  #gearTbl thead {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #000;
	font-weight: normal;
}
#TABLE3  #gearTbl tbody {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:0.625em;
	color: #000;
	text-align:center;
}
#TABLE3  #gearTbl caption {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.4em;
	font-weight: bold;
	color: #666;
	text-align: left;
	padding-bottom: .5em;
}
#TABLE3  #gearTbl th {
	background: #444;
	height: 190px;
	vertical-align: bottom;
	font-weight: normal;
	text-align: center;
	padding-bottom: 0.5em;
	border: 1px solid #333;
}
#TABLE3  #gearTbl th.sony {
	background: #444 url(../_images/sony_dscf717.gif) no-repeat center;	
}
#TABLE3  #gearTbl th.fuji {
	background: #444 url(../_images/fuji_finepixf480.gif) no-repeat center;
}
#TABLE3  #gearTbl td {
	padding: 1.5em 1em;
	border: 1px solid #333;
	}
#TABLE3  #gearTbl td.specs {
	text-align: center;
	font-weight: bold;
	color:#060;
}
#TABLE3  #gearTbl td.specs1 {
	text-align: center;
	font-weight: bold;
	color:#006;
}
#TABLE3  #gearTbl td.shura {
	color:#060;
}
#TABLE3  #gearTbl td.shura1 {
	color:#006;
}
#TABLE3  #gearTbl tr.odd {
	background: #FFC;
}
#TABLE3  #gearTbl tr:hover {
	background: #FC0;
}



#TABLE3 table#gearTb2 {
	width: 215px;
	border: 1px solid #333;
	margin: 0 auto;
	border-collapse:collapse;
	background: #FF9;
}

#TABLE3  #gearTb2 thead {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #000;
	font-weight: normal;
}
#TABLE3  #gearTb2 tbody {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:0.625em;
	color: #000;
	text-align:center;
}
#TABLE3  #gearTb2 caption {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.4em;
	font-weight: bold;
	color: #666;
	text-align: left;
	padding-bottom: .5em;
}
#TABLE3  #gearTb2 th {
	background: #444;
	height: 190px;
	vertical-align: bottom;
	font-weight: normal;
	text-align: center;
	padding-bottom: 0.5em;
	border: 1px solid #333;
}

#TABLE3  #gearTb2 td {
	padding:4px;
	border: 1px solid #333;
	}
#TABLE3  #gearTb2 td.specs {
	text-align: center;
	font-weight: bold;
}
#TABLE3  #gearTb2 tr.odd {
	background: #FFC;
}
#TABLE3  #gearTb2 tr:hover {
	background: #FC0;
}


#TABLE3 table#gearTb4 {
	width: 150px;
	border: 1px solid #333;
	border-collapse:collapse;
	background: #360;
	margin-top: -200px;
	margin-bottom: 0;
	margin-left:365px;
	position:absolute;
}

#TABLE3  #gearTb4 thead {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #FFF;
	font-weight: normal;
}
#TABLE3  #gearTb4 tbody {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:0.625em;
	color: #FFF;
	text-align:center;
}
#TABLE3  #gearTb4 caption {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.4em;
	font-weight: bold;
	color: #666;
	text-align: left;
	padding-bottom: .5em;
}
#TABLE3  #gearTb4 th {
	background: #030;
	height: 190px;
	vertical-align: bottom;
	font-weight: normal;
	text-align: center;
	padding-bottom: 0.5em;
	border: 1px solid #333;
}

#TABLE3  #gearTb4 td {
	padding:10px;
	border: 1px solid #333;
	}
#TABLE3  #gearTb4 td.specs {
	text-align: center;
	font-weight: bold;
}
#TABLE3  #gearTb4 tr.odd {
	background: #390;
}
#TABLE3  #gearTb4 tr:hover {
	background: #690;
}

Open in new window

Commented:
do you know which class belongs to the green table.
??

Author

Commented:
line 1126
#TABLE3 table#gearTb4 {
	width: 150px;
	border: 1px solid #333;
	border-collapse:collapse;
	background: #360;
	margin-top: -200px;
	margin-bottom: 0;
	margin-left:365px;
	position:absolute;
}

Open in new window

Commented:
try changin

position:absolute;

to

position:relative;

Author

Commented:
is this going to prevent it from moving to the side?
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview

Author

Commented:
thanks
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.