Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer Div Background Images

    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?

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    its working fine for me, im using IE 6.02 on XP

  • #3
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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?

  • #5
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    colors.css
    Code:
    #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?

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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

  • #7
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    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;
    }

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    Code:
    #masthead
    {
    	background-color: #885;
    	color: #fff;
    	background-image: url(/images/header.jpg);
    	background-repeat: no-repeat;
    	background-position: left;
    }
    to this
    Code:
    #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

  • #9
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nope and it stretched the div very wide and too high.

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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

  • #11
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #12
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is it http://www.positioniseverything.net/.../peekaboo.html
    Edit: Nevermind fixed it, I had to specify a height of 75px and the 100px image fitted perfectly... weird.
    Last edited by hartshill; 03-21-2005 at 06:54 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •