By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,070 Members | 1,238 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,070 IT Pros & Developers. It's quick & easy.

Background position inccorect in IE 7 or AOL

P: 3
Hi.

I am relatively new to CSS and HTML but have a basic understanding of most things.

One of my backgrounds is not positioning correctly in IE 7 or AOL. The background behind the content (small chocolate area) is positioning slightly down the page instead of at the top. I have used the same techniques in the navigation and it positions fine. Its fine in Fire Fox Opera & Safari. I have run my HTML & CSS through W3c and all is clean.

Link to the page: http://www.elliecooperevents.com/

Here's my CSS (I added it all in case the problem is elsewhere but its the .copybackground - line #62)

I have been searching the internet for 2 days and cannot find the solution.

Thank you to anyone that can help!!

Expand|Select|Wrap|Line Numbers
  1. body {
  2. background-color:#413000;
  3. background-image:url(images/page_background.jpg);
  4. background-repeat:repeat-x;
  5. background-position:top left;
  6. background-attachment:fixed;
  7. }
  8.  
  9. table#white{
  10. background-color:#FFFFFF;
  11. }
  12.  
  13. .center
  14. text-align: center;
  15. }
  16.  
  17. .center table
  18. margin-left: auto;
  19. margin-right: auto;
  20. text-align: left;
  21. }
  22.  
  23.  
  24. #banner {
  25. background-image:url(images/banner.jpg); 
  26. background-repeat:no-repeat; 
  27. height:157px; 
  28. width:770px;
  29. }
  30.  
  31. .navigation {
  32. background-image:url(images/navigation_background.jpg);
  33. background-repeat:no-repeat;
  34. background-position:top left;
  35. height:101px;
  36.  
  37.  
  38. #navigation {
  39. width:215px;
  40. font-family:Arial, Helvetica, sans-serif; 
  41. font-size:11px; 
  42. font-weight:bold;
  43. vertical-align:top;
  44. text-align:left; 
  45.  
  46. ul
  47. {
  48. list-style-type: none;
  49. margin-top:0px;
  50. }
  51.  
  52. li
  53. {
  54. list-style-type: none;
  55. margin-top: 25px;
  56. }
  57.  
  58. .copybackground {
  59. background :url(images/body_background.jpg) no-repeat 0px 0px;
  60. background-repeat:no-repeat;
  61. background-position:top left;
  62. height:29px;
  63. }
  64.  
  65. #copy {
  66. text-align:left;  
  67. width:555px;height:380px;
  68. vertical-align:top;
  69. overflow:auto;
  70. }
  71.  
  72. #title {
  73. font-family:Arial, Helvetica, sans-serif; 
  74. color:#F9F2DE; 
  75. font-size:10pt;
  76.  
  77. p {
  78. font-weight:normal; 
  79. font-family:Arial, Helvetica, sans-serif; 
  80. font-size:11px; 
  81. color:#413000; 
  82. padding-left:30px; 
  83. padding-right:40px; 
  84. text-align:justify;
  85. }
  86.  
  87. h1 {
  88. font-weight:bold; 
  89. font-family:Arial, Helvetica, sans-serif; 
  90. font-size:14px; 
  91. color:#A9D395; 
  92. padding-left:30px;
  93. }
  94.  
  95. a img {
  96. border:none;
  97. }
  98.  
  99. #footer {
  100. background-image:url(images/footer_background.jpg); 
  101. background-repeat:no-repeat;
  102. background-position:top;
  103. vertical-align:top;
  104. height:42px; 
  105. width:546px;
  106. }
  107.  
  108. #footerhome {
  109. background-image:url(images/footer_background2.jpg); 
  110. background-repeat:no-repeat;
  111. background-position:top;
  112. vertical-align:top;
  113. height:42px; 
  114. width:224px;
  115. }
  116.  
  117. #footerclear {
  118. background-image:url(images/footer2b.jpg); 
  119. background-repeat:no-repeat;
  120. background-position:top;
  121. vertical-align:top;
  122. height:42px; 
  123. width:224px;
  124. }
  125.  
  126. #basecopy {
  127. font-family:Arial, Helvetica, sans-serif; 
  128. font-size:11px; 
  129. font-weight:normal;
  130. color:#FFFAE9;
  131. text-align:center;
  132. padding-top:10px;
  133.  
  134. #designby {
  135. font-family:Arial, Helvetica, sans-serif; 
  136. font-size:10px; 
  137. font-weight:normal;
  138. text-align:center;
  139. padding-top:10px;
  140.  
  141. a:link
  142. {
  143. font-weight:bold;
  144. font-size:11px;
  145. color:#413000;
  146. text-decoration: none;
  147. border:none;
  148. }
  149. a:visited
  150. {
  151. font-weight:bold;
  152. font-size:11px;
  153. color:#413000;
  154. text-decoration: none;
  155. border:none;
  156. }
  157. a:hover
  158. {
  159. color:#A9D395;
  160. text-decoration: none;
  161. border:none;
  162. }
  163. a:active
  164. {
  165. text-decoration: none;
  166. color:#A9D395;
  167. border:none;
  168. }
  169.  
  170. #basecopy a:link
  171. {
  172. font-family:Arial, Helvetica, sans-serif; 
  173. font-size:11px; 
  174. font-weight:normal;
  175. color:#F1E5C8;
  176. }
  177.  
  178. #basecopy a:visited
  179. {
  180. font-family:Arial, Helvetica, sans-serif; 
  181. font-size:11px; 
  182. font-weight:normal;
  183. color:#F1E5C8;
  184. }
  185.  
  186. #basecopy a:hover
  187. {
  188. font-family:Arial, Helvetica, sans-serif; 
  189. font-size:11px; 
  190. font-weight:normal;
  191. color:#A9D395;
  192. text-decoration:underline;
  193. }
  194.  
  195. #basecopy a:active
  196. {
  197. font-family:Arial, Helvetica, sans-serif; 
  198. font-size:11px; 
  199. font-weight:normal;
  200. color:#A9D395;
  201. }
  202.  
  203. #designby a:link
  204. {
  205. font-family:Arial, Helvetica, sans-serif; 
  206. font-size:10px; 
  207. font-weight:normal;
  208. color:#A29982;
  209. }
  210.  
  211. #designby a:visited
  212. {
  213. font-family:Arial, Helvetica, sans-serif; 
  214. font-size:10px; 
  215. font-weight:normal;
  216. color:#A29982;
  217. }
  218.  
  219. #designby a:hover
  220. {
  221. font-family:Arial, Helvetica, sans-serif; 
  222. font-size:10px; 
  223. font-weight:normal;
  224. color:#A9D395;
  225. text-decoration:underline;
  226. }
  227.  
  228. #designby a:active
  229. {
  230. font-family:Arial, Helvetica, sans-serif; 
  231. font-size:10px; 
  232. font-weight:normal;
  233. color:#A9D395;
  234. }
  235.  
  236. .floatright 
  237. float: right;
  238. margin-left: 0px;
  239. border-style: none;
  240. }
  241.  
  242.  
