1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Background Image does not show in IE

Discussion in 'CSS' started by blueparukia, Aug 20, 2007.

  1. #1
    I will convert my CSS to external styles later, so don't complain to me about that.


    Anyway, in IE, my background image of a div cannot be viewed (in both 6 and 7), but works fine in Opera and Firefox.

    Site:
    http://bezdredge.net/

    Thanks,

    BP
     
    blueparukia, Aug 20, 2007 IP
  2. VimF

    VimF Well-Known Member

    Messages:
    307
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    118
    #2
    I can't access your site:

    Error!
    Could not locate remote server
     
    VimF, Aug 20, 2007 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I could see the site. It's difficult to find the real problem when there are so many errors-- meaning, any one of them could be the cause, or you could re-write and make the page valid and it might still be there.

    Did you notice that on Mozilla/FireFox, the mouseover colour-changes are inconsistant too? Meaning, I could have my mouse anywhere on the Home and Contact buttons, but had to be on a particular part of the About and Forums buttons to make the change.

    One example of an error that may be making everything screwy: you have a </html> end tag at the bottom of the page, but not an <html> tag on the top.

    You have an absolute positioned div, starting with bottom:0px. As I understand it, position:absolute is based on top and left pix only.

    I see a body bgcolor=#87CEEB but not a background image. Both browsers show a light blue background image, and IE is not showing a menu background.

    I dunno if onload="MM_preloadimages" is valid? You have it both inside and outside your script.

    I think if you finished changing everything over to CSS first, and get your html validated, then you can find where your errors are.
     
    Stomme poes, Aug 20, 2007 IP
  4. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #4
    I wondered what the hell the validator was throwing at me with the <html> thing, couldn't pick up that error. As for the div, I'll remove bottom:0px.

    I'll convert it to CSS and validate it this afternoon

    Thanks,

    BP
     
    blueparukia, Aug 20, 2007 IP
  5. wyrd33

    wyrd33 Peon

    Messages:
    45
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    After you're done making sure your web site validates, one possible reason for IE not showing a background is that you did not specify a width or height for the element which has the background.

    If you cannot specify a width or height because of a flexible layout design, use the following for min height:

    
    div.class { min-height: 1%; }
    * html body div.class { height: 1%; } /* for IE6 */
    
    Code (markup):
     
    wyrd33, Aug 20, 2007 IP
  6. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #6
    blueparukia, Aug 30, 2007 IP
  7. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Find this:
    <div id="main1" style="position: absolute; left: 0px; top: 77px; width: 100%; height: 745px; background:url(m_111a.gif) no-repeat; height:745px" />&nbsp;</div>
    
    Code (markup):
    The change made is in bold:
    <div id="main1" style="position: absolute; left: 0px; top: 77px; [B]width: 700px[/B]; height: 745px; background:url(m_111a.gif) no-repeat; height:745px" />&nbsp;</div>
    
    Code (markup):
    The problem arises from the 100% width which IE has a problem rendering properly. If you change the width to a fixed one, which your background image is anyway, it'll render properly.
     
    GWiz, Aug 30, 2007 IP
  8. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #8
    Where did you get that code from ??? The site?

    Here is the correct CSS that is in the fiel:
    .main1
    {position: absolute; bottom:0px; left: 0px; top: 140px; width: 1101px; height: 745px; 
     background:url(m_111a.gif)no-repeat ;
    }
    Code (markup):
    And I changed it from ID to class


    Thanks,

    BP
     
    blueparukia, Aug 30, 2007 IP
  9. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #9
    That code was located in the link you provided allowing us to download the zipped contents of your site, the zip likely contained older code which didn't have the css externally yet.

    Based on the new code you provided it should work.

    If you're still having trouble, post the new html/css here so we can take a look, or upload it. Otherwise if everything is working... then carry on. ;)
     
    GWiz, Aug 30, 2007 IP
  10. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #10
    Can't be bothered to reupload, but the problem still persists :(
    HTML
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>BeZDredge</title><script type="text/javascript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script></head>
    <body bgcolor="#87CEEB" text="#000000" onload="MM_preloadImages('forums2.png','about2.png','contact2.png')">
    
    <div id="container">
    <div class="main1"/>&nbsp;</div>
    
    
    <img src="back%201.jpg" alt="" align="top" border="0" width="1101" height="140" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 140px; z-index: 1" />
    <center><img src="logo.gif" alt="" align="top" border="0" style="position: relative;top: 9px; z-index: 2" /></center>
    <div id="nav" style="position: absolute; left: 33px; top: 262px; width: 134px; height: 22px; z-index: 3" align="left">
    
    
    
    
    <a href="http://bezdredge.net/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','home2.png',0)"><img src="home1.png" alt="home" name="home" width="134" height="22" border="0" id="home" /></a>
     
    </div>
    
    <div class="nav" style="position: absolute; left: 36px; top: 308px; width: 134px; height: 22px; z-index: 4" align="left">
    
    
    <a href="http//bezdredge.net/about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','about2.png',1)"><img src="about1.png" alt="About" name="about" width="134" height="22" border="0" id="about" /></a>
     
    </div>
    
    <div style="position: absolute; left: 76px; top: 312px; width: 150px; height: 16px; z-index: 5" align="left">
    </div>
    
    <div class="nav" style="position: absolute; left: 36px; top: 353px; width: 134px; height: 22px; z-index: 6" align="left">
    
    
    <a href="http://bezdredge.net/forums" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('forums','','forums2.png',1)"><img src="forums1.png" alt="forums" name="forums" width="134" height="22" border="0" id="forums" /></a>
     
    </div>
    
    <div style="position: absolute; left: 79px; top: 357px; width: 150px; height: 16px; z-index: 7" align="left">
    </div>
    
    <div class="nav" style="position: absolute; left: 36px; top: 401px; width: 134px; height: 22px; z-index: 8" align="left">
    
    
    <a href="http//bezdredge.net/contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','contact2.png',1)"><img src="contact1.png" alt="Contact" name="contact" width="134" height="22" border="0" id="contact" /></a>
     
    </div>
    
    
    
     
    
    
    </body> </html>
    
    Code (markup):
    CSS:

    #container
    { position: relative;
       margin-top: 0px;
       margin-left: auto;
       margin-right: auto;
       text-align: left;
    }
    
    
    #main1
    {
    }
    
    body
    {
       text-align: center;
       margin: 0;
    }
    #nav img {cursor:pointer}
    .main1
    {position: absolute; bottom:0px; left: 0px; top: 140px; width: 1101px; height: 745px; 
     background:url(m_111a.gif)no-repeat ;
    }
    
    div.main1 { min-height: 1%; }
    * html body div.class { height: 1%; } /* for IE6 */
    Code (markup):
     
    blueparukia, Aug 30, 2007 IP
  11. VimF

    VimF Well-Known Member

    Messages:
    307
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    118
    #11
    Is this what you want?

    [​IMG]

    The code:
     

    Attached Files:

    VimF, Aug 30, 2007 IP
    blueparukia likes this.
  12. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #12
    Yes, thank you very much. Rep will be given once I figure out how :)
     
    blueparukia, Aug 30, 2007 IP
  13. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #13
    Well, now it doesn't work in Firefox. I am going to kill the guy who coded this template. You see, the background images are now set to z-indexes -1 and -2, and Firefox doesnt seem to support negative z-indexes. Howeer, if I remove the z-index, or make the higher, I get this error:
    http://forums.digitalpoint.com/showthread.php?t=460927

    Could someone please find a way around thi?


    Thanks,

    BP
     
    blueparukia, Sep 1, 2007 IP
  14. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Well just re-arrange the z-indexes so that they begin from 0, rather than anything going below 0.
     
    GWiz, Sep 1, 2007 IP
  15. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #15
    Ok, first - chuck dreamweaver in the trash - second, chuck all that absolute positioning which is just confusing the matter, then chuck all the inlining of styles for classes. Even if it isn't external inlinging your presentation in the HTML is a bad practice you should NEVER do anymore since it just makes it harder to isolate problems, and often results in layouts that are nigh impossible to reskin without touching the html... and clean up some other errors like two character encoding metas and the background in the header that doesn't tile.

    The icing on the cake is that stupid adobe MM_Swap nonsense.

    You have a header, that should be a h1 probably with a image replacement span to put the logo in place.

    <h1>BezDredge<span></span></h1>

    Content first column, variable width. double wrap the content...

    <div id="content"><div class="wrapper">

    each 'topic' should probably have it's own container to group the tags together - will allow future addition of styling elements if need be... The content text should be broken into paragraphs... though depending on what your back-end is, god only knows how fubar the actual post content could be. If it's really bad I'd toss an extra DIV around it to be sure.... the footer is NOT a paragraph or even that nature of text, and it contains more than just the date so that classname is completely inappropriate... it's the footer of this section, let's just call it .footer

    
    <div class="content_box">
    	<h2>Test Number 2</h2>
    	<div class="content">
    		Ok, well, the CMS is fully working :D Dredge
    	</div>
    	<div class="footer">
    		<a href="http://bezdredge.net/index/home/test-number-2/#Comment1">
    			Comments (0)
    		</a>
    		02.09.2007. 04:48
    	</div>
    </div>
    
    
    Code (markup):
    close out .wrapper and #content, on to the sidebar, which we'll give the id of #sidebar.

    <div id="sidebar">

    Flat list of anchors on that....
    
    <ul id="menu">
    	<li><a href="http://bezdredge.net/">Home</a></li>
    	<li><a href="http//bezdredge.net/about.html">About</a></li>
    	<li><a href="http://bezdredge.net/forums">Forums</a></li> 
    	<li><a href="http//bezdredge.net/contact.html">Contact</a></li>
    </ul>
    
    Code (markup):
    I'd remove the internal text on those buttons for text rendered by the browser, just using background images with a sliding mouseover for them - if you REALLY want the image based, you'd have to assing unique id's to each LI in which case I'd suggest adding empty spans to each for image replacement akin to what was done inside the H1.

    So for HTML this is all I would use:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="description" content="BeZDredge Programming Services - LOGO, HTML, CSS, Flash" />
    
    <meta name="keywords" content="programming, site design, website, services, bezdredge" />
    
    
    <title>BeZDredge</title>
    
    <style type="text/css">
    
    </style>
    
    </head><body>
    
    <h1>BezDredge<span></span></h1>
    
    <div id="content"><div class="wrapper">
    
    	<div class="content_box">
    		<h2>Test Number 2</h2>
    		<p>Ok, well, the CMS is fully working :D Dredge
    		<div class="footer">
    			<a href="http://bezdredge.net/index/home/test-number-2/#Comment1">
    				Comments (0)
    			</a>
    			02.09.2007. 04:48
    		</div>
    	</div>
    	
    	<div class="content_box">
    		<h2>Testing</h2>
    		Testing an article for BeZDredge
    		<div class="footer">
    			<a href="http://bezdredge.net/index/home/testing/#Comment1">
    				Comments (0)
    			</a> 01.09.2007. 23:41</p>
    		</div>
    	</div>
    
    </div></div>
    
    <div id="sidebar">
    	<ul id="menu">
    		<li><a href="http://bezdredge.net/">Home</a></li>
    		<li><a href="http//bezdredge.net/about.html">About</a></li>
    		<li><a href="http://bezdredge.net/forums">Forums</a></li> 
    		<li><a href="http//bezdredge.net/contact.html">Contact</a></li>
    	</ul>
    </div>
    	
    </body></html>
    Code (markup):
    Give me a few minutes to wake up, and I'll churn out working CSS for that and remaster your header images to not have the 'problems' it has now.
     
    deathshadow, Sep 2, 2007 IP
  16. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #16
    Thanks. Technically, I know all that, but I am recoding this for a friend (who uses Dreamweaver). It was gonna be a simple 2 day conversion, but the code was messy. I cut out about 60 lines of useless JavaScript, but everything just seemed to go wrong. And I think VinF (poster abover) put the inline stuff there.

    Thanks a lot,

    BP
     
    blueparukia, Sep 2, 2007 IP
  17. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #17
    Ah, well... I finished off how I'd code it anyways - part of the problem is how the images were sliced... you might want to forward my views and these posts to the person using DW.

    Here's a 'working' version:

    http://battletech.hopto.org/for_others/blueparukia/template.html

    the directory:
    http://battletech.hopto.org/for_others/blueparukia

    is unlocked so one can get at the gooey bits.

    Here's a breakdown of the CSS:

    First thing I do in any template is null all margins and padding with the universal selector:

    * {
    margin:0;
    padding:0;
    }


    Now, with that sidebar and being this is a float model, having that menu just kind of 'end' doesn't look all that great - so let's toss a 232px wide 1px tall image in as a background repeat-y flush left so when the menu isn't as tall as the screen, it doesn't look silly. Of course we also set our regular background color here.

    body {
    background:#87CEEB url(images/sidebar_overtile.gif) 0 0 repeat-y;
    }


    The header1 we want to set the same height as our tiled background, set the font just under the size it would fit under the image, aligned center top/bottom (line-height lets us do that) - then we set the span to the same size as the h1, and position it aboslute right atop it with the logo image centered. Images off, CSS on - still get a decent looking header.

    h1 {
    	height:140px;
    	position:relative;
    	text-align:center;
    	color:#DEF;
    	background:#19D url(images/header_background.png) repeat-x;
    	font:bold italic 56px/140px arial,helvetica,sans-serif;
    }
    
    h1 span {
    	width:100%;
    	height:140px;
    	position:absolute;
    	top:0;
    	left:0;
    	background:url(images/logo.png) center center no-repeat;
    }
    
    Code (markup):
    header_background.png is a recut to only one px wide and tiled, saving bandwidth and looking better since the original image couldn't tile. (I also did some remastering there). I re-encoded the logo.png from the .gif too 'because I could'

    Next is that double line of wierdness - the sidebar and two odd top bars both only seem to be using one image - which is why the layout looks bad at high resolutions. Separate that into two tiled images and you save a ton of bandwidth and get a better appearance... first the double bar I had no clue what it was, so I named it #noclue - adding a DIV to the HTML for that.

    <div id="noclue"></div>

    with the CSS:
    #noclue {
    	height:53px;
    	background:#468 url(images/noclue_divider.png) repeat-x;
    }
    Code (markup):
    that noclue_divider.png is taken from a screencap since with the source image I could not be 100% sure how much was showing - turned out to be 53px.

    The #content and #content.wrapper get the standard float and width tricks - though I'm using float:right instead of left so we don't need the -100% trick.
    #content {
    	float:right;
    	width:100%;
    }
    
    #content .wrapper {
    	margin-left:240px;
    }
    Code (markup):
    notice I added 8px padding over our column width.

    The sidebar is a bit trickier, but really all we have to do is give it a margin-right equal to it's width and it zips right up into place. I then add my own re-cut sidebar_background.png which is 1px wide and 550px tall, tiled on the x axis - then I add a min-height (and matching IE5/6 hack for min-height) because if the sidebar is shorter than the image height, it looks kind of stupid should the content end up taller than the sidebar.

    #sidebar {
    	width:232px;
    	margin-right:-232px;
    	float:right;
    	min-height:550px;
    	background:url(images/sidebar_background.png) repeat-x;
    }
    
    * html #sidebar { 
    	/* lte IE 6 min-height */
    	height:550px;
    }
    Code (markup):
    The menu is fairly straightforward if we just let flow do it's work. Set the width equal to our image, turn list-style off, set some margins to position it down from the top and centered... likewise we can add padding to the bottom of each LI to space them apart - TECHNICALLY we could put that as margin-bottom on the anchors, but IE6 flakes out with it's 'collapsing margin' bug, so padding on the LI it is.

    #menu {
    	width:134px;
    	margin:56px auto 0;
    	list-style:none;
    }
    
    #menu li {
    	padding-bottom:28px;
    }
    Code (markup):
    The Anchor gets set to display:block so we can set it's height and background properly. I find that at 22px tall, a 22px line-height puts text just one px higher than I'd like, so 1px of padding-top and one less px line-height does a nice job of positioning the text nicely. Naturally we want no text-decoration and centering, colors and the background.

    #menu a {
    	display:block;
    	height:21px;
    	padding-top:1px;
    	font:normal 12px/21px arial,helvetica,sans-serif;
    	text-align:center;
    	text-decoration:none;
    	color:#000;
    	background:#4AD url(images/menu_buttons.png) 0 0 no-repeat;
    }
    Code (markup):
    Rather than using any sort of actual image swapping or javascript, we just condense both button backgrounds to one image:

    [​IMG]

    Since normally the bottom 22px get 'chopped off' since our item is only 22px tall, for our hover states we can just 'slide the background' up to reveal the other state.

    #menu a:active,
    #menu a:focus,
    #menu a:hover {
    	background-color:#999;
    	background-position:0 -22px;
    }
    Code (markup):
    Notice I'm also setting background colors - again you want to have a reasonably decent and similar appearance for people who turn images off to save bandwidth.

    The .content_box is fairly simple - just set text-align, pad out the different content DIV's, and that's our whole template.

    .content_box {
    	text-align:center;
    }
    
    .content_box h2,
    .content_box .content,
    .content_box .footer {
    	margin:1em 0;
    }
    Code (markup):
    Validates XHTML 1.0 strict, CSS validates with no warnings, Works cross browser to IE 6&7, FF, Opera and Safari...

    ... and all of the above code was done in Win32pad (a notepad replacement) and the images were remastered in Paint Shop Pro 7 (a 7 year old version of a sub $100 paint program)

    But Dreamweaver is a professional grade tool... RIGHT.

    99% of the problems I was seeing in the original code was the taking of the layout out of flow and relying instead on absolute positioning EVERYTHING. Absolute positioning is fine inside a relative container should you need a certain overlap effect, but just should not be used for actually positioning each and every element like menu items or column boxes.
     
    deathshadow, Sep 2, 2007 IP
    blueparukia likes this.
  18. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #18
    That looks incredible thanks. And you saved me from converting the buttons to CSS.

    Thanks so much,

    BP

    P.S Please leave the directory up for a few days, I ain't at home to download it atm
     
    blueparukia, Sep 2, 2007 IP
  19. VimF

    VimF Well-Known Member

    Messages:
    307
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    118
    #19
    Nope, I didn't put any code into that page. Not a single attribute.
     
    VimF, Sep 2, 2007 IP
  20. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #20
    Righteo. Either my friend or I put it in there :S
     
    blueparukia, Sep 2, 2007 IP