Member Avatar for shruti sepra

Hi,

Iam trying to make rounded navigation using css, but facing few problems

pls see the attach file

problems are
1) Their is gap on left side
2) Background in not visible in Mozilla browser

bg_nav.zip (6.37 KB)
  • 4 Contributors
  • 6 Replies
  • 99 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by shruti sepra

Dani AI

Generated

reported a left gap and a missing background in Mozilla; and noted attachment accessibility issues, and asked for the solution. Common root causes are default list/body spacing, floated list items collapsing their parent, background images applied to inline elements, or wrong image paths/case mismatches on the server. Posting the HTML/CSS inline (rather than only as an archive) makes reproduction and diagnosis much faster.

A minimal, robust pattern that fixes the usual problems:

html, body { margin: 0; padding: 0; }
ul.nav { margin: 0; padding: 0; list-style: none; background: #eee; overflow: hidden; }
ul.nav li { float: left; }
ul.nav li a { display: block; padding: 8px 14px; text-decoration: none; }
ul.nav li:first-child a { background: url(nav-left.png) no-repeat left center; padding-left: 18px; }
ul.nav li a { background: url(nav-center.png) repeat-x center; }
ul.nav li:last-child a { background: url(nav-right.png) no-repeat right center; padding-right: 18px; }

Notes and troubleshooting checks: reset default margins/padding (body and ul) to remove the left gap; use floats (or inline-block with whitespace handling) for horizontal lists; set the anchor to display:block so its padding and background behave consistently; contain floats with overflow:hidden or a clearfix so the UL gains height and its background becomes visible; verify image paths and filename case with the browser network inspector to rule out 404s. If the design used image caps for rounded ends, ensure the center slice is repeat-x; today border-radius is a simpler approach for modern browsers with image fallbacks only for very old clients.

Given later marked the thread solved and offered to email , posting the final HTML/CSS snippet in the thread would preserve the answer for others who search later.

Recommended Answers

All 6 Replies

Member Avatar for allhimachal.com

i can't download your Attached Files.

Member Avatar for shruti sepra

i can't download your Attached Files.

ok I upload file again

bg_nav.zip (6.37 KB)
Member Avatar for MidiMagic

Don't assume that everyone had the capability to open a compressed file. This ability is purposely banned from the computers I use.

Member Avatar for shruti sepra

Solved

Member Avatar for ardeezstyle

Hey Shruti How do you solve the problem? Will you please share the same so that I can learn and understand..


Regards
Rupam Datta

Member Avatar for shruti sepra

Hi, Rupam

I will mail you solution

Hey Shruti How do you solve the problem? Will you please share the same so that I can learn and understand..


Regards
Rupam Datta

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.