My theme only works in Safari. BG not showing in IE or Firefox! (9 posts)

  1. spencerallanbrooks
    Posted 6 years ago #

    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?

  2. Michael
    Forum Moderator
    Posted 6 years ago #

  3. spencerallanbrooks
    Posted 6 years ago #

    But it is there.

    So there's obviously a problem.

  4. spencerallanbrooks
    Posted 6 years ago #

    here is the 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; }
  5. esmi
    Forum Moderator
    Posted 6 years ago #

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

  6. spencerallanbrooks
    Posted 6 years ago #

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

  7. esmi
    Forum Moderator
    Posted 6 years ago #

    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.

  8. s_ha_dum
    Posted 6 years ago #

    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.

  9. spencerallanbrooks
    Posted 6 years ago #

    You were right. Thanks for the help guys.

    So so much.

Topic Closed

This topic has been closed to new replies.

About this Topic