• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 201
  • Last Modified:

position problem??

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?
0
falfouli
Asked:
falfouli
  • 4
  • 4
1 Solution
 
TonyRebaCommented:
please post your css style
0
 
falfouliAuthor 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

0
 
TonyRebaCommented:
do you know which class belongs to the green table.
??
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
falfouliAuthor 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

0
 
TonyRebaCommented:
try changin

position:absolute;

to

position:relative;
0
 
falfouliAuthor Commented:
is this going to prevent it from moving to the side?
0
 
TonyRebaCommented:
Yes it should  , you might want to change to increase the value of
margin-top: -200px;
If needed.

Property Values

Value Description
absolute Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. The element's position is specified with the "left", "top", "right", and "bottom" properties

fixed Generates an absolutely positioned element, positioned relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties

relative Generates a relatively positioned element, positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position

static Default. No position, the element occurs in the normal flow (ignores any top, bottom, left, right, or z-index declarations)
inherit Specifies that the value of the position property should be inherited from the parent element
0
 
falfouliAuthor Commented:
thanks
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now