Space left vacant following an unordered list item

Is there a way to remove unwanted space after an unordered list in IE and Firefox, specifically in the last HTML <li> item? I've tried adjusting the ul width but it didn't work. Any ideas on how to get rid of the space? Thanks.

#menubar {
  width:249px;
  margin:0 auto;
  list-style:none;
  border:1px solid grey;
  border-radius:3px;
  margin-top:5px;
  padding:0;
  height:26px;
}
.toggle {
  margin:0;
  line-height:16px;
  float:left;
  border-right: 1px solid grey;
  padding:5px 8px 5px 8px; 
}
.selected {
  background-color:grey;
}
<body>
  <ul id="menubar">
    <li class="toggle selected">HTML</li>
    <li class="toggle">HTML</li>
    <li class="toggle">HTML</li>
    <li class="toggle selected" style="border-right:none;">HTML</li>
  </ul>
</body>

htmlcss

Answer №1

Avoid setting a fixed width for the ul element, instead opt for displaying it as an inline-block. To horizontally center it, apply text-align:center on the parent container.

div {
  text-align:center;
}
#menubar {
  display:inline-block;
  margin:0 auto;
  list-style:none;
  border:1px solid grey;
  border-radius:3px;
  margin-top:5px;
  padding:0;
  height:26px;
  text-align:left; /* reset text-align for list contents, if necessary */
}
.toggle {
  margin:0;
  line-height:16px;
  float:left;
  border-right: 1px solid grey;
  padding:5px 8px 5px 8px; 
}
.selected {
  background-color:grey;
}
<body>
  <div>
    <ul id="menubar">
      <li class="toggle selected">HTML</li>
      <li class="toggle">HTML</li>
      <li class="toggle">HTML</li>
      <li class="toggle selected" style="border-right:none;">HTML</li>
  </ul>
  </div> 
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to implement a scrollbar that only scrolls through one specific column in an HTML table?

I need help adding a scrollbar to a specific column in an HTML table. Take a look at this scenario https://jsfiddle.net/6wpdc4tL/: https://i.stack.imgur.com/svzIg.png This table should have two scrollbars, one for the light blue SCROLL column and another ...

javascripthtmlcsshtml-table

Adjusting iFrame Height to Fit Content Completely

I am looking to create a website where I can have a banner at the top and display another website below it without needing an additional scroll bar within the page. I have tried using an iframe, but I can't seem to get it to display correctly. I want ...

htmliframe

What causes Safari to display a black border around resized videos?

I've come across a strange issue while using Safari. Whenever I try to play an MP4 video with dimensions of 1920 * 1080, and resize the Safari window to a width of 937px, something strange happens: https://i.stack.imgur.com/oI50i.png A black border ...

cssvideosafari

Locate grandchildren elements using getElementById

My task is to modify the content and attributes of the table. The DOM structure is generated by a third-party tool, and I am using JavaScript to make changes in various sections. <div id="myId"> <div> <div> <table&g ...

javascripthtml

Disable button with Checkbox Javascript functionality

In my PHP code, I have an array of users that I pass to the view (in Laravel) and use a foreach loop to display all users in a table. Everything is working fine so far. However, I want to make a "send" button visible when a checkbox is clicked, instead of ...

javascriptphphtmlcheckbox

What is the best way to dynamically add the 'required' attribute to an input field?

My responsibility was to dynamically add required fields to all elements on each state that the user selected as required. In my database, I have a table containing the input ID (each input has a unique ID) and a boolean field indicating whether or not a r ...

javascripthtmlangularjs

Type in "Date" and select a date using your mobile device

Hey, does anyone know a good solution for adding placeholder text to an input with type="date"? I'm looking for a way to utilize the phone's built-in date selection feature on a website, rather than having users manually enter dates using the ke ...

javascripthtmlformsinput

What steps do I need to take in order to show the present value using a range input?