Sep 1 '08 #1
Share this Question
Share on Google+
10 Replies


Expert 100+
P: 397
It seems the IEs need more than a little gentle persuasion... Cursory checked local system only in IE/6, IE/7, Mac Opera, FF, Safari. BTW, when you provide the URL, as you have, anyone on the forum can open your style sheet(s).

Expand|Select|Wrap|Line Numbers
  1. .copybackground {border:1px solid red;<-------------:: for position only
  2. background :url(body_bac.jpg) no-repeat 0px 0px;
  3. background-repeat:no-repeat;<-------------::delete
  4. position:relative;<-------------:: delete
  5.  height:29px; 
  6. }
  7.  
  8.  
  9. ---:: add the below immediately beneath your link to the external style sheet  in the head of the document ::---
  10.  
  11. <!--[if lt IE 8]>
  12. <style>
  13. .copybackground {
  14. position: absolute; top: 189px;width: 150px;
  15. }
  16. </style>
  17. <![endif]-->     
  18.  
Sep 2 '08 #2

Dormilich
Expert Mod 5K+
P: 8,639
It seems the IEs need more than a little gentle persuasion...
David, do you know, if IE supports background-attachment? (As far as I recall, there were problems concerning that property)

regards
Sep 2 '08 #3

Expert 100+
P: 397
David, do you know, if IE supports background-attachment?
IE/6 only supports background-attachment: fixed; on the <body>.

Re: background-attachment:
CSS 2.1 specs
meyer-- complex spiral -- background-attachment
ppk's css browser support chart
webdevout web browser support chart
Sep 2 '08 #4

P: 3
Now it works perfectly! I greatly appreciate your assistance.

I have been told I should be building everything without tables, purely CSS.....any comments/opinions on that?

Thank you again.
Sep 2 '08 #5

Dormilich
Expert Mod 5K+
P: 8,639
I have been told I should be building everything without tables, purely CSS.....any comments/opinions on that?
good idea, usually this gives cleaner source code.

glad we could help you

@ David Laakso: I've remembered that 'complex spiral' article, so I asked
Sep 2 '08 #6

Expert 100+
P: 397
I have been told I should be building everything without tables, purely CSS....
.
Kudos to whoever told you that. They are right!!!

Contemporary sites are tableless. Tables are used within tableless sites to present tabular data. Your home page has no tabular data; consequently, it should be entirely CSS-- no tables whatsoever needed.

Layout number 28 on this page [1] is very similar to yours, if want to catapult your client into 2008. Note the primary content is first in the document source order-- an advantage for a lot of reasons nowadays...

See this site for setting navigation [2].

[1] number 28
[2] setting lists
Sep 2 '08 #7

P: 3
Excellent resource - very exciting to be moving forward - thank you!
Sep 2 '08 #8

Expert 100+
P: 397
Excellent resource - very exciting to be moving forward - thank you!
Sure. Good luck. Thimk CSS.
Sep 2 '08 #9

P: 1
I have been told I should be building everything without tables, purely CSS.....any comments/opinions on that?
We have 2008. You shouldn't even be thinking about asking this question.
Sep 14 '08 #10

Expert 100+
P: 397
You shouldn't even be thinking about asking this question.
Why not? Perfectly good and honest questions are always welcome in the circles some of us travel...
"The wisest mind has something yet to learn."
-- George Santayana (1863 - 1952)
Sep 14 '08 #11

Post your reply

Sign in to post your reply or Sign up for a free account.