Member Avatar for zobadof

Hi,

I am coding a website for my Parents workplace. I've got the navigation bar working, but there are white bars in it? I have moved the positioning around but nothing works. This also happens for IE but different places. I use Chrome as defautl browser.

If you could please help me with this issue, which I am sure is very qucik to fix I would appreciate it. I do know a fair bit about CSS now, after learning it but this has puzzled me.

View the Source Code via CommuniCare.org.uk

  • 2 Contributors
  • 2 Replies
  • 117 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by zobadof

Dani AI

Generated

Narrow white streaks through a horizontal menu are usually a rendering/geometry issue rather than a mysterious browser bug. was on the right track identifying a divider mismatch, and ’s quick pixel tweak points to a rounding/placement symptom. Common causes are: adjacent elements both drawing a thin divider (so two 1px lines meet and one shows through), fractional-pixel rounding when widths or paddings don’t add up to whole device pixels, inline spacing or default margins, or anchors that don’t fill their parent so the container background peeks through.

Practical, ordered checks that solve this reliably:

  • Avoid double-drawn dividers: draw the separator once (for example, only between items) so you cannot get a color/width mismatch between neighbours.
  • Make box calculations predictable: use a box-sizing approach that includes borders/padding in widths and keep widths that sum to exact pixels where possible (this reduces half-pixel rounding).
  • Ensure the clickable element fills the list cell (so backgrounds and borders align) and remove extra inline whitespace or default body margins that can offset things.
  • If borders still produce seams, draw separators with a background gradient or an inset shadow on the item instead of a border; those techniques tend to avoid hairline gaps across browsers.

Fast debugging workflow: open devtools, temporarily apply high-contrast backgrounds to parent/child, toggle borders on and off to find which edge is leaking, inspect computed sizes for fractional pixels, and test at different zoom levels and on HiDPI. For reference reading on how borders and box sizing affect layout see the MDN guides on box-sizing and borders: box-sizing and border.

Recommended Answers

All 2 Replies

Member Avatar for cossay

Not a CSS guru but from what I see, the problem is on line 7 (** border-right: 1px solid #FFFFFF;**) of your code below. You have two ways around this:
1. Change the border-right color to match that of border-left.
2. Set the width of the border-right to zero.

#nav li{
    position: relative;
    float: left;
    height: 63px;
    border-bottom: 4px solid #bbbbbb;
    cursor: pointer;
    border-right: 1px solid #FFFFFF;
    border-left: 1px solid #e8e8e8;
    }
Edited by cossay
Member Avatar for zobadof

I put that code in, the white bars are still there, they're all white except one.

Edit: With a bit of chaging the code around a tiny bit, with the px its now working for both IE and Chrome. Many thanks!

Edited by zobadof because: Updated
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.