Member Avatar for seblake

When using

<style type="text/css">
    body {background-image:url('images/DarkBrushesswlbcbl2.jpg');}
</style>

I have two 'errors' I do not want. 1) I have a little line to the right of the title graphic that I want to get rid of; 2) Depending on the user's browser, the text does not look the same (right justified and TM display).

After reading about the issues, I decided to modify the title image. I did a screen capture and created a new jpeg. I implemented it as follows:

<div>
<img src="images\Max-TechTitle.jpg" alt="Max-Tech Title" width="100%" height="100%" />
</div>

It displays when using my PC, but not live (at http://www.seblake.com/privacy.html)...the 'alt=' works... And, I still have the space at the right....

Any help/suggestions/comments are welcome! Thank you, in advance!

Edited by Nick Evan because: Fixed formatting
  • 2 Contributors
  • 6 Replies
  • 190 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by seblake

Dani AI

Generated

Brief diagnosis and targeted fixes for the two issues seen in this thread (image visible locally but not on the live page; narrow vertical gap at the right):

As noticed, the path separator and layout CSS are the main suspects. Browsers differ: IE is forgiving about backslashes and sloppy layouts; Firefox follows the spec and will fail if the URL or layout rules are incorrect. Also remember that most public web hosts run on case-sensitive filesystems, so a filename that works on Windows may be a different name on the server.

Practical fixes (safe, minimal changes that generally resolve both symptoms)

/* reset default page gutters and make header image behave */
body { margin: 0; padding: 0; }
.site-header img { display: block; max-width: 100%; height: auto; }
  • Use forward slashes in image URLs and confirm the path is correct (root-relative "/images/header.jpg" or correct relative path from the HTML file).
  • Match filename case exactly on the server (lowercase filenames remove a common source of 404s).
  • Remove any negative margins on the body or main container; negative margins can cause overflow and the small vertical line/scrollbar on the right. ’s removal of that negative margin is the right move.
  • Avoid forcing height:100% on images unless the parent has an explicit height; prefer max-width:100% and height:auto so the image scales without overflow. Use display:block on images to remove inline whitespace/gaps.

Quick checks to confirm the cause

  • Reload with DevTools open → Network tab: look for a 404 on the image.
  • Open the image URL directly in a new tab to verify accessibility.
  • If the image loads in IE but not Firefox, inspect the requested URL (slash vs backslash or case mismatch is usually the culprit).

If alignment was the reason for switching to an image (right-justified title), consider right-aligning text with CSS instead of rasterizing the heading — better accessibility and easier responsive behavior.

Recommended Answers

All 6 Replies

Member Avatar for zizuno

Displays fine on my computer. its 100% page width and height. And what text are you talking about?

Member Avatar for seblake

Thanks for your help!

The text I am talking about is displayed over the background image in my first effort:
<div id="heading">Max-Tech<sup><sup><sup><small><small>&trade;</small></small></sup></sup></sup></div>
<div id="tagline"><strong>USER-FRIENDLY SOLUTIONS DESIGNED FOR YOUR BUSINESS CHALLENGES</strong></div>

The reason I went to the second effort is to ensure the heading and tagline were right-justified.

I went to the webpage again. I'm using Firefox and it did NOT display. It DID display in IE&!@ WOW! OK...what do I need to change to allow it to be displayed in both browsers?

I still see the blank space at the right side of the image. Did you?

Thanks, again, Zizuno!

Member Avatar for zizuno

First, use '/' not '\' in urls. Second, it is your silly css. Why are you using negative margins? I delete those and it looks dandy.

Member Avatar for seblake

Silly CSS?? OK, GUILTY! I'm teaching myself - do appreciate the help!

1. Still trying to learn when to use / or \.
2. Did you delete all negative margins or only in the body?

I really cannot answer why negative margins, but I believe it was the only way I could get it to look good... I'm currently trying to get a better comprehension of "float".

Thanks for your time!

Member Avatar for zizuno

A backslash has no importance in HTML to my knowledge. But, once you get into PHP, or other languages, it is used to escape characters to mean their literal character.

Removing the one in the body makes it work just fine.

Member Avatar for seblake

Thank you very much, Zizuno!
< Steve >

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.