Hey there! I'm working on a code in HTML that includes an input of type range. Here's what it looks like: This is my input: <input type="range" min="1" max="100" value="50" class="slider" id="myRange"> Unfortunately, I'm unable to s ...

javascriptphphtml

Textfield with autocomplete dropdown

I have a text field on my website that needs to work as an autocomplete box. I have included the following code in the "headerbar" section of my page: Find :<input type="text" class="input2" style="margin-bottom:0px;" id="customersearchfield"> < ...

css

FireFox appears to be experiencing issues with accessing the contentDocument of a frame using jQuery

While this line of code functions correctly on Chrome and IE, it encounters an issue on FireFox. The error message displayed in the FireFox console is: ReferenceError: $ is not defined var lang = $($('#navFrame')[0].contentDocument).find('# ...

jqueryhtmlfirefoxdomframe

"Reposition all elements contained within a div that have a specific class

I'm completely new to Javascript and I've been trying to move all elements with a specific class inside a particular div. After doing some research, I found a solution that worked using IDs. However, when I tried to adapt it to work with classNam ...

javascripthtmlnode.jsclassnodes

Place the Div in a consistent position on images of varying widths

I have a dilemma with my class that is supposed to display images. The issue arises when I try to place a div within an image inside this class. Everything works smoothly when the image takes up the entire width of the class, but as soon as the image widt ...

htmlcssangulartypescript

Retrieving input values with JQuery

HTML <td data-title="Quantity"> <div class="clearfix quantity r_corners d_inline_middle f_size_medium color_dark m_bottom_10"> <button class="btn-minus bg_tr d_block f_left" data-item-price="8000.0" data-direction= ...

javascriptjqueryhtmldom

Preventing Height Stretch in CSS Flex-Wrap: A Guide

Is there a way to eliminate the large gaps between box3, box1 and box4, box6? How can we ensure each box adjusts its height dynamically? .wrap { display: flex; align-items: baseline; align-content:flex-start; justify-content: space-between; fl ...

cssflexbox

Ways to target other links exclusively during hover effect on a single link

I've been attempting to shrink all other links when one link is hovered over, but I'm only able to make the links after the hovered one shrink. .navlink { width: 100px; display:inline-block; background-color: red; } .navlink:hover~.navl ...

css

How can you create a unique custom border for an image and display it on another image?

I am working towards achieving a specific output similar to the one shown in this https://i.stack.imgur.com/ejiYC.png image. Currently, I have successfully created the border section. Now, my next challenge is how to overlap images and apply borders as de ...

htmlcssimageborder

Using the CSS trick of First-of-type and Last-of-type can result in shortened rounded edges when viewed in IE11

When using the radio+label trick to style radio buttons, a peculiar issue arises in Internet Explorer 11 (IE11). The first and last buttons in each set appear to have their bottom parts cut off or shortened, depending on the background displayed. Removing ...

cssinternet-explorercss-selectorscross-browser

Creating a sidebar that remains fixed in place even as the page is scrolled down can be achieved by using CSS and positioning properties

I am looking to create a website with a specific layout design as shown in this image: https://i.stack.imgur.com/ndKcz.png The main focus is on making the sidebar (F/T container) function as a social network link, sticking to the right side of the page ev ...

javascripthtmlcss

Is it possible to use a hyperlink in Node.js to transmit information to an API using an Express request?

I am working on an HTML page where I need to send data to an API when a specific link is clicked. To achieve this, I am using Express along with a form that has a POST method. Here is the link: <form action="/bx/processed-manually" method=&qu ...

htmlnode.jsformsapiexpress

"Learn the trick to concealing a modal and unveiling a different one with the power of jquery

Whenever I try to open a modal, then click on a div within the modal in order to close it and open another one, I encounter an issue. The problem is that upon closing the first modal and attempting to display the second one, only the background of the seco ...

javascriptjqueryhtmlcsstwitter-bootstrap