473,372 Members | 1,539 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,372 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 5727
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,658 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,658 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

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

Similar topics

2
by: Markus Mohr | last post by:
Hi, everyone, I have a special problem: For every monitor resolution in 200 pixel steps from 800 to 1600 pixels I have an image to be shown as centered background-image. Those images all...
11
by: Konrad Den Ende | last post by:
I have a function returning a string but the problem is that the color of it is blue which suits me well for some pages but not for others. Is it possible to "feel" what the color of the background...
2
by: chris_culley | last post by:
Hi there, I've got a gif with (highly) irregular shapes (lots of jigsaw pieces) that I want to map so that each piece is a link... The pieces are currently just a frame drawing, but as they...
0
by: Skeeve | last post by:
Hi there, I'm trying to create a containing box (relative position), and within it, I'm trying to line that box with four (top, right, left, bottom) thin boxes that contain a repeated background...
2
by: Skeeve | last post by:
Hi there, I'm trying to create a containing box (relative position), and within it, I'm trying to line that box with four (top, right, left, bottom) thin boxes that contain a repeated background...
0
by: Jeb Hunter | last post by:
Well, how can I describe this succinctly? I have a page with DIVs that us background images to produce a border effect. It works perfectly well, but I want to make up (for now) 3 different...
1
by: nicky77 | last post by:
Hi, I've created a nav bar using a background image for rollover effects. Everything works as I had hoped, however, for some reason it seems that an area of whitespace (the same size of the...
2
by: thephatp | last post by:
I'm having a problem with IE rendering correctly. I'm experimenting with using all div's in my pages now, and I'm not very familiar with the quirks of IE. I have created a sample page, and I'm...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

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.