Support » Themes and Templates » My theme only works in Safari. BG not showing in IE or Firefox!

  • Hi. I am the owner of http://doubleddegree.com

    My background image shows up only in Safari. I’m not sure what’s wrong. In every other browswer it only shows the bg color (#fefefe), while it doesnt show the image (the image is a ripped paper edge and some #333333).
    I’ll add my style.css if needed. Does anyone know why this would happen?

Viewing 8 replies - 1 through 8 (of 8 total)
  • Michael

    (@alchymyth)

    Forum Moderator

    But it is there.

    So there’s obviously a problem.

    here is the bg.jpg
    http://doubleddegree.com/wp-content/themes/Minimal-Horizontal/bg.jpg

    here is my css:

    /* Basic Setup */
    
      	* { list-style:none;padding:0;margin:0;text-decoration:none; }
      	body { width:2520px;overflow-x:hidden; }
      	body { background:#fefefe url(bg.jpg) no-repeat left top;font:11px/18px helvetica, arial, sans-serif;color:#333; }
      	p { margin:0 0 10px 0; }
      	a { color:#aaa; }
      	a:hover { color:#333; }
      	a img { border:0;border-bottom:2px solid transparent; }
      	a:hover img { border-bottom:2px solid #333; }
    	.clear { clear:both; }
    	blockquote { padding:10px;color:#aaa; }
    	.postcontent ul, .postcontent ol, .postcontent2 ul, .postcontent2 ol { padding:10px; }
    
    	/* Structure */
    
    	#page { background:url(containbg.gif) repeat-y left top;min-height:900px; }
    	#container { padding:25px 0 0 25px;width:2050px;float:left; }
    	#title a { font-size:80px;line-height:80px;color:#000;text-transform:uppercase; }
    	#posts { padding-top:50px; }
    
    	/* Posts */
    
    	.post, #end { width:475px;float:left;padding:0 10px; }
    	.date { color:#aaa;font-size:18px;line-height:18px; }
    	a.posttitle, #comments, #commentform { width: 200px; font-size:24px;line-height:24px;color:#333; }
    	#comments, #commentform { padding-top:50px;padding-left:100px;font-weight:normal; }
        #commentform {float:left;}
    	.postcontent { margin:0 0 10px 0;height:220px;overflow:hidden;font-size:14px; }
        .postcontent2 { width:1000px; font-size:14px; }
    	.postcontent a, .postcontent2 a { color:#333; }
        a.readmore, #end a { color:#fff;padding:7px;background:#555; }
    	a:hover.readmore, #end a:hover{ background:#71fdff;color:#333; }
    
    	/* Vertical Footer */
    	#subcontent { background:#333;padding:176px 20px 50px 50px;color:#fff;width:350px;float:right; }
    	#subcontent .block { padding:0 15px;margin-bottom:30px; }
    	#subcontent .block h5 { color:#fff;font-size:24px;line-height:24px;font-weight:normal; }
    	#subcontent .block ul li { display:inline; }
    	#subcontent .block ul li a { display:block;padding:2px;color:#999;border-bottom:1px solid #444; }
    	#subcontent .block ul li a:hover { color:#72fff7;border-bottom:1px solid #777; }
    
    	/* Comments */
        .postcomments { padding-left: 1000px; }
    	.commentlist li{width:200px;border-bottom:1px solid #aaa;padding:10px;float:left;}
    	.commentlist li.alt{ background:#eee; }
    	.commentlist p { margin:0; }
    	#commentform p { font-size:11px;line-height:18px;float:left; }
    	.commentmetadata { display:none; }
    
        /*Floating Images in Posts*/
        img.alignright {float:right; margin:0 0 1em 1em}
        img.alignleft {float:left; margin:0 1em 1em 0}
        img.aligncenter {display: block; margin-left: auto; margin-right: auto}
        a img.alignright {float:right; margin:0 0 1em 1em}
        a img.alignleft {float:left; margin:0 1em 1em 0}
        a img.aligncenter {display: block; margin-left: auto; margin-right: auto}
    
        /* Arrows */
    
    	#arrows { position:fixed !important;position:absolute;bottom:75px;left:65px;background:#555; }
    	#arrows li { display:inline; }
    	#arrows li a { color:#ddd;padding:5px 10px;display:block;float:left; }
    	#arrows li a:hover { color:#fff;background:#333; }
    	.lb a { border-right:1px solid #333; }
    
    	/* Footer */
    	#footer { background:#fefefe;color: #000000;position:fixed !important;position:absolute;bottom:5px;left:65px; }

    esmi

    (@esmi)

    Forum Moderator

    It’s being reported as a 0px by 0px file in Firebug. Try re-uploading the image.

    Still nothing. If anyone can help, or if this has happened to you, I would really appreciate a solution.

    esmi

    (@esmi)

    Forum Moderator

    There’s something very wrong with http://doubleddegree.com/wp-content/themes/Minimal-Horizontal/bg.jpg. It’s not viewable in either Firefox or IE. You need to create a completely new image.

    I agree with esmi. Something is wrong with that image. When I view, for example, this image– http://doubleddegree.com/wp-content/themes/Minimal-Horizontal/doubled.png– all is good. When I view your bg.jpg all I get is the ‘alt’ text– “http://doubleddegree.com/wp-content/themes/Minimal-Horizontal/bg.jpg”.

    I don’t see your image in FF on Linux, Vista, or Windows 7. I also can’t see it in Safari on Windows 7 or in Chrome or Opera on Windows 7. The only place I do see it is on Safari 1.0.3 on OS 10.2.8. In other words, it only displays in an old browser on an old OS. The image is broken. There is something about your version of Safari that can render the broken image but it is broken nonetheless.

    Just to be clear. This is not a CSS issue. If it were we’d be able to view the image with the full URL directly to the image. No CSS loads when you do that.

    Also, you’ve got a few errors— none that would cause this though, as far as I can tell.

    You were right. Thanks for the help guys.

    So so much.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘My theme only works in Safari. BG not showing in IE or Firefox!’ is closed to new replies.