I'm setting up a banner and are using webkit-box (-webkit-line-clamp, -webkit-box-orient, overflow, text-overflow) to hide put ellipsis after 4 lines and hide everything below. The ellipsis shows up at the end of the fourth row but the text continues after that for ane whole row and thhe top of the row after.
I have been fiddeling around with it by changing properties in elements and googling for a solution but I'm coming up short and I need some help to figure out what's causing this in my code.
Code for the element:
text-align: justify;
margin: 0 0 8px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 8px;
margin-left: 0px;
-webkit-box-flex: 1;
-webkit-flex: 1 1 100%;
flex: 1 1 100%;
line-height: 1.2;
Related
I can't get rid of padding inside of a buttons. There probobably is something I am missing, but after several hours of googling and trying I am rising a white flag. Please help.
Buttons in question are placed in table cells as shown in the picture below. I am trying to get rid of a spacing shown in red color. Also pink arrows show that padding between rows is affected as well, although I am not quite sure if the reason stems from the same problem. When I enlarge button height, cells misalignment is still present (see second picture).
Buttons in table #1
Buttons in table #2
I have literally tried setting padding:0 and margin:0 everywhere with no success.
button {
padding: 0;
margin: 0;
}
.day-button {
width: 50px;
height: 44px;
border: none;
overflow: hidden;
padding: 0px;
margin: 0px;
}
.text-up {
font-weight: bold;
font-size: 14px;
background-color: aquamarine;
padding: 0px;
margin: 0px;
}
.text-down {
font-weight: bold;
font-size: 10px;
background-color: aquamarine;
padding: 0px;
margin: 0px;
}
<td>
<button class="day-button"><span class="text-up">10</span><br/><span class="text-down">NONE</span></button>
</td>
Solution:
The spacing you are referring to is caused by the fixed height you have set on your .day-button class.
If you removed it, the height will be set to auto depending on the content size.
For the spacing between the spans you can remove the <br> as #Sfili_81 said, and then change your button's display to:
button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
I described my original problem in this thread.
In short, when using custom counters in ULs, the text indentation broke.
Marc Audet proposed a very elegant solution which I implemented in our code.
Now - not surprising - this does not work if the list is supposed to float around images :-(
You can see the problem here: http://cssdesk.com/eEvwn
The numbers are lying on top of the image.
Again: no surprise, they are absolutely positioned after all.
So.
Is there a way to fix this, or do I have to make my client unhappy by telling him it's technically not possible?
Thank you again for taking the time to answer.
If you need more info, please let me know.
I revisited my previous solution and made some modifications to the CSS as follows.
For the top-level list:
ol.custom {
margin-left: 0;
padding-left: 0px;
counter-reset: counter_level1;
list-style: none outside none;
display: block;
line-height: 18px;
width: 500px;
}
ol.custom li {
list-style: none;
margin: 0 0 0 0;
padding: 0 0 0 20px;
outline: 1px dotted blue;
overflow: hidden;
}
ol.custom li:before {
display: inline-block;
width: 20px;
margin-left: -20px;
content: counter(counter_level1)". ";
counter-increment: counter_level1;
font-weight: bold;
}
and for the nested list:
ol.custom ol {
margin: 0 0 0 0;
padding: 0 0 0 0;
counter-reset: counter_level2;
}
ol.custom ol li {
position: relative;
margin: 0 0 0 0;
padding: 0 0 0 40px;
}
ol.custom ol li:before {
display: inline-block;
width: 40px;
margin-left: -40px;
content: counter(counter_level1, decimal)"." counter(counter_level2, decimal)". ";
counter-increment: counter_level2;
}
Essentially, I removed the absolutely positioned pseudo-elements since those will not work near floated content.
However, because of the negative-margin for the pseudo-elements, the labels could still overlap the floated images, so add overflow: hidden to the top level li style and this creates a new block formatting context which takes care of the over lap issue.
Downside: depending on your content and the floated image, you can get some large chunks of white space as shown in my new demo:
http://jsfiddle.net/audetwebdesign/buXKy/
I guess from the CSSdesk that you post that you want the indentation to be similar to what shows in the bottom panel.
First, you want the numbers to be off the text. You can get this by setting a margin-left that matches the width:
ol.wrong li:before {
....
width: 20px;
margin-left: -20px
}
ol.wrong ol li:before {
width: 40px;
margin-left: -40px;
}
Since the margin left is the same amount than the width, it doesn't take space.
And, to adjust the global position, set:
ol.wrong ol li {
margin-left:15px;
}
In your original code, this is margin-right. I would say that this is an error, doesn't seem to make sense to adjust the margin right
So I have this text that needs to break if it gets too long: If there's a hyphen or space in the word it should break on that. Is there a css style that makes this happen?
The closest I've gotten is by using word-wrap:break-word, which works in Chrome, but not Firefox. This is what it looks like in FF:
Here's other things I've tried:
Max-Width - this has worked for me in the past, but it's having no affect.
Here's how it should look, as it does in my code on fiddle or Chrome, it breaks on the hyphen:
Here's the code in fiddle:
<style>
.landing-sem-left, .landing-seo-left, .specials-top-left {
max-width: 460px;
padding-right: 30px;
}
.landing-sem-left, .landing-sem-middle, .landing-seo-left, .landing-seo-middle, .specials-top-left, .specials-top-middle {
padding-bottom: 23px;
}
.landing-sem-left, .landing-sem-right, .landing-sem-middle, .landing-seo-left, .landing-seo-right, .landing-seo-middle, .specials-top-left, .specials-top-right, .specials-top-middle {
border: 0 none;
float: left;
margin: 0;
overflow: hidden;
padding: 0;
}
#view-specials .heading-holder, #view-browse .heading-holder {
margin-bottom: 18px;
padding-right: 0 !important;
}
.block, .heading-holder {
display: block;
max-width: 461px;
overflow: hidden;
padding: 0 30px 0 0;
}
#view-specials .heading-holder, #view-browse .heading-holder {
margin-bottom: 18px;
padding-right: 0 !important;
width: 100% !important;
word-wrap: break-word;
}
.block, .heading-holder {
clear: both;
display: block;
float: left;
max-width: 461px;
overflow: hidden;
padding: 0 30px 0 0;
}
#landing-sem-container .h1-size1, #landing-seo-container .h1-size1 {
font-size: 30px !important;
}
.heading-holder .h1-size1 {
color: #003D77;
font-size: 30px;
line-height: 30px;
}
.heading-holder h1 span {
border: 0 none;
display: block;
font-family: Helvetica,Arial,sans-serif;
margin: 0;
padding: 0;
text-transform: uppercase;
}
.heading-holder h1 span {
color: #008CC1;
display: block;
font-size: 36px;
line-height: 38px;
margin: 0 0 -10px;
}
#landing-sem-container .h1-size3, #landing-seo-container .h1-size3, #specials-top-container .h1-size3 {
font-size: 60px !important;
line-height: 72px !important;
max-width: 461px;
width: auto;
}
.heading-holder .h1-size3 {
color: #008CC1;
font-size: 54px;
letter-spacing: -1px;
line-height: 50px;
}
.heading-holder h1 span {
display: block;
margin: 0;
padding: 0;
text-transform: uppercase;
}
</style>
<div class="landing-seo-left">
<div class="heading-holder">
<h1>
<span class="h1-size1">PRE-OWNED</span>
<span class="h1-size3">
Mercedes-Benz
</span>
</h1>
</div>
<div class="landing-seo-content">
<p>
Auto Lenders is a no-haggle, pre-owned car dealership with <a class="blue-bold-link" href="/store-locator/">5 New Jersey locations</a>. Browse our entire used Mercedes inventory below.
</p>
</div>
<div class="landing-seo-content-smaller">
<p>
Our <a class="blue-bold-link" href="#">Mercedes inventory</a> is updated often. If you don't see what you're looking for, call <strong>888-305-5968</strong> or hit ‘Subscribe to Search’ below to be notified when new matches arrive.
</p>
</div>
</div>
I'm not concerned with IE.
What you really need to be doing is looking at responsive text in CSS3. Check out this and the example of what happens when you resize the page. This is the best solution to your question.
1) You have to not only constrain the max-width but also to define the width for your .heading-holder to 100% to tell the browser to reserve this area for this element only. Otherwise the textblock below will begin to flow in the logo-free areas.
.block, .heading-holder {
display: block;
max-width: 461px;
width:100%; /*<-- tell browser to require all the space for this element*/
overflow: hidden;
padding: 0 30px 0 0;
}
2) Then it's easy to implement a work around by splitting the logo sub-words with a div container set to display:inline-block. This will display the logo inline as long there is enough place for the element and breaks in two lines when there should be not enough place for it. Sorry for doing it the dirty inline style way but you've got the idea.:
<span class="h1-size3">
Mercedes-<div style="display:inline-block;">Benz</div>
</span>
Here's the working js-fiddle example
In CSS, white-space: normal means that a string can be broken at any space character. But this is normally not needed, as it is the default. However, some special characters around a space may prevent normal wrapping in some browsers; it’s really a mess.
For a hyphen, there is nothing similar, but there are various other techniques. In fact, reasonably modern versions of Firefox treat a hyphen as allowing a line break after it, but only if there is a sufficient amount of letters on either side of it – and in the case of “Mercedes-Benz”, the amount of letters after the hyphen is not quite sufficient.
Probably the safest technique is to use CSS to add a ZERO-WIDTH SPACE after the hyphen. It acts as an invisible line breaking hint. The character causes some problems in old versions of IE, but they are so old that the CSS technique is safe (they ignore the CSS rule). This means that you would need markup like
<a class=part>Mercedes-</a>Benz
and CSS like
.part:after { content: "\200B"; }
Using span rather than a would be better in general, but the CSS in your fiddle would then cause some undesired side effects. You should probably tune those rules so that you can use span here. You could make the span contain just the hyphen if you like, but then it would be better to invent a better class name.
Do not use word-wrap:break-word, because it literally breaks words, instead of proper word division.
My private webpage's main content is not displaying strangely within Firefox. The header and footer bar both display and the main text is placed adjacent to them towards the right. Occasionally, the footer also moves above the main text. I'm guessing this is all one issue involving the positioning of DIVs that I'm somehow missing. [This has been solved]
The height of two DIVs that are equally as tall when displayed in Chrome is also different. This issue also occurs in Safari but in a different way. There is a 1 px gap between the logo and the navbar that isn't present when viewed in Chrome or Firefox. Can anyone think of a way to reset all of the browser defaults to prevent similar things from happening in the future?
The website is currently not online yet and I'm debugging it for final release. (I don't really want to release this in the current condition as it will frustrate anyone who doesn't use a webkit browser.)
Also, as a side note, anyone know how to fix the CSS errors I'm getting in Internet Explorer 9? The gradient in the nav bar is gone, some areas have missing background color, and all picture links have annoying boxes around them.
EDIT: I saw in an online CSS gradient generator what I need to do to make the gradients work in IE9. The background issue apparently stems from the same source.
Also, is anyone in Opera experiencing issues with the latest debug version at http://jsbin.com/ipixay/1? (Credit for this one goes to Sunyatasattva.)
The link to the fiddle (where the code is posted at) is: http://jsfiddle.net/aaQSD/7/ Please forgive me for the amount of CSS that's still there, but I can't tell which causes the Internet Explorer 9 problems.
My best guess is that the Firefox problem lies somewhere in this section of CSS:
body {
margin: 0;
padding: 0;
text-align: center;
font-family: Times;
background: #efefef url(pics/background.png) repeat top center;
}
#container {
overflow:auto;
width: 95%;
min-height: 100%;
min-width: 946px;
margin: 0 auto 10px auto;
}
#content-wrapper {
width: 100%;
float: right;
text-align: left;
margin: 10px 0 0 0;
}
#content-inner {
padding: 0 15px 0 15px;
}
.center-slide {
font: normal 62.5%/1.5 Times;
letter-spacing: 0;
width: 900px;
height: 485px;
position: relative;
padding: 20px 0 0 0;
margin: 0 auto 0 auto;
background-color: #FFFFFF;
border-radius: 8px;
}
.boxes {
margin: 0 auto 0 auto;
width: 900px;
}
.left-box {
float: left;
background-color: #FFFFFF;
border-radius: 8px;
margin: 10px 5px 0 0;
padding: 20px;
width: 500px;
position: relative;
}
.logo {
width: 26%;
text-align: center;
float: left;
font-family: Times;
font-size: 65px;
font-weight: bold;
color: #FFFFFF;
padding: 10px 0 0 0;
background-image: -moz-linear-gradient(0% 22px 90deg, #0B3474, #517ABA);
background-image: -webkit-gradient(linear, 0% 0%, 0% 70%, from(#517ABA), to(#0B3474));
}
header {
width: 100%;
min-width: 863px;
background-color: #000047;
float: left;
padding: 10px;
color: #FFFFFF;
text-align: left;
font-size: 20px;
overflow: hidden;
margin: 0 0 10px 0;
}
nav {
background-color: #6a6a6a;
font: 16px Times;
min-width: 700px;
float: right;
width: 74%;
}
footer {
font-family: Times;
text-align: center;
background-color: #000047;
color: #FFFFFF;
text-align: center;
padding: 10px 0;
width: 100%;
min-width: 863px;
}
Here is the list of things that have been fixed:
Unwanted boxes/borders around picture
Firefox display issue
Glitchy footer
EDIT: I'm currently working on making a fiddle with the minimal code to replicate the issue as suggested in the comments. I hope you can forgive me for my noobish mistake. Thanks, everyone who have responded so far!
EDIT 2: The fiddle is out! I've removed the pandora's box of code that used to be below.
The header and footer are displayed adjacent to the main container
Is there a reason why they are floated? Removing the float: left rule from the header, makes the container stack below it. If they need to be floated for some reason I am not seeing, perhaps you should consider adding a clear?
Logo height different from navbar element heights
This piece baffled me a bit: I think the culprit is browser default line-height property, which, on Chrome, is coincidentally making your elements align.
Your nav elements have a set line-height of 61, plus a vertical padding of 12 on both sides, adding up to 85px. Your logo has no defined line-height and a font-size of 65px plus a padding-top of 10px. In Firefox this is 10px short.
To fix this, just set the line-height to your logo element as well.
Here is a working JSBin of your code:
Working example
Internet explorer problems:
Missing gradient
Missing background
Annoying border
I don't have IE9 at hand right now, so I might look into it later if you need it, but here are my guesses.
As for the missing gradient, your CSS specifies only webkit and mozilla vendor prefixes. You might want to take a look at the -ms– prefix as well, and check which rules really need it and which don't.
I am skipping the missing background part because it's quite vague and I am not testing on IE right now.
As for the border around linked images, you could perhaps add this rule to your CSS:
a img {
border: 0;
outline: 0;
}
EDIT:
Safari annoying one pixel gap
As for the Safari annoying one pixel gap, it apparently comes from the fact that Safari doesn't calculate well your float: left + width: 26% plus float: right + width: 74%. Adding a .1% to the first element width fixes the problem, but it is not the most elegant solution.
The best solution for your problem at hand is to just float both your elements left. You can see an updated fiddle working in Safari:
Working example
I have edited your fiddle for it to work. I essentially just added float: left; to your #container. You can look at my edits for further details. http://jsfiddle.net/aaQSD/8/
I have to use the
position: relative
in order to have a scroll bar appear in case of overflow (scroll bars apparently don't work when using the fixed position).
But by using relative, my inline block will appear in the middle of the page, and I can't position it 30px to the right on every screen size. Is there any solution for this?
My code right now:
#main_wrap
{
min-height: 100%;
background: url(images/content_back.png) repeat-y top left;
margin: 0 0 0 240px;
position: relative;
}
#main
{
position: relative;
width: 680px;
padding: 0 40px 5px 40px;
font: normal 14px Verdana, Arial, sans-serif;
line-height: 20px;
display: inline-block;
z-index: 2;
}
Another solution I would be fine with is when I can have a scrollbar while using the fixed position.
Maybe a dumb question but I'm not that experienced with this subject :) Thanks in advance!