Member Avatar for ohtechie

i'm trying to get a page working.. single page, 3 columns using css. 2 jpgs 1 left colum 1 right colum and text in the middle column....

In front page left picture is just an outline with the infamous red box.. but when i view it with IE and firefox they both display properly... i loaded the page onto my domain.. neither picture is viewable. during slow load.. i see the outline of the boxes.. but once loading complete.. no pictures. i'm at work now so i can't post the code.. but the online site is viewable ...www.ohiochirorelief.com

i'm pulling my hair out trying to figure out why it's happening. any help would be greatly appreciated...

thanks again

  • 4 Contributors
  • 5 Replies
  • 204 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by ohtechie

Dani AI

Generated

As found, a broken stylesheet can be the real culprit even when images are present on the server. A single syntax error (unclosed comment, missing brace, stray rule) can cause a browser to ignore or misapply the rest of the CSS. When images are applied via CSS (background-image) or when CSS later hides or repositions an IMG element, that parser failure will make pictures vanish after the page finishes loading.

Practical checklist to isolate the problem (fastest first):

  • Use the browser DevTools Network panel and filter by "img" or "media" to see each image's HTTP status and size.
  • Open an image URL directly in a new tab to confirm it actually downloads and is not zero bytes.
  • Inspect the element in the Elements panel and look at Computed Styles: check display, visibility, opacity, width/height, z-index and any background-image rules.
  • Remember: paths inside CSS url() are relative to the stylesheet file, not the HTML file. A common mistake is a working local path that breaks once the CSS is moved to a different folder.
  • Temporarily disable the stylesheet (or move the suspicious rules) to see whether the image reappears — that quickly proves a CSS-related issue.

Example showing the path difference and a broken comment that can disable later rules:

<!-- HTML -->
<img src="images/photo.jpg" alt="">

/* css/site.css (url() is relative to css/site.css) */
.column { background-image: url('../images/photo.jpg'); }

/* Broken CSS example (unclosed comment) */
/* .sidebar { color: #333;   <-- missing closing */ causes subsequent rules to be ignored

Also check server-side causes not discussed fully earlier: file permissions, .htaccess hotlink or rewrite rules, incorrect MIME types, CDN or caching serving stale/empty files. This complements the earlier tips from , and by adding targeted debug steps that find whether the problem is a missing file, a naming/path mismatch, or a stylesheet/parser issue.

Recommended Answers

All 5 Replies

Member Avatar for buddylee17

You have to upload the images to the server. Notice how Ohio.gif works but the other 2 images dont. Here's the path to Ohio.gif :

You need to put the 2 Dr.Rex images into the same folder that ohio.gif is in, on the server.

Member Avatar for jbinbpt

It's easy to lose images when the names are mixed case. I would make all file and image names lowercase. If you can drop the periods and use underscores if you want the space.

Member Avatar for MidiMagic

For most servers, there can be only one period in a filename. It must be between the name and the.jpg extension.

Member Avatar for ohtechie

I changed the file names to lower case, there is only one period in each file name .jpg . i added an alt tag to see if that might help.. the tag shows but the pic doesn't.

any other ideas? hopefully...

Thanks for the help

ohtechie

Member Avatar for ohtechie

ok.. after playing some more.. i decided to validate the css at w3c... lo and behold i had validation errors.. .. cleaned those up and it works now... well almost. i'm going to mark this thread as solved and start a new one with the last problem .. <div> not div'ing ;)

Thanks for the help

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.