471,337 Members | 982 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,337 software developers and data experts.

Background position inccorect in IE 7 or AOL

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
10 5604
David Laakso
397 Expert 256MB
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
8,656 Expert Mod 8TB
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
David Laakso
397 Expert 256MB
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
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
8,656 Expert Mod 8TB
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
David Laakso
397 Expert 256MB
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
Excellent resource - very exciting to be moving forward - thank you!
Sep 2 '08 #8
David Laakso
397 Expert 256MB
Excellent resource - very exciting to be moving forward - thank you!
Sure. Good luck. Thimk CSS.
Sep 2 '08 #9
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
David Laakso
397 Expert 256MB
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.

Similar topics

11 posts views Thread by Konrad Den Ende | last post: by
2 posts views Thread by chris_culley | last post: by
reply views Thread by rosydwin | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.