I have a problem with a span element in IE (currently tested against IE9 and IE10). When I open F12 Developer Tools and select that span element I can't find it on screen. However, if I manually assign a background-color other than transparent or inherit it is shown at its expected place.
The problem is, that the span element is used as alignment element for a popup, but since the element is missing, the popup is incorrectly aligned.
I wasn't able to observe that behavior in jsfiddle, yet. And also can't test it in other browsers.
Here is how the significant markup looks like:
<div id="div1">
<div id="div2">
<span>
<input id="in" value="Somename"></input>
<label for="in">Person surname:</label>
</span>
</div>
</div>
And the corresponding CSS like shown in the developer tools (except for the background-color attributes):
#div1 {
background-color: grey;
cursor: auto;
font-family: Thoma, Verdana, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
text-align: left;
color: #000000;
bottom: 0px;
height: auto;
left: 0px;
position: absolute;
right: 0px;
top: 0px;
width: auto;
}
#div2 {
background-color: blue;
cursor: auto;
font-family: Thoma, Verdana, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
text-align: left;
color: #000000;
}
span {
/* background-color: red; */
font-family: Thoma, Verdana, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
text-align: left;
color: #000000;
margin-left: 0px;
margin-right: 0px;
box-sizing: border-box;
width: 100%;
}
input {
/*background-color: transparent;*/
color: #000000;
padding: 1px 2px 1px 3px;
font-family: Thoma, Verdana, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
margin: 1px;
border: 1px solid #b9b9b4;
overflow-x: hidden;
overflow-y: auto;
width: 90%;
}
label {
cursor: auto;
font-family: Thoma, Verdana, Helvetica, sans-serif;
font-weight: normal;
text-align: left;
color: #000000;
left: 0px;
top: -99999px;
font-size: 0px;
position: absolute;
}
Any ideas, why the span tag could be missing?
Maybe I should clarify, I'am not so much interested in a solution (since I already found one), but in an explanation why I observe this different behavior. Both for IE vs Jsfiddle and with vs without background-color.
I am not responsible for the HTML markup, and can't change that. I have only limited access to change the CSS.
Either use display:block or float:left
Tested on IE9-10
Also note that: use div instead, span tag is not designed to use like this and not a problem to create another #div3 unless you have something specific.
span {
background-color: red;
display:block; /* float:left; */
font-family: Thoma, Verdana, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
text-align: left;
color: #000000;
margin-left: 0px;
margin-right: 0px;
box-sizing: border-box;
width: 100%;
}
Add "display: block;" to the span element css.
The span element default display property is inline and with this you can't set width, height, margin or padding properties. So the span element is not missing but have a 0px width and the height of the line-height of font property.
Regards!
Definition and Usage
The <span> tag is used to group inline-elements in a document.
The <span> tag provides no visual change by itself.
The <span> tag provides a way to add a hook to a part of a text or a part of a document.
more about span
Related
What I'm willing to achieve is some kind of dividers that are used on http://mintteal.com/ under the captions. There is an icon inside, but I've yet failed to create such horizontal line on both sides.
You could have a peek at their HTML/CSS to learn how they did it. Here is what they have:
<div class="title">
<h1>What We Do</h1>
<i class="fi-wrench"></i>
</div>
<style>
div.title {
text-transform: uppercase;
text-align: center;
letter-spacing: 0.01em;
font-weight: 700;
position: relative;
margin-bottom: 60px;
padding-bottom: 30px;
}
.title h1 {
font-size: 48px;
margin: 0;
}
.fi-wrench::before {
content: "\f215";
font-family: "foundation-icons";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
display: inline-block;
text-decoration: inherit;
}
div.title i {
position: absolute;
bottom: -20px;
left: 50%;
margin-left: -20px;
border: 3px solid #41c39f;
width: 40px;
height: 40px;
line-height: 37px;
background: #f4f4f5;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
text-align: center;
}
</style>
Perhaps this is what you wanted Demo.
The divider is made by the :before tag. And the content inside makes up the image.
Text within a button is breaking up in two lines in Safari - but not in Chrome and Firefox, see the screenshots. Using the CSS property break-word: keep-all; doesn't seem to work.
Any suggestions how to solve this?
not good:
good:
CSS code:
.button {
font-size: 1.5em;
padding: 0em 0.6em 0.1em 0.6em;
margin-left: 0%;
margin-right: 0%;
margin-bottom: 24px;
width: auto;
text-decoration:none;
display: inline-block;
border: none;
border-radius: 1em;
background-color: #4ca8da;
background-repeat: no-repeat;
font-family: 'Populaire';
font-weight: normal;
font-style: normal;
color: white;
text-align: left; }
white-space: nowrap; should fix it.
Further information.
I am trying to code this block of text with image in it but for some reason it's not working for me as. What would be the best approach to get this right with CSS?
Thank you all!
UPDATE
This is what I got the problem is with that the underline heading
http://jsfiddle.net/C2kqR/
.block h3{
margin-bottom: 0.6em;
margin-top: 0;
color: #c80006;
font-weight: 400;
font-style: normal;
font-size: 22px;
line-height: 1.2em;
font-family: 'Signika', sans-serif;
text-rendering: optimizeLegibility;
}
.heading {
margin-bottom: 20px;
color: #c80006
}
.aleft {
float:left;
margin:0 2em 0 0 !important;
}
.hr-line-full {
width: 100%;
margin: 22px 0 35px;
display: block;
border-top: 1px solid #dedede
}
Have a look at this fiddle
CSS:
img{
float:left;
margin:0 10px 10px 0;
}
As long as the text and image are within a parent container, simply float the image left to have the text wrap around it. To Space it apart from the text, give it a margin and voila!
I have a solution for you where you can remove the hr element you are trying to imitate and instead use border for the h3.
Changed CSS for .heading:
.heading {
margin-bottom: 34px;
padding-bottom: 24px;
color: #c80006;
border-bottom: 1px solid #dedede;
overflow: hidden;
}
Fiddle here
I was toying with some made code on codepen, trying to get used to html/css since I am not really comfortable on the positioning. This must be pretty silly but I can't make it work.
HTML:
<div id="hh">
<h1>Wacom Hover Effect</h1>
</div>
<div id="cl">
Read More
Learn More
Read Article
Download
</div>
CSS:
*, :before, :after{ #include box-sizing('border-box'); }
body{ padding: 1em; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #eee; }
#hh{
position:absolute;
left:50%
}
h1{
position:relative;
left:-50%;
font: 300 3em/1em 'Open Sans', sans-serif;
border: solid 0.00019em #000;
margin-bottom: 0.2em;
padding: 0.4em 0.2em 0.4em 0.2em;
background-color:lightblue;
border-radius:0.2em;
}
#cl{
clear:both;
}
.button,
[class*="button-"]{
position: relative;
display: inline-block;
overflow: hidden;
float:left;
margin: 0 1em 1em 0;
padding: 0 4em;
height: 3.5em;
font: 300 1em/3.5em 'Open Sans', sans-serif;
text:{
decoration: none;
shadow: 0 1px 3px rgba(black, .35);
}
letter-spacing: .08em;
color: #fff;
background: #0090C0;
border: solid 1px #fff;
border-radius: 2px;
#include transition(.35s ease all);
}
}
There is some irrelevant code after that about hovering etc.
The result is this: http://codepen.io/roygbiv/full/FjLcA
So I wanted h1 at center and I found here the method of putting #hh absolute, left:50% and then h1 relative left:-50%. And it screwed up the positioning.
What I want is h1 on center top, then the 4 "a"s under it (not center, just not overlapping).
Putting position: absolute on an element makes all other elements ignore it. This can be solved by putting display: inline-block on the h1 and text-align: center on #hh:
Check new pen: http://codepen.io/anon/pen/kovaC
#hh {
text-align: center;
}
h1{
font: 300 3em/1em 'Open Sans', sans-serif;
border: solid 0.00019em #000;
margin-bottom: 0.2em;
padding: 0.4em 0.2em 0.4em 0.2em;
background-color:lightblue;
border-radius:0.2em;
display: inline-block;
}
inline-block makes the element's box adapt to the width of its text. I presume the desired look of the header is for the blue box to not be 100% width, which is otherwise the case with h1 and other block elements.
i have done the following modification in css and it is working as expected:
#hh{
text-align: center;
margin-left:auto;
margin-right:auto;
width:40%;
}
h1{
font: 300 3em/1em 'Open Sans', sans-serif;
border: solid 0.00019em #000;
margin-bottom: 0.2em;
padding: 0.4em 0.2em 0.4em 0.2em;
background-color:lightblue;
border-radius:0.2em;
}
I'm trying to replace the links on my app with a button background. However the link text won't center horizontally neither vertically. I'm using the property "background-position: center center;" which I assume would solve my problem.
My HTML:
<a class="violetButtonLarge" href="#">My Link</a>
CSS:
.violetButtonLarge {
display: block;
width: 304px;
height: 41px;
background: url(../images/violetButton_large.png) no-repeat center center;
border:none;
color: #FFFFFF;
font-weight: bold;
font-family: Arial;
background-color: transparent;
text-decoration: none;
}
My image:
What I'm I doing wrong here? This is what I get:
Thanks in advance!
Use text-align:center and line-height:41px to align the text in the vertical and horizontal center.
.violetButtonLarge {
display: block;
width: 304px;
height: 41px;
background: url(http://i.stack.imgur.com/S8zvb.png) no-repeat center center;
border:none;
color: #FFFFFF;
font-weight: bold;
font-family: Arial;
background-color: transparent;
text-decoration: none;
text-align:center;
line-height:41px;
}
Example: http://tinkerbin.com/q5VZR1At
a.button {
background: transparent url('violetButton_large.png') no-repeat scroll top right;
color: #FFFFFF;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 18px;
text-decoration: none;
}
<a class="button" href="#" onclick="this.blur();"> … </a>
Probably you should set the padding, then you don't need to set the width and height. The vertical-align: baseline helps to set them on the same line with "real" input buttons.
.button {
padding: .4em 1.6em .44em 1.6em;
vertical-align: baseline;
text-align: center;
text-decoration: none;
cursor: pointer;
}
Edit: Sorry i didn't saw the image in your code, maybe you should get a glimpse at this great example: CSS Gradient Buttons.