I am having trouble positioning a (div) element at the top right of a span. It works in FF3, but not in IE7:
<html>
<head>
<style>
body
{
font-size: 24px;
}
.tag
{
padding: 3px;
background-color: lightblue;
position: relative;
}
.x
{
position: absolute;
top: 0px;
right: 0px;
width: 10px;
height: 10px;
background-color: orange;
}
</style>
</head>
<body>
text <span class="tag">tag<div class="x"></div></span> text
</body>
</html>
In FF3, a 10x10 orange box is rendered at the top right corner of the light blue box. I am having trouble getting this to work in IE7. Thanks!
First, get a proper doctype for your page so that it's not rendered in quirks mode.
W3C: Recommended list of DTDs
Second, make sure that the code is valid. You can not put a block element (div) inside an inline element (span).
W3C markup validation
you can also see this post if you have trouble with positionning in IE7 in the future
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 am trying to put a <p> tag inline with an <a> tag, but I can't figure out how. I've tried several display types in css, but they either don't work or do something weird to it.
(Here is a bunch of unnecessary words because the thing is saying there is too much code and not enough words. I think its pretty dumb because what I said is enough unless someone specifically asks for details about something).
Here's some example code:
body {
margin: 0;
padding: 0;
background-color: #efefef;
}
header {
margin: 0;
margin-top: -10px;
background-color: #ffffff;
}
header p {
margin: 0;
font-family: "arial";
font-size: 50px;
color: #3c3c3c;
margin-top: 10px;
margin-left: 10px;
text-align: center;
}
header a {
}
#information {
width: 500px;
height: 250px;
background-color: #ffffff;
box-shadow: 7px 7px 4px grey;
margin-left: 100px;
margin-top: 150px;
}
#information p {
font-family: "arial";
font-size: 20px;
color: #1febff;
}
#delete {
margin-top: 2000px;
}
<!DOCTYPE html>
<html>
<head>
<title>SaHa | Color Scheme</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<header>
<p>SaHa</p>
Menu
</header>
<div id="information">
<p>Pretend that there is a bunch of important information here even though there really isn't.
This is normally where a message that actually means something would go, but this is just a
placeholder because I have nothing important to put here right now.
</p>
</div>
<div id="delete"></div>
</body>
</html>
In your HTML, try directly typing or after whatever text you want it to appear.
For example:<div>When i came<a> ut yiur name</a>so what do i do</div>
In your CSS body, try inline-block or just inline parameters with DISPLAY property to get any image or text into the normal flow of a line.
For example:
a {display:inline-block;}
Could you specify which elements in your example code you want inline?
Generally using display: inline and display: inline-block will make elements flow as if they were text. They will sit next to each other and jump to new lines when their container width gets too narrow. Browsers commonly apply display: block to <p> elements by default.
Assuming we are talking about the contents of your <header>, I added the following rule to your existing CSS. Check it out in action.
header p {
display: inline-block;
}
EDIT: Based on further comments, here is a solution to what you are looking for.
First of all I've wrapped your menu items in a nav element and made your main title a h1 element. Search engines like this better. A h1 element is also displayed inline by default and respects text-align properties on its parent container (which in this case is header).
<h1>SaHa</h1>
<nav>
Menu
Thing
Stuff
</nav>
On the CSS side I've made two crucial changes.
First, I've center-aligned your header text. This centers the new h1 element. Additionally I've set position: relative because we will need it in the next step.
header {
text-align: center;
position: relative;
}
Second, to position your menu to the right side of the screen I've lifted it from the regular flow of content with position: absolute. Now, by specifying either a top or bottom and left or right, we can position the menu anywhere in the header. Why the header? Because it is the nearest parent to nav that has a relative position. This is why we set it earlier!
nav {
position: absolute;
right: 10px;
bottom: 10px;
}
Try changing the values for right and bottom in this Codepen example. Try changing right to left and see what happens. What happens if you remove position: relative from .header?
I am experiencing an issue which puzzles me a bit.
My reference for this issue is Chrome 32 on Mac and Safari on iOS 7.0.4.
In the following example, Chrome renders the text in the .background and textarea elements perfect and on top of each other, this is what I want. Safari on iOS though, offsets the text in the textarea with 3 pixel-units. This happens although padding, border and margin are set to the same values on both elements.
When I am debugging in Safari's developer tools, both through my iPhone device and the iOS simulator, the elements themselves align perfectly when outlining the elements metrics.
Markup
<div class="container">
<div class="background">This is a test</div>
<textarea>This is a test</textarea>
</div>
CSS
.container {
border: 1px solid #cdcdcd;
background: #f0f0f0;
width: 400px;
height: 50px;
position: relative;
margin: 24px 0;
}
.background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #f00;
}
textarea {
width: 100%;
height: 100%;
box-sizing: border-box;
background: transparent;
border: 0;
position: relative;
z-index: 2;
}
Demo: http://jsfiddle.net/Y8S5E/2/
Can anyone offer a solution or some theories to research into, for this issue?
Edit
It appears that this is an issue with the textarea's shadow DOM node. Does anyone have some reference to how the padding of this element is defined? Percentage value or hard 3px value? Any way to remove this padding?
Unfortunately I don't think you can't style inside of the Shadow DOM in iOS. Some elements expose pseudo attributes which you can hook on to. For instance, <input type="range"> exposes a -webkit-slider-runnable-track pseudo element.
http://codepen.io/robdodson/pen/FwlGz
You can see this in the dev tools.
But I don't think textarea exposes such a thing.
I'm trying to theme a search form with button and I have problem with text positioning in the button. Chrome and Opera are showing the button properly, but Firefox is not.
HTML:
<button type="submit"><span>Search</span></button>
CSS:
button {
border: 0;
background: red;
padding: 0;
width: 200px;
height: 50px;
position: relative;
}
button span {
position: absolute;
top: 0;
left: 0;
}
In Opera and Chrome the span is at the top left corner. In Firefox the padding at top and left and the top position begins in the middle of the button height.
What am I doing wrong?
Live demo: http://doctype.n-joy.sk/button/
Thanks
That's a strange one. Looks like Firefox is keeping some kind of proprietary padding inside of button element. The workaround I was able to implement was a FF-only piece of CSS with a rather ugly negative margin for the span... A quick fix really, maybe others can follow with something better.
button {
background: red;
border: 0;
padding: 0;
margin: 0;
}
button span {
display: block;
background: blue;
width: 200px;
height: 50px;
}
// FF only:
#-moz-document url-prefix() {
button span {
margin: -1px -3px;
}
}
It looks like you did everything correctly, but there is some dark magic emerging from the default styles of Firefox, and from some undocumented, hidden (pseudo-)elements attached to buttons.
I haven't yet found the rule which would help you with this button issue, but you may try to scan the default styles yourself. If you type in Firefox's address bar: resource://gre-resources/forms.css, then you will see one of its default stylesheets.
Some of suspicious selectors (just wild guesses) are: *|*::-moz-button-content or input > .anonymous-div. The second one does not seem to be defined for button, but who knows where else the magic lies?
In any case, I suppose, you might report it as a bug.
Found this in Twitter Boostrap reset.less file.
It corrects this behavior.
button,
input {
*overflow: visible; // Inner spacing ie IE6/7
line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
}
button::-moz-focus-inner,
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
padding: 0;
border: 0;
}
Note that comments are in less... not CSS so you have to replace // by /* ... */
My question is simple: what happens to inline-block elements inside of absolutely positioned elements? I have a little example to illustrate what I mean. It's hard to explain otherwise. The question is why the .icon inside of the .tag is not positioned like the previous .icon (that is, inline and to the right of the text)
The code below can be viewed # http://jsbin.com/itole4/5
<html>
<head>
<style>
.field { position: relative; border: 2px solid black;}
.tag { position: absolute; left: 100%; top: -2px; background: black; color: white;}
.icon { width:16px;height:16px; display: inline-block; background: gray; text-indent: -999px;}
</style>
</head>
<body>
<a>Some text <span class='icon'>X</span> </a>
<h2>
<span class='field'>Some Text<span class='tag'> tag<span class='icon'>x</span></span></span>
</h2>
<h2>
<span class='field'>Some Text</span>
</h2>
</body>
</html>
Actually, the icon is acting exactly the same. To test, try setting a's style to
display: inline-block; width: 50px;
When you make a tag position: absolute, it causes the tag to no longer have an automatic width of 100% of its parent, but rather to have the minimal width it can take according to heuristics within the browser (browser-dependent). The inline block acts like "inline", like an image, and is thus wrapped to the next line at the first chance (which is right after the word "tag").
So the short answer is: the icon is acting the same, but the block containing it is not.
In order to force the icon on the same line, as on the first line, you can add white-space: pre;. See: http://jsbin.com/itole4/6 (also see comment below)
because the .field has position relative and if you will add the .icon with style : position:absolute;top:0px; inside of the .field the .icon will be added on '0px' on top of the .field not of body
I can't explain it better in English >.<, i hope you can understand
it's not the positioning - it's the element containing the "icon" class..in one you've got a plain inline a the other a nested setup where the parent is an block level h2 this means your "inline-bock" has different line-heights and vertical alignment