...

View Full Version : Div Background Images



hartshill
03-21-2005, 05:03 PM
Ok, as per usual, my site works perfectly (if I may be so bold) in Firefox but has a bug in Internet Explorer.
If you visit http://www.runecom.xtremenet-hosting.info/v4/ in Firefox, the site logo is displayed in the div correctly, but if you visit in Internet Explorer the image appears white to start with until you scroll the page then it appears, any ideas please? :(

_Aerospace_Eng_
03-21-2005, 05:46 PM
its working fine for me, im using IE 6.02 on XP

hartshill
03-21-2005, 05:53 PM
http://img193.exs.cx/img193/9895/screenshot1ve.th.gif (http://img193.exs.cx/my.php?loc=img193&image=screenshot1ve.gif)
That is what appears for me, and some of my friends, do you have any idea whats causing it, it looks as if the background color of the page is being overlaid onto the image.

_Aerospace_Eng_
03-21-2005, 06:10 PM
are all of those stylesheets absolutely neccessary? you have some hacks in there for browsers are way out of date, but either way css is case sensitive, if there is a class or id called hnav in the code then it should be called hnav in the css not HNAV that could part of the problem, and which css file is the header image in?

hartshill
03-21-2005, 06:23 PM
colors.css


#masthead
{
background-color: #885;
color: #fff;
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
background-position: left;
}
Should I take color: #fff; out?

_Aerospace_Eng_
03-21-2005, 06:31 PM
no color: is just giving a font color, its not really neccessary in this case unless you intend on typing over the background, the background color dont think thats the problem either, can you post all of the code to colors.css, rather than me having to hunt and search for it just makes it easier, you may be importing that inside one of your stylesheets

hartshill
03-21-2005, 06:35 PM
body
{
background-color: #665; /* border/edge of the layout color */
}
#pageFrame, #masthead, #footer
{
background-color: #fff; /* major background color */
}
#pageFrame
{
/* image used as background color for left column ( #E9E8CA ) */
background: #fff url('lightyellow.gif') repeat-y 0 0;
}
#masthead
{
background-color: #885;
color: #fff;
background-image: url(/images/header.jpg);
background-repeat: no-repeat;
background-position: left;
}

#footer
{
background-color: #885;
color: #fff;
}
#footer
{
border-bottom: solid 1px #997; }

.hnav, .hnav ul li a
{
background-color: #cc9;
color: #336;
}
.hnav ul li a:hover
{
background-color: #336;
color: #fff;
}
.vnav ul li a
{
color: #336;
background-color: #cc9;
}
.vnav ul li a:hover
{
background-color: #336;
color: #fff;
}

_Aerospace_Eng_
03-21-2005, 06:42 PM
hmm okay i dont see any conflicting problems, only thing it might be is the positioning and the no repeat which can fudge up sometimes in IE change this css

#masthead
{
background-color: #885;
color: #fff;
background-image: url(/images/header.jpg);
background-repeat: no-repeat;
background-position: left;
}
to this

#masthead
{
width:1000px;
height:100px;
background-color: #885;
color: #fff;
background-image: url(/images/header.jpg);
}
by default a background image already starts from the top left so no need to declare it again, let us know if that solves the problem

hartshill
03-21-2005, 06:48 PM
Nope and it stretched the div very wide and too high.

_Aerospace_Eng_
03-21-2005, 07:11 PM
okay undo what i said to do, i just want to know where are you declaring the height and width for that div? because your header image is 1000px wide and 100px high which is y just setting that div to match the dimensions of the header image shouldn't have changed the width of it at seeing as how it appeared you had the whole header image being shown in the first place

hartshill
03-21-2005, 07:47 PM
I'm not, rather, I'm spacing it with paragraphs, which I shouldn't have done really, I don't want to specify a width which is why the header is so wide, I'm going to get rid of the paragraphs and declare a height.

hartshill
03-21-2005, 07:52 PM
Is it http://www.positioniseverything.net/explorer/peekaboo.html
Edit: Nevermind fixed it, I had to specify a height of 75px and the 100px image fitted perfectly... weird.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum