Member Avatar for vexhawk

I don't really know what is going on here:

http://www.omegaboi.com/test/


on the menu, there seems to be a whitespace gap after the | the | is actually a border.

however, the gap is still there after i remove it from the css file labled test_test.css.

Does anyone know whats going on?

  • 5 Contributors
  • 7 Replies
  • 104 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by vexhawk

Dani AI

Generated

Good followup to the troubleshooting already done by ; thanks also to and for pointing toward box-model checks. The negative-margin work‑around fixed the symptom, but a cleaner, maintainable pattern avoids visual gaps and fragile layout hacks.

A solid approach is to put the separator inside the link using a CSS generated element. That makes the separator part of the clickable area and lets it change with the link hover state. Example:

ul.menu { list-style: none; margin: 0; padding: 0; }
ul.menu li { display: inline-block; }
ul.menu li a { display: inline-block; padding: 8px 12px; text-decoration: none; color: #fff; background: #0b6; }
ul.menu li a::after {
  content: "|";
  margin-left: 10px;
  color: rgba(255,255,255,0.6);
}
ul.menu li:last-child a::after { content: ""; }

ul.menu li a:hover,
ul.menu li a:hover::after { color: #000; background: #fff; }

Alternatives: float the list items and make anchors block-level, or use display:inline-block and eliminate HTML whitespace (or set the parent font-size:0 and restore it on children). Each method has tradeoffs: floats need clearing; font-size:0 requires resetting child font sizes.

Quick troubleshooting checklist: use browser devtools to inspect computed padding/margin/border, confirm which element draws the separator, and look for inherited rules from other CSS files. For accessibility, remember generated content can be announced inconsistently by screen readers; if that matters, add a visually hidden separator in the markup or mark decorative separators using aria-hidden="true". These patterns avoid brittle negative margins and give consistent hover behavior across menu items.

Recommended Answers

All 7 Replies

Member Avatar for Dani

I'm sorta confused what you're referring to.

Member Avatar for vexhawk

i apologize, i'm refering to the blue tab menu under the logo.

there is a gap between the links. Home | etc. | etc The " | " is a border style i set in css. If you hover over a link, it turns white, but u should see a small gap between the | and the white.

How would I fix it? or is there a better way to code what i did?

Member Avatar for Member #114696

Since the link you have given is not working(404 Not Found) i didn't understand your problem well. But what i have understood till now through your text, i could say that padding and border-color may help you.

Member Avatar for vexhawk

thanks for your concern. I think the main problem was that i was using a "list" to display the menu. I see that when you use list such as "ol" and "ul" it provides a little gap between words. Even if you do display "inline". I didn't know how to get rid of the gap, so I just made the margin # for "a:hover" negative, so when i covered over the menu item, it would cover up the gap. =) problem solved!

unless...you know of a better way to remove whitespace from ordered and unordered list?

Member Avatar for tgreer

Set all "border", "margin" and "padding" properties for all elements.

Member Avatar for Targowski

Do you still need critique? If so, I'm recieving a 404 error when accessing it.

Member Avatar for vexhawk

nope, thank you though. i really appreciate it though. I looked at my code, and felt that that was not the best way to create something like that. So i rewrote it, and tried a different method and it came out perfect.

thanks again!

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.