I have this code:
<span class="total white bold" style="background: #C2C555">TOTAL:</span>
<span style="background: #C2C555; margin: 0;">1 night</span>
<span class="cost">€ 120.00</span>
I expected the three spans would be together, but there is a space between them.
How to remove that space?
I'm using Chrome.
Regards
Javi
Remove the line-breaks, i.e.
<span class="total white bold" style="background: #C2C555">TOTAL:</span><span style="background: #C2C555; margin: 0;">1 night</span><span class="cost">€ 120.00</span>
jsFiddle: http://jsfiddle.net/LECBb/
Related
I have below line which is causing next line after text 100% and 99.8%
can anyone pls help me how can i display all this in one line side by side.
<span style="font-size:12px;font-weight:bold;padding-left:800px;">99%>=<span style="color:#69BB1D;">GREEN</span><=100%, <span style="padding-left: 950px;">41%><span style="color:#FFD700;">YELLOW</span><99.8%,</span> <span style="color:#EE543D;padding-left:1100px;">RED</span><99.6%</span><br />
I believe the issue is "padding-left" in each span, it causes them to go to next line because they can't fit to the screen.
If you remove the padding -or at least decrease the value- they will be showing in one line side by side.
Example Here:
https://jsfiddle.net/zjbot272/
<span style="font-size:12px;font-weight:bold;">99%>=
<span style="color:#69BB1D;">GREEN</span><=100%,
<span style="">41%>
<span style="color:#FFD700;">YELLOW</span><99.8%,</span>
<span style="color:#EE543D;">RED</span><99.6%</span>
Try adding white-space: nowrap;. Anyway what you are doing is weird.
<span style="font-size: 12px; font-weight: bold; padding-left: 800px; white-space: nowrap;">99%>=<span style="color:#69BB1D;">GREEN</span><=100%, <span style="padding-left: 950px;">41%><span style="color:#FFD700;">YELLOW</span><99.8%,</span> <span style="color:#EE543D;padding-left:1100px;">RED</span><99.6%</span>
I have a contenteditable text structure like so:
<div class="content" contenteditable="true">
<span contenteditable="false">
<span class="chunk" contenteditable="true">This sentence contains </span>
</span>
<span contenteditable="false">
<span class="chunk bold" contenteditable="true">some bold</span>
</span>
<span contenteditable="false">
<span class="chunk" contenteditable="true">text!</span>
</span>
</div>
This enables selecting text across all 3 "chunk" spans. However, removing the "outline" from it using css disables selecting text:
.chunk {
outline: 0px solid transparent;
}
Can anybody explain why? JSBIN example
EDIT
It's definitely the EXISTENCE of the outline that's causing the issue. Giving it a 1px solid transparent outline still allows text selection. As soon as you specify 0px, it prevents selection.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
A Space between Inline-Block List Items
I have a JSFiddle demo of my html code. Here is the code here:
<span style="display: inline">Hello Wo</span>
<span style="display: none;"></span>
<span style="display: inline">rld</span>
The problem I'm having is that an extra space is being inserted between the 'o' and the 'r' in Hello World!. The display style is set to none, so can someone please tell me how I can get the Hello World! phrase without the space?
The linebreaks are causing it - http://jsfiddle.net/RhvjF/1/
Can't find the particular post, but smart people suggested 3 ways of fixing it:
Put everything in one line (remove all line breaks)
Comment out the line breaks, like
<span style="display: inline">Hello Wo</span><!--
--><span style="display: none;"></span><!--
--><span style="display: inline">rld</span>
Set the container font-size to 0 and re-set it for span-s
UPDATE
There are at least 2 more ways:
Break the tags, like
<span style="display: inline">Hello Wo</span
><span style="display: none;"></span
><span style="display: inline">rld</span>
Float the elements, i.e. span { float: left }
This is caused by line breaks. You have two choices:
Remove the line breaks
Float your content.
Option 1
<span style="display: inline">Hello Wo</span><span style="display: none;"></span><span style="display:inline">rld</span>
Option 2
<style>
#spanContainer > span { float:left; }
</style>
<div id="spanContainer">
<span style="display: inline">Hello Wo</span>
<span style="display: none;"></span>
<span style="display: inline">rld</span>
</div>
See http://jsfiddle.net/RhvjF/2/
HTML:
<div id="wrapper">
<span style="display: inline">Hello Wo</span>
<span style="display: none;"></span>
<span style="display: inline">rld</span>
</div>
CSS:
#wrapper{
font-size:0;
}
#wrapper>*{
font-size:16px; /* Or whatever you want */
}
I have a little CSS problem. This occurs in IE, FF and Chrome. However on the iPhone Safari browser, it looks fine. The problem is that the second 'block' span tag (id="myDiv") does not float to the left as the first block span tag does, it has a padding to the left of some sort, which I never applied. How can I remove that padding to the left of the id="myDiv" span tag?
<head>
<style>
.plansHeader{
font-weight:bold;color:rgb(73,102,145);font-size:12pt;margin-bottom:6px;line-
height:14pt;
}
</style>
</head>
<body>
<span style="display: block">
<img src="http://m.v4m.mobi/uni/thumbs/arrow.png" border="none" style="vertical-align: middle; float: left;"/>
<span id="plansHeader">e-phone to e-phone calls: R0.40 p/m</span>
</span>
<span id="myDiv" style="display: block">
<img src="http://m.v4m.mobi/uni/thumbs/arrow.png" border="none" style="vertical-align: middle; float: left;" />
<span class="plansHeader">0 minutes call time included(to Any mobile/landline)</span>
</span>
</body>
Thanks You
add this after your span :
<div style="clear:both;"></div>
It's should look like this:
<span style="display: block">
<img src="http://m.v4m.mobi/uni/thumbs/arrow.png" border="none" style="vertical-align: middle; float: left;"/>
<span id="plansHeader">e-phone to e-phone calls: R0.40 p/m</span>
<div style="clear:both;"></div>
</span>
<span id="myDiv" style="display: block">
<img src="http://m.v4m.mobi/uni/thumbs/arrow.png" border="none" style="vertical-align: middle; float: left;" />
<span class="plansHeader">0 minutes call time included(to Any mobile/landline)</span>
<div style="clear:both;"></div>
</span>
and remeber: Always clear floats!
It does, but your image is slightly taller than the line on which the image appears, so the second line is floating against the margin of the image.
You need to clear floats (either by adding a div between lines with style for clear: both or setting CSS on the second block to clear the float) to prevent this from happening. You could also just set the first line to line-height: 21px, the height of your image (which I'd recommend you do anyway), and that'll fix it, but ultimately you'll want to clear the floats to be safe.
I have the code below with 3 columns. I want to have the border of each column and each column also has its own color. I tried many previous examples of multiple column css problem and they don't work. For example, I don't want to use dirty trick of background image to render background color and border because the website allows changing color. Also I cannot use the method using thick border as color and then use negative margin with relative positioning. That method does not allow border. Below is the code. What is the best way? Thanks
<div id="results" style="display:block;float:left;width:210px;border:1px solid black;">
<span id="left" style="display:block;float:left;width:140px;border-right:1px solid black;">This is a long text and can be wrap to many lines</span>
<span id="middle" style="display:block;float:left;width:30px;border-right:1px solid black;">3:32</span>
<span id="right" style="display:block;float:left;width:30px;">Click</span>
</div>
Why just add all span height: 100%; and top div height: auto;?
BTW, I am pretty sure that span with display:block; is div .
BTW2: Table tag isn't banned - when u need table with "table data" (like e.g. schedule) you should use it. ;) Don't if you build layout of all website...
<div id="results" style="height:150px;float:left;width:210px;border:1px solid black;">
<span id="left" style="height:auto !important;height:100%;min-height:100%;float:left;width:140px;border-right:1px solid black;">
This is a long text and can be wrap to many lines
</span>
<span id="middle" style="height:auto !important;height:100%;min-height:100%;float:left;width:30px;border-right:1px solid black;">
3:32
</span>
<span id="right" style="height:auto !important;height:100%;min-height:100%;float:left;width:30px;">
Click
</span>
</div>
the only prob is that container have to have set height.
Like MaRiz said, you should use a table in this case and set the CSS property: border-collapse: collapse;