Member Avatar for php_noob

my BG doesn't load in FIREFOX?

<div id="wrapper">
		<div id="head">
		<img src="images/png/xxxx.png" alt="xxx Logo" />
		<div id="info-call"><img src="images/png/xxxx.png" alt="call-center" /></div>
		</div>
		<div id="navigator"><img src="images/xxx/left-nav.png" alt="navigation" class="left" /><img src="images/xxx/right-nav.png" class="right" alt="navigation" /></div>
	</div>

This is the HTML it is on DOCTYPE strict the problem is on NAVIGATOR!

.left{ float:left; }
.right{float:right; }
#navigator{background:url(../images/xxx/navigator.jpg) repeat-x; margin-top:2px; width:100%; height:53px; }

This is the CSS whats the prob man? (IT IS NOT THE WHOLE CSS)


Thanks

  • 2 Contributors
  • 3 Replies
  • 108 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by php_noob

Dani AI

Generated

Short version: a missing or overridden rule or an incorrect path is far more likely than the DOCTYPE. is on the right track thinking other DIVs or rules could be involved; 's idea to change the doctype is unnecessary — the doctype only affects rendering mode, not whether a background image is fetched.

Checklist to diagnose the missing background (Firefox):

  • Open Firefox DevTools, select the navigator element, and confirm the background-image property appears in the Rules/Computed panel. If it is not present or is struck out, a more specific rule or a syntax error earlier in the stylesheet is probably overriding it.
  • Use the Network tab (filter Images) and reload the page. Confirm the background image request returns 200. Copy the full URL shown by the inspector and open it directly to verify the file is reachable and not blocked by case-sensitivity or an incorrect path.
  • Verify the element actually has height and is visible. Floated children can make a parent collapse; if the parent has no height the background will not show. A reliable clearfix can be used to contain floats, or use an overflow-based fix.

Small, useful fixes:

  • Prefer absolute paths during debugging (for example /images/...) so the URL resolution is unambiguous.
  • Check for typos and case differences on a case-sensitive server.
  • Run the stylesheet through a validator if rules after a missing brace are being ignored.

Reference material for the above checks:

These steps will pinpoint whether the problem is a fetch/path issue, a cascade/override issue, or a layout problem caused by floats or zero height.

Recommended Answers

All 3 Replies

Member Avatar for 1337cookie

3.5.1 Firefox for windows seems to work ok. Perhaps you will have to post the full source code or maybe an online version of it.

You do only want the background to repeat horizontally, right?

Maybe try changing to transitional from strict.

Member Avatar for php_noob

Right, The doctype is strict.

Member Avatar for php_noob

It can be coming from my other DIVs? is that what you mean? I will check it to my side first then I will let you know.

In case somebody will view this thread in the future.

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.