CODEWITHSUNDEEP
htmlcsswordpresscontent-management-system
user3982977
user3982977

Reputation:

Background colour will not fill entire background to edge of border

I need some help with some CSS I have coded. I have a menu aligned on the right however when I try to fill the background colour, it does not fill to the border edge. I understand that the problem is to do with the borders and that there is a gap between each menu item however I cannot seem to figure out the solution. Any help will be appreciated.

PHP/HTML:

<div id="header">
   <div id="menu">
      <?php wp_nav_menu(array('theme_location' => 'header-menu')); ?>
   </div>
</div>

CSS: 

#header, #menu ul {
   background-color: #fff;
   text-align: right;
   line-height: 65px;
   list-style-type: none;
}

#menu {
   border-bottom: 1px solid rgba(231, 76, 60,0.6);
}

#menu li {
   display: inline-block;
   border-left: 1px dotted rgba(231, 76, 60,0.6);
}

#menu a {
   display: block;
   padding: 0 10px 0 10px;
   text-decoration: none;
   color: #c0392b;
   font-family: 'Open Sans', sans-serif;
}

#menu a:hover {
   background-color: #c0392b;
   color: #fff;
}

Any help is appreciated thanks :)

Upvotes: 0

Views: 150

Answers (2)

Vinoth Raj
Vinoth Raj

Reputation: 3

I see you applied list elements inline-block which is a whitespace dependent method, it is dependent on font setting so whitespace is coming.

To solve specify font-size to inline-block elements and set font-size:0 to parent container.

Update your code as follows:

#menu {
   border-bottom: 1px solid rgba(231, 76, 60,0.6);
   font-size:0
}
#menu li {
   display: inline-block;
   border-left: 1px dotted rgba(231, 76, 60,0.6);
   font-size:14px
}

Upvotes: 0

Māris Kiseļovs
Māris Kiseļovs

Reputation: 17275

Gap between your menu items is just a character space. You should modify your HTML to exlude spaces between elements or just set font-size:0 for #menu and then set correct font size back for links.

#header, #menu ul {
   background-color: #fff;
   text-align: right;
   line-height: 65px;
   list-style-type: none;
}

#menu {
   border-bottom: 1px solid rgba(231, 76, 60,0.6);
   font-size: 0;
}

#menu li {
   display: inline-block;
   border-left: 1px dotted rgba(231, 76, 60,0.6);
}

#menu a {
   display: block;
   padding: 0 10px 0 10px;
   text-decoration: none;
   color: #c0392b;
   font-family: 'Open Sans', sans-serif;
   font-size: 16px;
}

#menu a:hover {
   background-color: #c0392b;
   color: #fff;
}

Upvotes: 1

Related Questions