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!! -
body {
-
background-color:#413000;
-
background-image:url(images/page_background.jpg);
-
background-repeat:repeat-x;
-
background-position:top left;
-
background-attachment:fixed;
-
}
-
-
table#white{
-
background-color:#FFFFFF;
-
}
-
-
.center
-
{
-
text-align: center;
-
}
-
-
.center table
-
{
-
margin-left: auto;
-
margin-right: auto;
-
text-align: left;
-
}
-
-
-
#banner {
-
background-image:url(images/banner.jpg);
-
background-repeat:no-repeat;
-
height:157px;
-
width:770px;
-
}
-
-
.navigation {
-
background-image:url(images/navigation_background.jpg);
-
background-repeat:no-repeat;
-
background-position:top left;
-
height:101px;
-
}
-
-
-
#navigation {
-
width:215px;
-
font-family:Arial, Helvetica, sans-serif;
-
font-size:11px;
-
font-weight:bold;
-
vertical-align:top;
-
text-align:left;
-
}
-
-
ul
-
{
-
list-style-type: none;
-
margin-top:0px;
-
}
-
-
li
-
{
-
list-style-type: none;
-
margin-top: 25px;
-
}
-
-
.copybackground {
-
background :url(images/body_background.jpg) no-repeat 0px 0px;
-
background-repeat:no-repeat;
-
background-position:top left;
-
height:29px;
-
}
-
-
#copy {
-
text-align:left;
-
width:555px;height:380px;
-
vertical-align:top;
-
overflow:auto;
-
}
-
-
#title {
-
font-family:Arial, Helvetica, sans-serif;
-
color:#F9F2DE;
-
font-size:10pt;
-
}
-
-
p {
-
font-weight:normal;
-
font-family:Arial, Helvetica, sans-serif;
-
font-size:11px;
-
color:#413000;
-
padding-left:30px;
-
padding-right:40px;
-
text-align:justify;
-
}
-
-
h1 {
-
font-weight:bold;
-
font-family:Arial, Helvetica, sans-serif;
-
font-size:14px;
-
color:#A9D395;
-
padding-left:30px;
-
}
-
-
a img {
-
border:none;
-
}
-
-
#footer {
-
background-image:url(images/footer_background.jpg);
-
background-repeat:no-repeat;
-
background-position:top;
-
vertical-align:top;
-
height:42px;
-
width:546px;
-
}
-
-
#footerhome {
-
background-image:url(images/footer_background2.jpg);
-
background-repeat:no-repeat;
-
background-position:top;
-
vertical-align:top;
-
height:42px;
-
width:224px;
-
}
-
-
#footerclear {
-
background-image:url(images/footer2b.jpg);
-
background-repeat:no-repeat;
-
background-position:top;
-
vertical-align:top;
-
height:42px;
-
width:224px;
-
}
-
-
#basecopy {
-
font-family:Arial, Helvetica, sans-serif;
-
font-size:11px;
-
font-weight:normal;
-
color:#FFFAE9;
-
text-align:center;
-
padding-top:10px;
-
}
-
-
#designby {
-
font-family:Arial, Helvetica, sans-serif;
-
font-size:10px;
-
font-weight:normal;
-
text-align:center;
-
padding-top:10px;
-
}
-
-
a:link
-
{
-
font-weight:bold;
-
font-size:11px;
-
color:#413000;
-
text-decoration: none;
-
border:none;
-
}
-
a:visited
-
{
-
font-weight:bold;
-
font-size:11px;
-
color:#413000;
-
text-decoration: none;
-
border:none;
-
}
-
a:hover
-
{
-
color:#A9D395;
-
text-decoration: none;
-
border:none;
-
}
-
a:active
-
{
-
text-decoration: none;
-
color:#A9D395;
-
border:none;
-
}
-
-
#basecopy a:link
-
{
-
font-family:Arial, Helvetica, sans-serif;
-
font-size:11px;
-
font-weight:normal;
-
color:#F1E5C8;
-
}
-
-
#basecopy a:visited
-
{
-
font-family:Arial, Helvetica, sans-serif;
-
font-size:11px;
-
font-weight:normal;
-
color:#F1E5C8;
-
}
-
-
#basecopy a:hover
-
{
-
font-family:Arial, Helvetica, sans-serif;
-
font-size:11px;
-
font-weight:normal;
-
color:#A9D395;
-
text-decoration:underline;
-
}
-
-
#basecopy a:active
-
{
-
font-family:Arial, Helvetica, sans-serif;
-
font-size:11px;
-
font-weight:normal;
-
color:#A9D395;
-
}
-
-
#designby a:link
-
{
-
font-family:Arial, Helvetica, sans-serif;
-
font-size:10px;
-
font-weight:normal;
-
color:#A29982;
-
}
-
-
#designby a:visited
-
{
-
font-family:Arial, Helvetica, sans-serif;
-
font-size:10px;
-
font-weight:normal;
-
color:#A29982;
-
}
-
-
#designby a:hover
-
{
-
font-family:Arial, Helvetica, sans-serif;
-
font-size:10px;
-
font-weight:normal;
-
color:#A9D395;
-
text-decoration:underline;
-
}
-
-
#designby a:active
-
{
-
font-family:Arial, Helvetica, sans-serif;
-
font-size:10px;
-
font-weight:normal;
-
color:#A9D395;
-
}
-
-
.floatright
-
{
-
float: right;
-
margin-left: 0px;
-
border-style: none;
-
}
-
-
10 5729
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). -
.copybackground {border:1px solid red;<-------------:: for position only
-
background :url(body_bac.jpg) no-repeat 0px 0px;
-
background-repeat:no-repeat;<-------------::delete
-
position:relative;<-------------:: delete
-
height:29px;
-
}
-
-
-
---:: add the below immediately beneath your link to the external style sheet in the head of the document ::---
-
-
<!--[if lt IE 8]>
-
<style>
-
.copybackground {
-
position: absolute; top: 189px;width: 150px;
-
}
-
</style>
-
<![endif]-->
-
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
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.
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
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
Excellent resource - very exciting to be moving forward - thank you!
Excellent resource - very exciting to be moving forward - thank you!
Sure. Good luck. Thi mk CSS.
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.
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)
Sign in to post your reply or Sign up for a free account.
Similar topics
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
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: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
| |