CSS and IE8 Problem

Reply

Join Date: Feb 2008
Posts: 20
Reputation: myth3_16 is an unknown quantity at this point 
Solved Threads: 0
myth3_16 myth3_16 is offline Offline
Newbie Poster

CSS and IE8 Problem

 
0
  #1
Jun 24th, 2009
Hello all,

I wonder if anyone can help me i've got this page here (http://www.personally-yours.co.uk/scrolls/tester.php)

The problem I have with it is that it almost freezes when scrolling down to the examples on the page.

The code that this runns from is in a CSS stylesheet. I have fully checked my code and CSS and validated them and they are fully validated.

I was wondering if anyone else had seen this sort of problem before.

the code in the stylesheet is as follows:

HTML and CSS Syntax (Toggle Plain Text)
  1. #pic { position: relative;
  2. width: 54px;
  3. z-index: 6;
  4. }
  5.  
  6. #pic a .large {
  7. border: 0px;
  8. display: block;
  9. height: 0px;
  10. left: -1px;
  11. position: absolute;
  12. top: 1px;
  13. width: 1px;
  14. }
  15.  
  16. #pic a img {
  17. border: 0;
  18. }
  19.  
  20.  
  21. #pic a.p1, #pic a.p1:visited {
  22. height: 125px;
  23. left: 0;
  24. text-decoration: none;
  25. top: 0; width: 109px;
  26. }
  27.  
  28. #pic a.p1:hover {
  29. background-color: #8C97A3;
  30. color: #000000;
  31. text-decoration: none;
  32. }
  33.  
  34. #pic a.p1:hover .large {
  35. border: 1px solid #000000;
  36. width: 350px;
  37. height: 466px;
  38. display: block;
  39. left: 150px;
  40. position: absolute;
  41. top: -60px;
  42. }
  43. /*married images */
  44. #pic2 {
  45. position: relative; width: 54px;
  46. z-index: 5;
  47. }
  48.  
  49. #pic2 a .large {
  50. border: 0px;
  51. display: block;
  52. height: 1px;
  53. left: -1px;
  54. position: absolute;
  55. top: -1px;
  56. width: 1px;
  57. }
  58.  
  59. #pic2 a img {
  60. border: 0;
  61. }
  62.  
  63.  
  64. #pic2 a.p2, #pic2 a.p2:visited {
  65. height: 125px;
  66. left: 0;
  67. text-decoration: none;
  68. top: 0; width: 109px;
  69. }
  70.  
  71. #pic2 a.p2:hover {
  72. background-color: #8C97A3;
  73. color: #000000;
  74. text-decoration: none;
  75. }
  76.  
  77. #pic2 a.p2:hover .large {
  78. border: 1px solid #000000;
  79. width: 350px;
  80. height: 466px;
  81. display: block;
  82. left: 150px;
  83. position: absolute;
  84. top: -60px;
  85. }
  86. /*christened images */
  87. #pic3 {
  88. position: relative; width: 54px;
  89. z-index: 4;
  90. }
  91.  
  92. #pic3 a .large {
  93. border: 0px;
  94. display: block;
  95. height: 1px;
  96. left: -1px;
  97. position: absolute;
  98. top: -1px;
  99. width: 1px;
  100. }
  101.  
  102. #pic3 a img {
  103. border: 0;
  104. }
  105.  
  106.  
  107. #pic3 a.p3, #pic3 a.p3:visited {
  108. height: 125px;
  109. left: 0;
  110. text-decoration: none;
  111. top: 0; width: 109px;
  112. }
  113.  
  114. #pic3 a.p3:hover {
  115. background-color: #8C97A3;
  116. color: #000000;
  117. text-decoration: none;
  118. }
  119.  
  120. #pic3 a.p3:hover .large {
  121. border: 1px solid #000000;
  122. width: 350px;
  123. height: 466px;
  124. display: block;
  125. left: 75px;
  126. position: absolute;
  127. top: -60px;
  128. }
  129. /*first name images */
  130. #pic4 {
  131. position: relative; width: 54px;
  132. z-index: 3;
  133. }
  134.  
  135. #pic4 a .large {
  136. border: 0px;
  137. display: block;
  138. height: 1px;
  139. left: -1px;
  140. position: absolute;
  141. top: -1px;
  142. width: 1px;
  143. }
  144.  
  145. #pic4 a img {
  146. border: 0;
  147. }
  148.  
  149.  
  150. #pic4 a.p4, #pic4 a.p4:visited {
  151. height: 125px;
  152. left: 0;
  153. text-decoration: none;
  154. top: 0; width: 109px;
  155. }
  156.  
  157. #pic4 a.p4:hover {
  158. background-color: #8C97A3;
  159. color: #000000;
  160. text-decoration: none;
  161. }
  162.  
  163. #pic4 a.p4:hover .large {
  164. border: 1px solid #000000;
  165. width: 350px;
  166. height: 466px;
  167. display: block;
  168. left: 75px;
  169. position: absolute;
  170. top: -60px;
  171. }
  172. /*first name images */
  173. #pic5 {
  174. position: relative; width: 54px;
  175. z-index: 2;
  176. }
  177.  
  178. #pic5 a .large {
  179. border: 0px;
  180. display: block;
  181. height: 1px;
  182. left: -1px;
  183. position: absolute;
  184. top: -1px;
  185. width: 1px;
  186. }
  187.  
  188. #pic5 a img {
  189. border: 0;
  190. }
  191.  
  192.  
  193. #pic5 a.p5, #pic5 a.p5:visited {
  194. height: 125px;
  195. left: 0;
  196. text-decoration: none;
  197. top: 0; width: 109px;
  198. }
  199.  
  200. #pic5 a.p5:hover {
  201. background-color: #8C97A3;
  202. color: #000000;
  203. text-decoration: none;
  204. }
  205.  
  206. #pic5 a.p5:hover .large {
  207. border: 1px solid #000000;
  208. width: 350px;
  209. height: 466px;
  210. display: block;
  211. left: 75px;
  212. position: absolute;
  213. top: -60px;
  214. }
  215. /*first name images */
  216. #pic6 {
  217. position: relative; width: 54px;
  218. z-index: 1;
  219. }
  220.  
  221. #pic6 a .large {
  222. border: 0px;
  223. display: block;
  224. height: 1px;
  225. left: -1px;
  226. position: absolute;
  227. top: -1px;
  228. width: 1px;
  229. }
  230.  
  231. #pic6 a img {
  232. border: 0;
  233. }
  234.  
  235.  
  236. #pic6 a.p6, #pic6 a.p6:visited {
  237. height: 125px;
  238. left: 0;
  239. text-decoration: none;
  240. top: 0; width: 109px;
  241. }
  242.  
  243. #pic6 a.p6:hover {
  244. background-color: #8C97A3;
  245. color: #000000;
  246. text-decoration: none;
  247. }
  248.  
  249. #pic6 a.p6:hover .large {
  250. border: 1px solid #000000;
  251. width: 350px;
  252. height: 466px;
  253. display: block;
  254. left: 75px;
  255. position: absolute;
  256. top: -60px;
  257. }
  258. /*first name images */
  259. #pic7 {
  260. position: relative; width: 54px;
  261. z-index: 0;
  262. }
  263.  
  264. #pic7 a .large {
  265. border: 0px;
  266. display: block;
  267. height: 1px;
  268. left: -1px;
  269. position: absolute;
  270. top: -1px;
  271. width: 1px;
  272. }
  273.  
  274. #pic7 a img {
  275. border: 0;
  276. }
  277.  
  278.  
  279. #pic7 a.p7, #pic7 a.p7:visited {
  280. height: 125px;
  281. left: 0;
  282. text-decoration: none;
  283. top: 0; width: 109px;
  284. }
  285.  
  286. #pic7 a.p7:hover {
  287. background-color: #8C97A3;
  288. color: #000000;
  289. text-decoration: none;
  290. }
  291.  
  292. #pic7 a.p7:hover .large {
  293. border: 1px solid #000000;
  294. width: 350px;
  295. height: 466px;
  296. display: block;
  297. left: 75px;
  298. position: absolute;
  299. top: -60px;
  300. }

Any help would be appreciated.

Thanks,
Reply With Quote Quick reply to this message  
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 165
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: CSS and IE8 Problem

 
0
  #2
Jun 25th, 2009
The problem I see is that the script (or whatever is making the images appear) is taking over, preventing scrolling from working.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
Join Date: Feb 2008
Posts: 20
Reputation: myth3_16 is an unknown quantity at this point 
Solved Threads: 0
myth3_16 myth3_16 is offline Offline
Newbie Poster

Re: CSS and IE8 Problem

 
0
  #3
Jun 25th, 2009
so is there any suggestions about what I can do to rectify it?
Reply With Quote Quick reply to this message  
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 165
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: CSS and IE8 Problem

 
0
  #4
Jun 28th, 2009
Put delays in your script, so it is not running continuously.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
Reply

This thread is more than three months old.
Perhaps start a new thread instead?
Message:



Similar Threads
Other Threads in the HTML and CSS Forum


Views: 1654 | Replies: 3
Thread Tools Search this Thread



Tag cloud for HTML and CSS
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC