The code below works fine in Chrome and FireFox but the glyph (a chevron) does appear for internet explorer.
Removing display:table-cell makes it appear.
I would like to keep the table-cell display in there.
Does anyone know why?
EDIT:
This only breaks on internet explorer 11 (and below) on windows 8 / 7 so maybe it is a bug?
It works on MS Edge and also IE11 on a windows 10 machine.
I've also changed the example below to show why I need table-cell. The link needs to be indented next to the chevron like so:
a {
display: table;
width: 150px;
text-decoration: none;
}
a::before {
padding-right: 20px;
display: table-cell;
vertical-align: middle;
font-family: "FontAwesome";
content: '\f054';
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div>
i am a test link which goes over multiple lines
</div>
Alternative idea.
As its part of the table display would it be possible to have the icon behave like a table caption instead of a cell?
The icon displays on IE using the following:
div:before {
font-family: "FontAwesome";
content: '\f054';
display: table-caption;
}
first of all wich version of IE are you talking about?
try adding this meta-tag to your head:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
and if you're using IE8 add this script tag to your head:
<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
As Tom Hood and RoToRa have kindly pointed there is a bug where pseudo element ignore the css font directives (e.g. font-family) when using table-cell.
To help anyone who this trips up I have posted my work round.
Keep the :before pseudo as display table-cell so it does the nice vertical indent and keeps the height of the real element.
Don't display anything (content: '') in the pseudo element for the child (the ).
Give it enough padding to give room to display something.
Put a pseudo element on the parent (the ).
Display the glyph using absolute positioning.
Phew!
Of course if you can get away with it and want to target latest browsers - flex box would much preferable.
div {
position: relative;
}
div::before {
font-family: "FontAwesome";
content: '\f054';
position: absolute;
top: 5px;
}
a {
display: table;
width: 150px;
text-decoration: none;
}
a::before {
padding-right: 30px;
display: table-cell;
height: 100%;
vertical-align: middle;
content: '';
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div>
i am a test link which goes over multiple lines
</div>
Related
I'm having trouble centering the text inside a HTML month-input field. Here's a simplified version of my HTML/CSS to demonstrate the issue:
If you run it, you'll see that it is not centered - and if you try "text-align: right", it doesn't move all the way right either. It does move with both alternatives, which is strange.
Any idea why this happens?
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
font-family: Helvetica;
font-size: 14px;
position: relative;
text-align: center;
}
.monthSelector{
display: inline-block;
text-align: center;
width: 250px;
}
</style>
</head>
<body>
<input disabled type="month" class="monthSelector" min="2017-01" max="2099-12" value="2018-01">
</body>
</html>
This is how it looks to me: As you can see the text is not centered inside the input box.
This doesn't work as expected because of the way input type="month" is rendered.
If you remove the disabled attribute you will see that (depending on the browser) you have some arrows and carets on the right. Taking them into account your text is in dead center.
You need to add this CSS
input[type=month]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-inner-spin-button {
display: none;
-webkit-appearance: none;
}
et voila
EDIT:
You can use :disabled CSS selector so it doesn't affect your other inputs
input[type=date]:disabled::-webkit-calendar-picker-indicator,
input[type=date]:disabled::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}
It is caused by default input controls being present (but invisible due to the input being disabled) when you give it month type. The inputs text is centered relatively to the inputs width minus the width of the controls. One way around it is giving them a manually selected margin to visually center the text.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
font-family: Helvetica;
font-size: 14px;
position: relative;
text-align: center;
}
.monthSelector{
display: inline-block;
text-align: center;
width: 250px;
box-sizing:border-box;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: -15px; /* <-- Apparently some margin are still there even though it's hidden */
}
</style>
</head>
<body>
<input disabled type="month" class="monthSelector" min="2017-01" max="2099-12" value="2018-01">
</body>
</html>
#Daut has given a good explanation about the rendering of hidden elements in the month input.
You could go with the solution but it adds another challenge. Now, you are forced to make sure that the CSS has enough properties to render correctly in all browsers. Then you usually go for polyfills or you could just mark the input type as text.
I used to create space between DIVs, using this css code:
.area:before {
content: "";
display: block;
height: 110px;
}
This works on all browsers works except on Safari on Mac.
I tried to change the values of the display or overflow but it does not work.
Can anyone advise me?
you could simply use margin-top on the main element itself:
.area {
margin-top: 110px;
}
I am trying to float an li's :after, which includes a background element.
It works in every browser on Mac, and every browser on Win, EXCEPT IE.
I tried changing around parameters like the display and floating, which does not work.
CSS:
ul.nav li a:after {
background: url(images/nav_icon.png) no-repeat;
width: 8px;
height: 5px;
font-weight: 400;
content: "";
display: block;
float: right;
margin: 8px 0 0 6px;
}
Heres what it looks like right:
Heres what IE does:
I am thankful for any help. Only thing i found googling was clearfix tricks for IE7, nothing regarding how that stupid browser interpretes selectors.
Solved using conditional comments which contain display: inline-block and removing the floating for the :after.
I am designing a website using the MVC-3 framework. While IE compatibility mode is not being used, it appears correctly and looks like this:
The code for this I am using is this:
<div id="header">
<div id="title"> /* NUMBER 1 */
<img src="#Url.Content("~/Content/A_picture.png")" />
</div>
<div id="menucontainer"> /* NUMBER 2 */
<ul id="menu">
/* some menu items*/
</ul>
</div>
</div>
<div id="main"> /* NUMBER 3 */
#RenderBody()
</div>
One day, I had the need to force my code to believe it was running IE7 for other formatting consistency issues.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
But now, forcing this breaks my initial website layout. While using the forcing of IE7, it looks like this:
Thank you for staying with me through the explanation. Now my question - how can I manipulate my div sections that are now broken to appear as they did in my first picture, while still forcing the emulation of IE7?
Any thoughts, ideas, and suggestions are much appreciated.
Edit: CSS
Some pieces of CSS I believe could be helpful to solve this problem are as follows. Sorry, I obviously should have included this initially.
header,
footer,
nav,
section {
display: block;
}
header, #header {
position: relative;
margin-bottom: 0px;
padding: 0;
}
nav,
#menucontainer {
margin-top: 40px;
}
div#title {
display: block;
float: left;
text-align: left;
}
maybe you need to use vertical-align, for ie you sholud set smth like this:
#id_top_elements {
display: table-cell;
vertical-align: bottom;
}
but if you can show your css it may be heplfull ;)
or try smth like this:
<!--[if lt IE 8]>
<style>
#id_top_elements {
position: relative;
top: -50%
}
</style>
<![endif]–>
but now you need to add some wrapper for top elements, and it must have position: absolute;
instead of using the floats you could also use
display: inline-block; /*which works for most browsers including newer versions of ie, the following two lines are the fix for older versions of ie.*/
*display: inline;
zoom: 1;
Do this on any object/element that needs to 'sit' next to another object/element
Amazingly enough, the solution is simply to add one line to the #menucontainer css like this:
nav,
#menucontainer {
margin-top: 40px;
display: inline;
}
The line added is "display: inline", and I added it to the number 2 div in my diagram.
Thank you for everyone who weighed in on this topic!
I'm trying to create an effect where h# elements are bracketed by bullet characters. If the the heading breaks across multiple lines, the bullets should be to the left and right of the text block, and vertically centred.
Take this example HTML5 and CSS3:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<div class="content-container">
<h1>Short title</h1>
<h1>Really long title that will hopefully span multiple lines to demonstrate the problem I'm trying to solve here</h1>
</div>
</body>
</html>
h1 {
font-weight: bold;
text-align: center;
}
h1:before {
content: '— ';
}
h1:after {
content: ' —';
}
This renders the bullets, but when there are line breaks the bullets end up wrapping with the text itself.
How can I change the CSS so that the bullets are placed to the left or right of the whole text block, and vertically centered against it? This jsFiddle depicts the effect better than I can describe it. Note that there are containers that exist above the header element (they just aren't exclusive containers for it) which could also be used.
I don't want to change the HTML because that's just too fragile a solution: it requires changes in the CMS templates, the content itself, and an edict to all future content authors — which will be superfluous if the theming ever changes again.
I can't see a way of doing this with text bullet points, but it can be done with background images. CSS3 supports multiple background images and multiple image positions, so we can position an image bullet point at either end of the h1 like so:
Replace your CSS with this:
body {text-align:center}
h1 {
font-weight: bold;
padding: 0 16px;
background-image: url(http://www.getyourgame.net/images/BulletPointGreen.png),url(http://www.getyourgame.net/images/BulletPointGreen.png);
background-position: left center, right center;
background-repeat: no-repeat;
display: inline-block;
}
The padding is required to make room for the bullet points. I have used some random bullet point image, but note that I have specified it twice. I can then specify different positions for these two images; one left and one right of the h1. Finally display:inline-block prevents the h1 filling the entire width, which would cause the bullet points to constantly sit at the edges of the parent element instead of at the edges of the heading text.
Hope this works for you.
I managed to get quite close with creative use of table display styling:
h1 {
font-weight: bold;
text-align: center;
display: table;
vertical-align: middle;
margin-left: auto;
margin-right: auto;
}
h1:before {
vertical-align: middle;
content: '—';
display: table-cell;
padding-right: '1em';
}
h1:after {
vertical-align: middle;
content: '—';
display: table-cell;
padding-left: '1em';
}
Why just "quite close"? Well, firstly I haven't verified that this is standard-mandated behaviour and not just some quirk of rendering. Secondly, it works in Chrome 18 and Firefox 12, but I haven't bothered to check in Internet Explorer or Safari — and I know it doesn't work quite right in the Android browser engine.