Small Extra Linking Blocks Beside Anchor Blocks

HTML & CSS
1

This is very strange. Here’s the code:

nav {
  position:relative;
}
ul.navul {
  padding:0;
  margin:0;
  background-color:rgba(12,11,11,0.9);
}
.navul li {
  list-style-type:none;
  display:inline-block;
  border-left:1px solid white;
}
.navul li:first-child {
  border-left:none;
}
.navul a {
  display:inline-block;
  padding:10px;
  margin:0px;
  text-decoration:none;
  color:#fff;
  border:1px solid blue;
}

Here is a snapshot of what I see:

717×94 4.17 KB

As I decrease the padding in ‘a’ tag, the size of the blocks go smaller and vice versa. I have already made list-style-type as “none”. I have tried making padding:0 and margin:0 on ‘li’ tag but it doesn’t seem to work. I really don’t have a clue of what’s going on.

What are these little blue boxes around the ‘a’ blocks? Can anyone help?

2

Only the styling part of it. :wink:

I wouldn’t bet on the cause is only to find in that css snippet. :slight_smile:

1 Like
3

As Erik said above the code you have shown above does not produce the display that you are showing so there must be something else in the mix?

This is the assumed html for your CSS:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
nav {
	position:relative;
}
ul.navul {
	padding:0;
	margin:0;
	background-color:rgba(12,11,11,0.9);
}
.navul li {
	list-style-type:none;
	display:inline-block;
	border-left:1px solid white;
}
.navul li:first-child {
	border-left:none;
}
.navul a {
	display:inline-block;
	padding:10px;
	margin:0px;
	text-decoration:none;
	color:#fff;
	border:1px solid blue;
}
</style>
</head>

<body>
<nav>
  <ul class="navul">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
    <li><a href="#">Item 6</a></li>
  </ul>
</nav>
</body>
</html>

Which produces this display:

Please supply the code that produces the screenshot you posted and we will try to help.:slight_smile:

2 Likes
4

The most likely explanation would be that all your links is missing their closing tag in the html, like this:

<li><a href="#">Home</li>

Please confirm or post additional code. :slight_smile:

1 Like
5

@PaulOB, @Eric_J,

Here’s the link to the Codepen.

Thanks for the quick help BTW. Really appreciate it.

1 Like
6

Hi there workfreelanceron,

this is a an essential tool for coders…

https://validator.w3.org/

You should make sure that it is your toolbox. :winky:

It would have immediately found the problem
that @Erik_J hinted at in post #4. :biggrin:

coothead

3 Likes
7

It’s on Codepen. So the HTML part of it does not need to be inside the <html> or <body> tags.

And I just checked the CSS part too. Have already rectified the only problem: display:normal;

The problem still persists.

I even tried removing the complete media query part and the “hamburger” code. Nothing seems to work.

8 
    <ul class="navul">
    <li><a href="#" class="navlink">Home</li>
    <li><a href="#" class="navlink">About</li>
    <li><a href="#" class="navlink">Services</li>
    <li><a href="#" class="navlink">Portfolio</li>
    <li><a href="#" class="navlink">Contact</li>
  </ul>

That is not valid - on CodePen or elsewhere - for the reason @Erik_J already explained.

9

Yes, I am so sorry. Just saw that. Yes, Eric_J pointed it out earlier. Thanks so so much, all of you.

Just one question. why doesn’t the blue border of the links collapse into each other? The margin is set to 0 in the .navbar a part. The ‘a’ tag border does not coincide with the ‘li’ tag border. Why so?

10

Okay, so I found out that there is a slight difference between the ‘li’ tags when placed horizontally. Is this the norm?

11

A new line between in-line elements will create a space between them in the line.

1 Like
12

You are using display:inline-block to make the items horizontal and the elements behave like ‘words’ in that a space between each pair of tags is honoured rather than being ignored as per normal.

It’s a common problem but these days you could just add display:flex to .navul and the space will disappear on modern browsers. The inline-block then becomes a fallback for older browsers as newer browsers treat the element as a flex item instead. (There are many other fixes for the inline-block whitespace problem which have been discussed on the forums many times.)

3 Likes
13

One can’t really know for sure how the browser renders faulty code like in your case.

(Off topic maybe)
Here’s an example that seems faulty enough to not work, or does it?

Browser-Test.html (274 Bytes)

JsFiddle to play with: https://jsfiddle.net/Erik_J/tkzomz0g/

14

Thanks Eric, Paul, Sam, now I understand the logic behind it.

1 Like
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.