login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Positie abolute in safari anders weergegeven

Offline roscov27 - 31/07/2008 16:00
Avatar van roscov27Nieuw lid Hallo,
Ik ben een site aan het opzetten, heb alleen wat problemen met een absolute positie van een class element (box).....Hij wordt in IE 6 & 7 en FF op de juiste positie weergegeven, alleen bij safari staat hij verder van de rand. (gaat om een joomla cms template)

Ook wordt in FF & safari de "box" opgeschoven als er een scroll bar weergegeven wordt. In IE 6 & 7 gebeurt dit niet......Kan dit opschuiven uitgezet worden??

Mijn probleem is dus de weergave in Safari en het opschuiven van de "box" in safari en FF.

Weet er iemand raad?

Het adres is:
http://www.writenow.ch/site/print-publishing

De CSS code voor de Box:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .contenttoc	{
  2. 		position: absolute;
  3. 		width: 125px;
  4. 		top: 0px;
  5. 		right: 0px;
  6. 		padding: 5px;
  7. 		border-left: dotted #cb7f7f 1px;
  8. 		border-bottom: dotted #cb7f7f 1px;


Dit is de complete file:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. /* default write now template */
  2.  
  3.  
  4.  
  5. body {
  6. 	margin-top:30px;
  7. 	font-family:Verdana, Arial, Helvetica, sans-serif;
  8. 	font-size:10px;
  9. 	line-height:18px;
  10. 	background-color:#F6F6F6;
  11.  
  12. }
  13.  
  14. h1 {font-size:14px; margin-top:4px; color:#c3004a; font-weight:bold;}
  15. h2 {font-size:12px; color:#c3004a; margin-bottom:3px; margin-top:2px;}
  16. h3 {font-size:12px; color:#c3004a;}
  17. h4 {font-size:10px; color:#c3004a; margin-bottom:0px; margin-top:0px;}
  18.  
  19. .txt a {color:#c3004a;}
  20. .txt a:hover {color:#990000;}
  21. .txt a:visited {color:#cb7f7f;}
  22.  
  23. ul {text-decoration:none; list-style-image:url(/site/images/pfeil.gif); }
  24. first-child+html ul{margin-left:16px;}
  25. *html ul{margin-left:16px;}
  26. ul a{text-decoration:none;}
  27.  
  28. .tdSide {width:18%;}
  29.  
  30. /******************************************
  31. **               Felder                  **
  32. ******************************************/
  33.  
  34. .feld { 
  35. 		width:125px; 
  36. 		height:125px; 
  37. 		margin-right:10px; 
  38. 		margin-bottom:10px;  
  39. 		background-color:#cb7f7f; 
  40. 		border:none; 
  41. 		float:left; 
  42. 		display:block;
  43. }
  44.  
  45. .feldMenu { 
  46. 		background-color:#b69927; 
  47. 		display:block; 
  48. 		z-index:10; 
  49. 		width:125px; 
  50. 		height:125px;
  51. }
  52.  
  53. .feld img { border:none; display:block; }
  54.  
  55. .feld transparent { background:none; }
  56.  
  57. .feldActive { background-color:#a48a25; display:block; z-index:10; width:125px; height:125px;}
  58.  
  59. .feldVideo { background-color:#000000; display:block; z-index:10;}
  60.  
  61. #bodyContainer { 
  62. 			width:670px; 
  63. 			height:560px; 
  64. 			margin-top:-300px; 
  65. 			margin-left:-335px; 
  66. 			top:50%; 
  67. 			left:50%; 
  68. 			position:absolute;
  69. }
  70.  
  71.  
  72. #container { 
  73. 			width:680px; 
  74. 			position:fixed; 
  75. 			margin:auto; 
  76. 			z-index:0;
  77. }
  78.  
  79.  
  80. .menu_left	{
  81. 			margin-top:135px; 
  82. 			width:105px; 
  83. 			height:240px; 
  84. 			padding:10px;
  85. }
  86.  
  87. .txt		{
  88. 			position: fixed;
  89. 			margin-top:135px; 
  90. 			margin-left:135px; 
  91. 			width:508px; 
  92. 			height:373px; 
  93. 			padding:10px;
  94. }
  95.  
  96. /******************************************
  97. **                 Menu Left             **
  98. ******************************************/
  99.  
  100.  
  101. .menu_left { 
  102. 	background-color:#B69927; 
  103. 	display:block; 
  104. 	z-index:10; 
  105. 	position:absolute; 
  106. 	overflow:auto; 
  107. 	top:0px; 
  108. 	left:0px; 
  109. }
  110.  
  111. a.mainlevel {
  112. 	font-size:11px; 
  113. 	color:#ffffff; 
  114. 	text-decoration: none;
  115. 	line-height: 28px;
  116. 	border-bottom: dotted 1px;
  117. 	display:block;
  118. }
  119. a.ul sublevel {
  120. }
  121.  
  122. .feld a:hover { 
  123. 	background-color:#a48a25;
  124. 	display:block;  
  125. }
  126.  
  127. .feld a:active { 
  128. 	background-color:#a48a25;
  129. 	display:block;  
  130. }
  131.  
  132.  
  133. /******************************************
  134. **                 Footer                **
  135. ******************************************/
  136.  
  137. #footer a {text-decoration:none; display:block; cursor:pointer;}
  138.  
  139. #footer_links {padding-left:5px; width:255px; height:17px; background-color:#000000; float:left; line-height:16px;}
  140. #footer_links a {text-decoration:none; color:#FFF;}
  141.  
  142.  
  143. #footer_rechts {margin-left:10px; width:390px; height:17px; background-color:#000000; float:left; color:#CCCCCC;
  144. 				padding-right:5px; text-align:right; line-height:16px;}			
  145. #footer_rechts a {text-decoration:none; color:#FFFFFF;}
  146.  
  147. /******************************************
  148. **               Textfeld                **
  149. ******************************************/
  150.  
  151. .txt { 
  152. 		background-color:#FFF; 
  153. 		display:block; 
  154. 		position:absolute;
  155. 		overflow-y: auto; 
  156. 		overflow-x: hidden;
  157. 		border:1px solid #cb7f7f;
  158. 		top:0px;
  159. 		left:0px;
  160. 		z-index:10; 
  161. }   
  162.  
  163. .txt img { border:none; }
  164.  
  165. /*@media not tty { .txt{ top:30px; left:8px; } }*/
  166.  
  167. /*html .txt { margin-top:100px; }*/
  168.  
  169. /*ul { margin-bottom:-10px; margin-top:8px;}*/
  170.  
  171. .contentpaneopen	{
  172. 		height: auto;
  173. 		width: 390px;
  174. 		padding-left: 5px;
  175. 		padding-right: 5px;
  176. 		margin-top: 20px;
  177. }
  178.  
  179. .contentpaneopencustom	{
  180. 		height: auto;
  181. 		width: 490;
  182. 		padding-left: 5px;
  183. 		padding-right: 5px;
  184. 		margin-top: 20px;
  185. }
  186.  
  187. .contenttoc	th{
  188. 		color:#C3004A;
  189. 		font-size:12px;
  190. 		font-weight: bold;
  191. 		margin-bottom:3px;
  192. 		margin-top:2px;
  193. 		text-align: left;
  194. }
  195.  
  196. .contenttoc	{
  197. 		position: absolute;
  198. 		width: 125px;
  199. 		top: 0px;
  200. 		right: 0px;
  201. 		padding: 5px;
  202. 		border-left: dotted #cb7f7f 1px;
  203. 		border-bottom: dotted #cb7f7f 1px;
  204.  
  205.  
  206. }
  207.  
  208. /*		
  209. .contenttoc a:visited 	{
  210. 		color:#ffffff;
  211. }
  212.  
  213. .contenttoc a:hover 	{
  214. 		color:#ffffff;
  215. 		text-decoration: none;
  216. }
  217.  
  218. .contenttoc a:active 	{
  219. 		color:#ffffff;
  220. 		text-decoration: none;
  221. }
  222.  
  223. .contenttoc a 	{
  224. 		color:#ffffff;
  225. }*/
  226.  
  227.  
  228.  
  229. td.contentheading {
  230. 		color:#C3004A;
  231. 		font-size:12px;
  232. 		font-weight: bold;
  233. 		margin-bottom:3px;
  234. 		margin-top:2px;
  235. }
  236.  
  237. table.blog {
  238. 		margin-top: 20px;
  239. }
  240.  
  241.  
  242. /*E-mail contact form*/
  243. div.contact_email {
  244. 		width: 300px;
  245.  
  246. }
  247.  
  248.  
  249.  
  250. label
  251.     {
  252.     width: 150px;
  253.     text-align: right;
  254.  
  255.     margin-right: 15px;
  256.     }
  257.  
  258. input
  259.     {
  260.     background-color: #f5f5f5;
  261.     font-size: x-small;
  262.     border-width: 1px;
  263.     border-style: solid;
  264.     border-color: #cccccc;
  265.     margin-bottom: 10px;
  266.     }
  267.  
  268. textarea
  269.     {
  270.     width: 250px;
  271.     height: 100px;
  272.     background-color: #f5f5f5;
  273.  
  274.     border-width: 1px;
  275.     border-style: solid;
  276.     border-color: #cccccc;
  277.  
  278.     font-family: Arial, Helvetica, sans-serif;
  279.     font-size: small;
  280.  
  281.     margin-bottom: 10px;
  282.     }
  283.  
  284.  
  285. input[type=checkbox]	{
  286. 	width: 10px;
  287. }
  288.  
  289. button	{
  290. 	background-color: #f5f5f5;
  291.     font-size: x-small;
  292.     border-width: 1px;
  293.     border-style: solid;
  294.     border-color: #cccccc;
  295.     margin-bottom: 10px;
  296. }
  297.  
  298.  
  299.  
  300. /******************************************
  301. **               Scrollbar                **
  302. ******************************************/
  303.  
  304. .txt {
  305.   scrollbar-base-color:#ede0e0;
  306.   scrollbar-3d-light-color:#cb7f7f;
  307.   scrollbar-arrow-color:#b00042;
  308.   scrollbar-darkshadow-color:#000000;
  309.   scrollbar-face-color:#cb7f7f;
  310.   scrollbar-highlight-color:#cb7f7f;
  311.   scrollbar-shadow-color:#cb7f7f;
  312.   scrollbar-track-color:#ede0e0;
  313. 	}
  314.  
  315. /******************************************
  316. **               Liste                   **
  317. ******************************************/
  318.  
  319. .liste {font-size:10px; line-height:22px; color:#000000; text-decoration:none;}
  320.  
  321. .team {line-height:14px;}
  322.  
  323. .liste img {text-decoration:none;}
  324.  
  325. input {font-size:10px; width:100%;}
  326. textarea {width:100%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;}
  327.  
  328. table tr td {vertical-align:top;}
  329.  
  330. .inputActiv{background-color:#0033FF;}
  331.  
  332. #print {padding-top:5px;}
  333. #print img { border:none; margin-top:4px;}

2 antwoorden

Gesponsorde links
Offline Quibus - 31/07/2008 18:02 (laatste wijziging 31/07/2008 18:20)
Avatar van Quibus Nieuw lid Waarom nu een aantal classes twee of drie keer declareren?
bv. class .txt staat er 3 keer in. Eén keer is echt ruim voldoende.
je kunt de gegevens gewoon achter elkaar zetten.
bv:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. .txt {
  2. position: fixed;
  3. margin-top:135px;
  4. margin-left:135px;
  5. width:508px;
  6. height:373px;
  7. padding:10px;
  8.  
  9. background-color:#FFF;
  10. display:block;
  11. position:absolute;
  12. overflow-y: auto;
  13. overflow-x: hidden;
  14. border:1px solid #cb7f7f;
  15. top:0px;
  16. left:0px;
  17. z-index:10;
  18.  
  19. scrollbar-base-color:#ede0e0;
  20. scrollbar-3d-light-color:#cb7f7f;
  21. scrollbar-arrow-color:#b00042;
  22. scrollbar-darkshadow-color:#000000;
  23. scrollbar-face-color:#cb7f7f;
  24. scrollbar-highlight-color:#cb7f7f;
  25. scrollbar-shadow-color:#cb7f7f;
  26. scrollbar-track-color:#ede0e0;
  27. }




Verder kan ik niets relevants zeggen van je site, omdat ik de rest van je broncode nog niet heb kunnen bestuderen.
Offline roscov27 - 04/08/2008 10:54
Avatar van roscov27 Nieuw lid Hallo Quibus

Citaat:
Waarom nu een aantal classes twee of drie keer declareren?
bv. class .txt staat er 3 keer in. Eén keer is echt ruim voldoende.
je kunt de gegevens gewoon achter elkaar zetten.
bv:


Ik heb de oude css van de site gebruikt en deze aangepast, de oude webdesigner had alle css opgedeeld en daardoor worden de classes meerdere keren vermeld..... Moet het eigenlijk nog even netjes bij elkaar zetten.... Als je raad weet hoor ik het graag.

mvg Rogier
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.178s