I have a styled sentence with dynamic text. Sometimes the text is too long, and pushes the anchor at the end outside its box. I want the text to wrap after the span.price-difference, but the anchor button to be positioned against the right side of the p.
I added an :after pseudo element to .price-difference. I've got it set content: '' and display: block. Works in FF, Chrome, IE (including IE8, which I have to support), but not Safari.
There is an easy answer, wrapping the text following .price-difference with another span, and set it to block, but changing the HTML is a hassle, requiring a backend developer to make changes to a JSP file, and I'm hoping to avoid that. Looking for a CSS only solution, if it exists.
<p class="upsell"> Upgrade To
<span class="stateroom-upgrade"> Concierge Class </span>
for an additional
<span class="price-difference">$7.14 USD </span>
per person per day
<span>View Upgrades</span>
</p>
The CSS
.upsell {
background: none repeat scroll 0px 0px #FAFAFA;
border-top: 2px dashed #E8E8E8;
color: #666;
display: block;
font-size: 11.5px;
font-weight: 600;
margin: auto 19px 5px;
padding: 8px 0px 8px 8px;
position: relative;
text-transform: none;
white-space: nowrap;
width: 560px;
}
.upsell .price-difference {
color: #0C82C4;
font-size: 15px;
font-weight: 700;
margin-left: 5px;
display: inline-block;
}
.stateroom .upsell .price-difference::after {
content: "";
display: block;
}
.upsell .ccButtonNew {
position: absolute;
right: 10px;
top: 17px;
}
The p element has white-space: nowrap set on it, but when I turn it off, the problem doesn't go away.
I think it's related to the following link, but my situation isn't the same. In that question, the asker put a block level element div inside a p, which only takes inline elements. I have an inline element, span, inside the p. This should work.
:after pseudo-element working in FF, but not Safari or Chrome
.stateroom .upsell .price-difference:after {
content: "";
display: block;
position: absolute;
width: 30px;
border-top: 1px solid #000; /* placeholder border */
}
try adding a position to the after's css rules. i had a similar situation in which the after pseudo wouldn't display in old versions of safari but worked properly in all other browsers. I fixed adding a position rule to the css.
Hope this hepls.
Related
I cannot figure this out. I HAVE DONE RESEARCH so please, no comments about me doing more research. Also, I am a noob, so be nice ;)
Here's my site: http://library.skybundle.com/
Hover your mouse over the two black rectangles in the main blue nav bar (header area). The a:hover should make the color change to a gray. The ISSUE is that in Chrome, this looks perfect. But, in Firefox, the padding-right isn't long enough or something, so there is always a small black rectangle at the far right side of the "Educational Courses" button (this will only be visible when hovering your cursor over the button). In other words, the gray box doesn't go all the way to the right-side end of the button area upon mouse hover. I just don't understand why this looks and works great in Chrome, but bugs out in Firefox...
Believe me when I say I have tried everything I can to fix it using Firebug in Firefox. If you play around with it using an editor in your browser, you will see that if you try to make the padding longer for Firefox, it pops the whole button down onto a new line. So to fix THAT problem, you must make the container wider, but then the original problem comes back. It's a circle of problems and I'm sure one of you geniuses out there will see a simple solution that I am missing.
Please help. Thanks!
EDIT :
Here's my JSFiddle and code. Notice how it looks great in Chrome but not in Firefox?
http://jsfiddle.net/S4st8/
HTML:
<div id="navigation">
<div id="navigation-inner">
<div id="page-nav">
<div id="primary-nav">
<ul id="top-menu">
<li id="li-left">Product Training Videos</li>
<li id="li-right">Educational Courses</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
#navigation {
background: url(http://library.skybundle.com/wp-content/themes/business-services/library/styles/colour-images/mu-nav.jpg) repeat-x;
margin: 0px;
padding: 0px;
height: 40px;
width: 100%;
}
#navigation-inner {
margin: 0px auto;
padding: 0px;
height: 48px;
width: 960px;
}
#page-nav {
margin: 0px;
padding: 0px;
height: 40px;
width: 960px;
}
div#primary-nav {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
}
ul#top-menu {
margin: -5px 0.325em 0 0.325em;
position: absolute;
padding: 0;
z-index: 100;
top: 0;
left: 3em;
width: 367px;
}
ul#top-menu li {
line-height: 3em;
list-style-type: none;
height: 49px;
background-color: #2C2C2C;
float: left;
}
li#li-right {
list-style-position: inside;
border-left: 2px solid #5E5E5E;
}
ul#top-menu li a {
font-weight: bold;
font-size: 11pt;
text-decoration: none;
padding: 15px 10px 16px 10px;
color: #ffffff;
}
ul#top-menu li a:hover {
text-decoration: none;
width: auto;
color: #ffffff;
background-color: #505354;
padding: 15px 10px 17px 10px;
}
its because a tags (anchor tags) have a default display property of inline
due to CSS Box Model you would need to adjust your padding and set the anchor tags display property to display:block;
the display block allows the anchor tag to fill the whole space of the LI tag
change ul#top-menu li a to this:
ul#top-menu li a{
color: #FFFFFF;
font-size: 11pt;
font-weight: bold;
display: block; /* add this */
padding: 0 10px; /* add this */
}
the CSS Box Model adds the content + padding + border + margin
https://developer.mozilla.org/en-US/docs/Web/CSS/box_model
Take a look at this CSS rule:
li#li-right {
border-left: 2px solid #5E5E5E;
list-style-position: inside;
}
Dropping list-style-position: inside seems to fix your issue in Firefox (and still works in Chrome), but I haven't tested the implications in other browsers. The CSS rule is documented here.
The reason why : browsers apply their own css if you don't specify it. Firefox added the space for your bullet (somehow)
FF :
list-style-image none
list-style-position outside
list-style-type disc
GooChrome :
list-style-image: none;
list-style-position: inside;
list-style-type: none;
User JasonSperske gave you a fixing solution,
i invite you to RESET your css.
PS. in the meantime, you are invited to see : https://stackoverflow.com/help AND http://sscce.org/
Reading and understanding those pages will give you few reputations points
I have an <h2> title into a fixed with <div> (238px). When this page is rendered, the browser manage line breaks into the title to make the text fit the width (238px).
But the width property of the h2 element is still 238px, no matters where the line breaks are.
I want to set a border-bottom only under the text, and not under the full width of the h2 element, and I don't know how to achieve this using CSS.
You can see what I mean here : http://jsfiddle.net/np3rJ/2/
Thanks
I think this is what you need:
<h2><span>Horizon 2020, nouvelles opportunités</span></h2>
h2 span {
position: relative;
padding-bottom: 5px;
}
h2 span::after{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
border-bottom: 1px solid #000;
content: ""
}
Working demo in jsFiddle
I used the technique described in this answer: Advanced CSS challenge: underline only the final line of text with CSS
I introduced a span into the H2 in order not to change the display attribute of it, but you could just as easily use the same technique with a display: inline on your H2. This method would allow the control of the actual line though rather than setting display: inline if needed
This works on Chrome.
h2 {
width: fit-content;
}
If you are willing to use display: table-cell, and pseudo-elements, you can have a pretty good solution (with some minor limitations).
The HTML does not change:
<div class="dossier_titre">
<h2>Horizon 2020, nouvelles opportunités</h2>
</div>
and you can apply the following CSS:
.zone_33 {
width: 238px;
padding: 0px;
margin: 0px;
}
.zone_33 .dossier_titre {
margin: 0px 0px 20px 0px;
}
.zone_33 h2 {
color: #616263;
font-size: 150%;
font-weight: lighter;
padding: 0px 0px 12px 0px;
background: none;
border-bottom: 1px solid grey;
display: table-cell;
text-transform: uppercase;
}
.zone_33 .dossier_titre:after {
content: "";
display: table-cell;
width: 100%;
}
For the <h2> element, set display: table-cell, and add a pseudo-element after .dossier_titre (the containing block for the header/title element). The pseudo-element is also a table-cell and has a width of 100% (this is the key).
Also, since h2 is no longer a block element, add your margins to .dossier_titre to maintain the visual spacing in our layout.
How This Works
I am creating a two-cell table with the second cell (the pseudo-element) having a width of 100%. This triggers the browser to calculate the shrink-to-fit width for the first cell (h2) that contains the title text. The first cell's width is thus the minimal needed to display the text. The bottom border is as long as the longest text line in the text block within the table-cell.
Limitations
table-cell is not supported in IE7 without a hack, but the work-around is fairly well known and can be found if needed.
If the title had many short words, you might get the line breaking in unexpected places. You would need to insert   to keep specific words together as needed.
Fiddle: http://jsfiddle.net/audetwebdesign/h34pL/
Maybe display: inline-block; Or display: inline; is what you need?
Why not try:
text-decoration:underline
?
EDIT
Just make a span around "OPPORTUNITÉS" with the underline.
<h2>Horizon 2020, nouvelles <span class="underline">opportunités</span> </h2>
.underline {
text-decoration:underline
}
Can try "text-underline-position" property instead of table-cell and border. Make it simple!
text-decoration: underline;
text-underline-position: under;
All you can do is put your h2 element text into span like this:
<h2><span>Horizon 2020, nouvelles opportunités</span></h2>
and in css remove border-bottom from .zone_33 h2 {} and put it like this:
.zone_33 h2 span{ border-bottom: 1px solid grey;}
by this border-bottom will come under full text.
Try this, (I think it will help you)
.heading {
position: relative;
color: $gray-light;
font-weight: 700;
bottom: 5px;
padding-bottom: 5px;
display:inline-block;
}
.heading::after {
position: absolute;
display:inline-block;
border: 1px solid $brand-primary !important;
bottom: -1px;
content: "";
height: 2px;
left: 0;
width: 100%;
}
You could put a border-bottom and change the width of your h2 so that the border length matches your h2 length. Adjust the width to the width of your h2, taking into consideration it's font-size. Then add a padding-bottom to your h2 and set it to your liking.
<h2>Cats</h2>
h2{
border-bottom: 5px solid black;
font-size: 16px;
padding-bottom: 5px;
width: 64px;
}
I am currently trying to wrap my brain around a problem, but i can't seem to grasp it.
In an unordered list for a navigation, i want to add an icon before every list item via css before pseudo class.
<ul class="list">
<li class="list-item">one</li>
<li class="list-item">two</li>
<li class="list-item">three</li>
<li class="list-item">four</li>
</ul>
My first thought was to give both elements (the icon and the a-tag) display:inline-block and align the icon with vertical-align:middle. With just little adjustments (margin-bottom), this works well in chrome:
.list-item {
display: block;
font-weight: bold;
text-transform: uppercase;
margin: 10px 0;
padding-bottom: 10px;
border-bottom: 1px solid #F3F3F3;
height:1.5em;
overflow:hidden;
}
.list-item:before {
display: inline-block;
content: '';
vertical-align: middle;
background-color: red;
width: 5px;
height: 7px;
margin: 0 4px 0.125em 5px;
}
.list-item a {
display: inline-block;
overflow: hidden;
line-height: 1.5;
height:1.5em;
}
But when you load the page in firefox, the icon is way off at the bottom. http://jsfiddle.net/pUhPB/4/
I tried what seems to me every possible combination of display, vertical-align and margin-values to get it right in both browsers, and finally, if i give the a-tag vertical-align:middle and the icon vertical-align:baseline, it seems to work:
.list-item {
display: block;
font-weight: bold;
text-transform: uppercase;
margin: 10px 0;
padding-bottom: 10px;
border-bottom: 1px solid #F3F3F3;
height:1.5em;
overflow:hidden;
}
.list-item:before {
display: inline-block;
content: '';
vertical-align: baseline;
background-color: red;
width: 5px;
height: 7px;
margin: 0 4px 0 5px;
}
.list-item a {
display: inline-block;
vertical-align:middle;
overflow: hidden;
line-height: 1.5;
height:1.5em;
}
http://jsfiddle.net/L3N3f/
But i just don't get it. Why does the first version not work? To me, it seems way more logical than the version that actually works. And which one of both browsers doesn't render the elements the right way?
I already found a solution that seems to work for me, so it's not a very urgent question, but it bugs me that i don't understand the core of my problem (and the solution), so i would be really thankful if someone could enlighten me on this.
thanks
According to web standard only inline elements can be "vertically aligned" in spite that some browsers, like chrome, still align them. Note that it is the element that is aligned and not its contents!
So if you apply it to a <span> the <span> becomes aligned with the surrounding text and not whatever is inside it within in.
ispo lorem <span> text </span> due carpe diem
adding span {vertical-align:top; border: 1px solid black} makes <span> text </span> (whole box) become higher than the rest of the text and not push the text to the ceiling of the box <span>.
The core issue here is that Firefox is very literal when it comes to web standard whilst Chrome adds a few implicit features like this one.
For more details click here.
EDIT: apparently if you use vertical-align:top ONLY on the <a> it also works.
Your problem is that per spec setting overflow:hidden changes the baseline position of an inline-block. Firefox implements what the spec says. Chrome does not.
So as long as your .list-item a is baseline-aligned, it will render differently in the two browsers. The only way to make the renderings the same is to make sure you don't baseline-align any inline-blocks with non-visible overflow, which is what your second code paste does (it's using vertical-align: middle on the inline-block).
Try this: http://jsfiddle.net/pUhPB/6/
The first thing I do in these situations is to open the code in both browsers. Then I start removing CSS code until I can see the problem. Removing the margins and the vertical-align, both browsers have rendered the code differently. So I keep removing code until they're both the same. Once they were the same in both browsers, I then changed what I could to get the desired effect.
Here's the new CSS:
.list-item:before
{
content: '';
background-color: red;
width: 5px;
height: 7px;
margin: 5px 4px 0 5px;
float:left;
}
I'm trying to remove the pressed effect from button on IE9. In all other browsers I have no problems.
Please take a look to the code
HTML
<button class="fancy">howdy!</button>
CSS
.fancy {
width: 60px;
height: 30px;
position: relative;
top: 0px;
margin: 0;
padding: 0px;
display: block;
border: none;
padding: 0;
color: #FFF;
font-size: 11px;
background: green;
outline: none;
overflow: hidden;
line-height: 11px;
}
.fancy:active,.fancy:focus
{
padding:0px;
margin:0px;
border: none;
outline:none;
text-indent: 0;
line-height: 11px;
}
Working demo http://jsfiddle.net/MDfvE/
As you can see, when you click the button on IE9 you will see that the text is moved to the right and bottom. I want to remove that.
Any clue? Thank you!
IE only recognizes the :active pseudo class when the element is an anchor.
http://msdn.microsoft.com/en-us/library/cc848864%28v=VS.85%29.aspx
Try changing the button element to an anchor tag and adjust the styling to recreate the look you had for your button.
It's a browser behaviour, a simple solution is to use a link tag instead of button (if its triggering a javascript function).
<img src="myimg"/>
If you still want to use the <button>, I've found that there are some characteristics on each browser (in a simple debug):
Chrome adds outline and padding
Firefox adds a whole lot of stuff with the standart button border
IE messes with the inner text position
So to fix them, you have to manipulate the pseudo selectors for the button behaviour. And for IE, a good solution is to envolve your text on a element, and make it relative positioned. Like so:
<button type="button" class="button"><span>Buttom or Image</span></button>
<style>
button,
button:focus,
button:active{
border:1px solid black;
background:none;
outline:none;
padding:0;
}
button span{
position: relative;
}
</style>
Pen
I'm using <button> to make a post request in a form. I also styled a a.button exactly like the <button> (I need the a.button to make some JS stuff).
The button has some padding, a fixed height. When I do specify the width of the button / a they both look the same. But when I add width to the <button> it ignores the padding.
I'm having this problem in Chrome, Firefox and Opera, so I guess it's not a rendering fault. Also same issue with <input type="submit" />
Here is the basic CSS:
.button, button {
margin: 0;
display: inline-block;
border: 0;
text-decoration: none;
cursor: pointer;
color: black;
background: #ddd;
font: 12px Verdana;
padding: 40px; /* 40px, so you can see that it won't be rendered with width */
text-align: center;
}
The HTML:
Some text
<button>Some text</button>
<!-- Works fine till here -->
<br /><br />
Some text
<button style="width:200px">Some text</button>
Fiddle: http://jsfiddle.net/9dtnz/
Any suggestions why the browsers are ignoring the padding? (top and bottom when using height / left and right when using width).
Very weird, I've seen my Chrome has a box-sizing: border-box; rule for input elements, so padding is included in width...
So to avoid that just specify box-sizing: content-box; (some prefix can be necessary).
It looks fine to me, so it might be a style sheet conflict issue. Try using !important to override whatever it may be and that could solve your problem.
.button, button {
margin: 0;
display: inline-block;
border: 0;
text-decoration: none;
cursor: pointer;
color: black;
background: #ddd;
font: 12px Verdana;
padding: 40px!important; /* 40px, so you can see that it won't be rendered with width */
text-align: center;
}
Hope this helps.
Michael.