Struggling with aligning two spans properly. The second span is beginning lower than the first, causing a misalignment.
I'm attempting to align .cbtnSymbol and .cbtnLabel so that they start at the same height.
Check out this example: http://jsfiddle.net/DwGEa/
Experiment with using the CSS property float on multiple span elements - http://jsfiddle.net/DwGEa/4/
Here is the solution for you: http://jsfiddle.net/DwGEa/19/
To fix the issue, simply include
line-height: 30px; vertical-align:middle;.cbtnLabel
It appears that adding line-height and vertical-align can improve the layout, but it's important to clarify the specific outcome you're aiming for.
<div class="cmenu">
<div class="cbtn add"><span class="cbtnSymbol">+</span><span class="cbtnLabel" style="line-height: 20px; vertical-align: top;">Add</span></div>
<div class="cbtn add"><span class="cbtnSymbol">-</span><span class="cbtnLabel" style="line-height: 20px; vertical-align: top;">Delete</span></div>
</div>
To view the updated jsFiddle, click here: http://jsfiddle.net/DwGEa/11/
Include these four additional CSS properties in your existing label tag styles
.cbtnLabel {
padding: 0 0 0 10px;
font-size: 8px;
height: 30px;
display: inline-block;
display: -moz-inline-stack;
vertical-align:top;
zoom: 1;
*display: inline;
}
Perhaps you haven't considered this option yet, but it appears that your divs are already structured like a table. How about giving this approach a try:
<table class="cmenu">
<tr class="cbtn add">
<td class="cbtnSymbol">+</td>
<td class="cbtnLabel">Add</td>
</tr>
<tr class="cbtn add">
<td class="cbtnSymbol">-</td>
<td class="cbtnLabel">Delete</td>
</tr>
</table>
This method could streamline your CSS and make things simpler. For instance, you may not require the use of display: inline-block anymore.
Having an issue where I have two functions that both apply a CSS transform to an element using jQuery, but they end up overwriting each other. These functions are called at different times and have no knowledge of each other. An example showcasing the pro ...
I have added videos to a search results page. When the user hovers over the video, I want to show a preview of it in a separate container and start playing the video. $(".videoSearchResults video").mouseenter(function () { var container = document.cre ...
The code is set up to slide out of view when the user clicks on the image, but I'm unsure how to make it do the same when the user hits "enter" in the input area. It's a bit frustrating... http://jsfiddle.net/mlynn/vxzc6z6y/ JavaScript code: ...
The website design is very appealing. However, it seems to be loading quite slowly even on Google's servers. Is there a way to speed up the initial load time of the Polymer site? Additionally, there are numerous HTTP requests being made; is there a wa ...
My Upvote button starts off transparent, but when I click on it, the background color changes to green. What I need is for the button to become transparent again when clicked a second time. I've attempted using the following code snippet: function ...
I am looking to incorporate an external header and two external panels, one on the left and one on the right. The challenge is to ensure that these panels remain visible at all times on larger screens. I encountered some difficulties positioning the panel ...
My question might be simple, but it's what I have in mind. When working with two buttons in HTML - one for form submission and the other to trigger a JavaScript event - both buttons end up submitting the form. How can I make sure the second button onl ...
Can you assist me with CSS selectors? Let's say we have a style HTML tag: <style type="text/css"> [...selector...] {color:red;} </style> I want to create a selector with multiple attributes and logical operators, but I am uncertain about ...
My CSS was working fine just 5 minutes ago, but now it's not working and I'm not sure what the issue is. I checked the console and found this error: bootstrap.min.js:6 Uncaught TypeError: Cannot read property 'fn' of undefined at bo ...
I am looking to create a solution for retrieving the currently active audio track on an iOS device and transmitting that data to a remote web service. Is there a way to achieve this using HTML 5 code that is compatible with Safari, or are dedicated apps d ...
Is it feasible to achieve this using Bootstrap v3? After conducting extensive research, it appears that a custom solution may be necessary. In essence, I am working with a navbar positioned at the bottom of the content area. Upon page load, if the navbar& ...
I am facing an issue on a page where similar events occur but when new content is loaded halfway through, most of the jQuery functionalities stop working. The scenario involves answering questions in a 'game' format using AJAX calls. Once all que ...
I'm facing a challenge where I need to hide a button upon clicking another button, but the problem is that when the page refreshes, the hidden button becomes visible again. My objective is to keep it hidden even after refreshing the page and only reve ...
As a student, I am struggling with my development skills while attempting to create a personal website. I am encountering difficulty aligning items on my rows in bootstrap. Here is what I am trying to accomplish: 1. However, I am currently stuck at this po ...
Have you ever encountered issues with popups not working at times? It seems that there is no specific condition for the popup to appear. The expectation is that whenever a button is clicked, the popup should show up. Where do you think the problem lies in ...
Is it possible to modify the text color of "Contacte-nos" on hover? .popmake-contacte-nos { background-color: #fffff7; /* Green */ border: none; color: black; font-weight: bold; padding: 15px 32px; text-align: center; text-decoration: n ...
I am looking to execute specific functions at different time intervals when there is a change in input. The current setup is as follows: <input type="text" name="title" ng-model="title" placeholder="Search..." ng-model-options="{ updateOn: 'defaul ...
After working extensively with Bootstrap Grid and creating a layout, I found that I was unable to print exactly what was being displayed on the web page without any changes. Despite trying various methods of using JavaScript to add custom CSS codes for pri ...
My table is displayed below: <table style="width: 100%; white-space: nowrap; overflow: hidden;"> <tbody><tr> <th> Department </th> <th> Function </th> ...
I have a directive that doesn't use any template or templateUrl. How can I write a unit test for this directive? Below is the code for my directive. var app = angular.module('SampleDirective'); app.directive('sampleContent', [fun ...