[VividWeb]

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;
}

[David Laakso]

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]-->

[Dormilich]

Originally Posted by David Laakso

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

[David Laakso]

Originally Posted by Dormilich

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

[VividWeb]

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.

[Dormilich]

Originally Posted by VividWeb

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

[David Laakso]

Originally Posted by VividWeb

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

[VividWeb]

Excellent resource - very exciting to be moving forward - thank you!

[David Laakso]

Originally Posted by VividWeb

Excellent resource - very exciting to be moving forward - thank you!

Sure. Good luck. Thimk CSS.

[Touché]

Originally Posted by VividWeb

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.

[David Laakso]

Originally Posted by Touché

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)