I have this JSFiddle and if you try to select the text just part of it is in the correct color, the rest is custom blue.
::selection {background-color: #FF6347; color: #fff;}
::-moz-selection{background-color: #FF6347; color: #fff;}
Any way to fix it?
Tested on Safari 9.1.
Chrome:
Safari:
The thing is, the ::selection element has some problems with supporting chrome and safari.
https://developer.mozilla.org/en-US/docs/Web/CSS/%3a%3aselection
To make it a little bit better viewing in chrome/safari you have to wrap your code between a span or a paragraph like so..
https://jsfiddle.net/akrm7uaL/8/
As you see, the text is wrapped in a div or span so all text is red when selected. unfortunately the browser will not support the spaces between the text, when you place a new div in your code. To solve this you have to place all your text in a span instead of a div and place it between one div like this..
<div><span class="circular"></span></div> <!-- instead of --> <div><div class="circular"></div></div>
https://jsfiddle.net/akrm7uaL/11/
As I look at your code, I suppose you use the id's for javascript or php or something so it will not completely your case if you HAVE TO add the id's to your code..
Related
i have taken this h1 and i have given it a class and applied border bottom to it so that i can give a nice underline effect.
I can use text-decoration property but giving bold underline effect gives me the ability to have width of underline line.
When i give h1 an underline, the border goes to 100% full width of the container.
please tell me how to fix it.
thanks.
Use display: inline the reason why the H1 is showing the border all the way across is because it is a displaying block by default. Hope this helps!
Because h1 is a block level element and by default this element take a 100% width. so make it a inline element.
here is the CSS to build the h1 as a inline element.
h1{border-bottom:1px solid red;display:inline-block;}
here is the HTML
<h1>My First Heading</h1>
Here is a Demo.. http://jsbin.com/voyuluyo/1/edit
HTML
<h1 class="headings"> hi this is SO </h1>
<h1 class="headings1"> hi this is SO </h1>
CSS
.headings
{
border-bottom:10px solid black;
}
.headings1
{
display:inline-block;
border-bottom:10px solid red;
}
Fiddle
Working Demo
Output:
As RaySinlao said, display:block will make it expand all the way. If you want to make the next element go to the next line, display:inline won't work. Use display:table. Table will shrink-wrap (to fit contents) or expand (to fix weird bugs) or clearfix. Come to think of it, table does a lot of stuff.
Using trick from here: Making the clickable area of in-line links bigger without affecting the layout, I set positive padding and negative margin on an anchor element, with the goal of extending the clickable region into some text beyond the element.
It works, but only if opacity is some value below 1! Firefox and Chrome exhibit the same behavior.
Compact demo: http://jsfiddle.net/zGsZK/8/
CSS:
a { margin-right:-250px; padding-right:250px }
.nowork { opacity:1 }
.works { opacity:0.999999 }
HTML:
<body>
<a href=# class=nowork>?</a> this black text is not clickable :(
<p>
<a href=# class=works>!</a> this black text is clickable, as it should be
</body>
Is this how it's supposed to work? Why? Is there a way to make it work when opacity==1?
I'm really not sure why this works, but if you add position:relative; to the nowork class, the clickable area will appear above the text similar to the works class. I believe this has something to do with how browsers render CSS, and since the <p> tag is rendered after the anchor, its native CSS (where cursor:normal; rather than cursor:pointer;) takes priority.
I want to implement a empty div with background color in it.
<html>
<head>
<style>
.dark_green {
background-color: #00D100;
width: 20px;
height: 4px;
}
</style>
</head>
<body>
<div class="dark_green"></div>
</body>
</html>
Under IE7/8/9 the height of this div is not 4px, it automatically change to 19px; Under FF and other chrome it is right.
Any suggestions?
It kind of depends on what you are trying to do. There are a few things that would work:
.dark_green {
[...]
line-height:4px;
}
or
.dark_green {
[...]
overflow:hidden;
}
Would both work.
The reason this is happening is because the text in your DIV (even if it's just whitespace) has a rendered line-height of 19px. The problem browsers are using that value instead of what you are setting as a fallback to not cut off text. Telling the browser that you want the text smaller (font-size:4px;), the line height smaller (line-height:4px;), or the text to get cut off (overflow:hidden;) should correct the issue.
The reasons I wouldn't use font-size in this context are:
It only works because the the line-height that is inherited when you
apply the new font size, so you might as well just set the correct
property.
Certain browsers have a minimum font size which is larger than 4px
(11px on FF, not sure if you can set this in IE), meaning that if
the user had a larger minimum set, your fix wouldn't work.
Add a doctype as the very first line such as <!DOCTYPE html>, to escape quirks mode. This is an important thing to do, or you'll have endless problems with IE.
Once you've done this, your original code will work in IE7 and greater just like it does in Firefox/Chrome.
I found this solution:
font-size: 4px;
add any item to the div you want to collapse, and set the display on that element to none.
if your problem div is
<div class="collapseToZero"></div>
Add something like this:
<span class="nothing"></span>
and add this style for the class
.nothing{display:none;}
and your resulting HTML will look like this
<div class="collapseToZero">
<span class="nothing"></span>
</div>
Now ie 7 will render your problem div with a height of zero instead of font size.
Another way - just to throw this into the mix: add an empty comment as the divs content. Yes its adding extra markup but it does work:
<div><!-- --></div>
I am going through my style sheets in an attempt to make my CSS for IE friendly and I am running into an issue with my padding-left for some reason. It is only applying the padding to the first line of text in my 'span' tag. When the text runs to the next line it goes all the way to the left inside the 'span' element.
(Can't show screenshot for NDA purposes)
BROWSER: IE7
CSS:
#rightContent .rightNav a,#rightContent .rightNav a:visited{
color:black;
display:block;
width:92px;
padding-right:12px;
height:35px;
background:url("../images/nav_off.png");
}
#rightContent .rightNav span{
display:table-cell;
vertical-align:middle;
height:28px;
padding-left:13px;
font-size:9px;
}
HTML:
<li>
<a href="">
<span>This text is too long.</span>
</a>
</li>
IE7 does not support display: table-cell: http://caniuse.com/css-table
You'll have to find an alternative technique, if only for IE7.
Try adding *float: left to the span - it will only apply to IE7 and lower. Maybe that will be a "good enough" fix.
It looks like you're using display:table-cell; vertical-align:middle for vertical centering. If it's absolutely vital to have that in IE7, it is possible without resorting to JavaScript, but it's a pain in the ass.
It seems similar to the question asked here: Why Doesn't IE7 recognize my css padding styles on anchor tags? I'm not sure exactly why it does that, it seems to be an IE bug. I would suggest either wrapping your text in something else(a div or a p tag), or just putting the text straight in the a tag and if you need specific styles for it just give the a tag a class.
I'm having trouble getting this working in most browsers, except for IE (it even works correctly in IE6) and Opera.
Firefox separates the divs correctly but only prints the first page.
Chrome and Safari only applies the page break to the last div.
How can I get this working across all browsers correctly?
The HTML:
<div id="leftNav">
<ul>
<!--links etc-->
</ul>
</div>
<div id="mainBody">
<div id="container">
<div class="pageBreak">
<!--content-->
</div>
<div class="pageBreak">
<!--content-->
</div>
<div class="pageBreak">
<!--content-->
</div>
</div>
</div>
The divs with the IDs #leftNav and #mainBody are are set to float:left, so they display nicely.
I only want to print the .pageBreak classes, hiding the #leftNav and the rest of the #mainBody with CSS.
The CSS:
#media print
{
#leftNav
{
display:none;
}
#mainBody
{
border:none;
margin:none;
padding:none;
}
}
Parent elements can not have float on them.
Setting float:none on all parent elements makes page-break-before:always work correctly.
Other things that can break page-break are:
using page-break inside tables
floating elements
inline-block elements
block elements with borders
For the sake of completion, and for the benefit of others who are having the same problem, I just want to add that I also had to add overflow: visible to the body tag in order for FireFox to obey the page breaks and even to print more than just the first page.
I've found that Twitter Bootstrap classes add a bunch of stuff to the page which has made it difficult to get page-breaks working. Firefox worked right away, but I've had to follow various suggestions to get it to work in Chrome and, finally, IE (11).
I followed the suggestions here and elsewhere. The only property I "discovered" that I haven't seen yet mentioned is "box-sizing". Bootstrap can set this property to "box-sizing: border-box", which broke IE. An IE-friendly setting is "box-sizing: content-box". I was led to this by the caveat about "block elements with borders" made by Richard Parnaby-King https://stackoverflow.com/a/5314590/3397752.
It looks like it's a bit of an arms race to discover the next property that might break page-breaks.
This is the setting that worked for me (Chrome, FF, IE 11). Basically, it tries to override all the problematic settings on all divs on the printed page. Of course, this might also break your formatting, and that would mean that you'll have to find another way to set up the page.
#media print {
div { float: none !important; position: static !important; display: inline;
box-sizing: content-box !important;
}
}
There is a solution if the parent has float . For the element to which you applied the page-break, make the element overflow:hidden. Thats all. It worked for me.
<div style='float:left'>
<p style='overflow:hidden;page-break-before:always;'></p>
</div>
Although this is not prominently documented, it should be noted that the page-break properties cannot be applied to table elements. If you have any elements that have a display: table; or display:table-cell; applied to them (common in many templates under the clearfix class) then contained elements will ignore the page-break rules. Just cancel out the the rule in your print stylesheet and you should be OK (after the floats have also been removed, of course).
Here is an example of how to do this for the popular clearfix problem.
.clearfix:before, .clearfix:after{
display: block!important;
}
The other place I have run into this is when the template declared the entire page (usually called main or main wrapper) with display:inline-block;
If the section is inside of an inline-block, it will not work so keep your eyes open for those as well. Changing or overwriting display:inline-block; with display:block should work.
I had a position: absolute; in the div printing that caused this not to work.
Make sure the parent element has display:block; rather than display: flex;. This helped me fix the issue
"Firefox versions up to and including 3.5 don’t support the avoid, left, or right values."
IE support is also partial
you can achieve what needed by :page-break-before:always; which is supported in all browsers
"but only print the first page" : I don't think it is css related , I suppose it's sth on print window of browser :)
what's your code?
like this?:
<style>
#media print
{
table {page-break-after:always}
}
#media print
{
table {page-break-before:always}
}
</style>