I need some help.
I'm new with css, so I don't know why my input "textarea" is not vertical align with others inputs?
It's more 1 or 2px to right...
Here is my jsfiddle:
http://jsfiddle.net/uxpedro/tDxc5/14/
form{
width:255px;
height:266px;
margin: 0 auto;
margin-top:200px;
}
input[type=text]{
font-family:verdana;
width:250px;
height:40px;
padding-left:5px;
background-color:rgba(255,255,255,0.95);
border-style:none;
}
textarea{
font-family:verdana;
margin-top:30px;
max-width:250px;
min-width:250px;
min-height:100px;
max-height:200px;
background-color:rgba(255,255,255,0.95);
border-style:solid;
border-color:rgba(215, 40, 40, 0.9);
}
input[type=submit]{
margin-top:-3px;
width:250px;
height:40px;
color:white;
background-color:rgba(215, 40, 40, 0.9);
border-style:none;
}
Chrome's user-agent stylesheet (a.k.a. the "default CSS style" of your browser) specifies, for textarea, a margin of 2px. Since you only declare the margin-top property, the three remaining margins are still set at 2px, as you can see from the inspector (accessible by right-clicking on the text area and select Inspect element).
To have it aligned with the rest just replace margin-top:30px with margin:30px 0 0 and you're all set.
I found out the problem was the border on your textarea, it was not the submit button that wasn't wide enough, it was the extra width on the textarea.
Remember the box-model when styling your site.
Here's a updated fiddle, I am sorry if I messed too much with it I just wanted to make it simpler for you: http://jsfiddle.net/tDxc5/16/
Try setting the background of the form to red, that way you can see everything now is the width of the form (which I think was what you were trying to do.)
A couple of things:
I removed everything but the form so you could easily read it.
One rule to note is the box-sizing: border-box; - It generally calculates the padding you set on elements for you, so if you have something that's 200px in width and set padding 10px it will become 220px because you set padding on all sides to 10px. With that rule it will know to take 20px off the inital width to make it fit what you actually set it to.
I closed your inputs with /> because jsfiddle told me to, you don't have to do it.
Use placeholder="" instead of value="" - How to style placeholders: http://css-tricks.com/snippets/css/style-placeholder-text/
You should really not use height in these situations, for the textarea purpose as you did, I added a resize: vertical; to make sure it couldn't go out of the form element.
Hope this helps!
Related
I'm using CSS box-shadow to mimic a background that "bleeds" to the edges of the browser window. It works great in Chrome, Firefox, Safari, and Internet Explorer 9 & 10. However, Internet Explorer 11 renders a transparent 1px "space" before the left (negative) box-shadow.
Take this HTML:
<div class="wrapper">
<div class="widget">Test</div>
</div>
And this CSS:
.wrapper {
background:red;
padding:20px 0;
}
.widget {
width:600px;
height:400px;
margin:0 auto;
text-align:center;
background:white;
box-shadow:20em 0 0 0 white, -20em 0 0 0 white;
}
In most browsers, the widget DIV has a white background and white left & right box shadows that fill the width of the browser window with no spaces, breaks or red from the wrapper bleeding through. In IE11 there is a 1px red line that runs vertically along the left side of the widget DIV.
Take a look at this fiddle for an example: http://jsfiddle.net/Bxsdd/. (You may need to manually adjust the width of the fiddle Results pane as slight differences in the width of the window show the issue more apparently - again, only in IE11.)
Things I've tried to remove the transparent space:
Changing the box-shadow from using em's to using px's
Adding or subtracting 1px from the other box-shadow attributes
Adding a border around the widget DIV
Adjusting the padding, display, position and other CSS elements for the widget
So many things I can't even remember right now
Any ideas how to remove the 1px transparent space in IE11?
Now that we know it's a bug, here's one acceptable workaround:
.widget {
width:600px;
height:400px;
margin:0 auto;
text-align:center;
background:white;
box-shadow:20em 0 0 0 white, -20em 0 0 0 white;
position:relative;
z-index:2;
}
.widget:before, .widget:after {
position:absolute;
content: " ";
width:1em;
left:-1em;
top:0;
height:100%;
background:white;
z-index:1;
}
.widget:after {
left:auto;
right:-1em;
}
Basically, I'm adding absolutely positioned :before & :after pseudo elements that contain nothing more than the same background color as the widget DIV and that DIV's box-shadow. These pseudo elements are offset just to the outside-left and outside-right of the widget DIV and positioned behind it so that they provide the correct color for the box-shadow bleed through.
Obviously this adds complication if one is already using the :before & :after elements, but this works for my purposes. I suppose one could also try setting negative margins on the widget DIV.
Checkout the fiddle here: http://jsfiddle.net/TVNZ2/
THE PROBLEM:
This appears to be an graduated alpha transparency/aliasing issue to do with even/odd pixelation calculations.
As best I can tell, colour is spilling into that pixel line but the antialiasing calculation is stripping its alpha value in an attempt to try graduate the distinction of the box-shadow with its surrounds.
That is fine on the outside border of the box shadow, but not so great in the inside border - which is why we are all here!
WHAT (PRETTY MUCH) WORKED FOR ME (PURE CSS):
In my use case, this was fixed by adding several additional box-shadows (of different and lesser values) like so:
div {box-shadow: 10px 0px 0px 0px red,
4px 0px 0px 0px red,
3px 0px 0px 0px red,
1px 0px 0px 0px red;}
Though not elegant, this cumulatively increase the "spill" into the inner pixel line. About three additional box-shadows were required to achieve the desired value - suggesting the antialiasing spill is set at about 25%. Different device densities may change that?
Simply repeating the same box-shadow didn't work - so I am guessing IE treated them as an repetition error and ignored them.
THE "PRETTY MUCH" PART (FOR ME):
In my use case I was adding a purely horizontal box shadow to the right of a text span to create the impression of padding if the line broke and became more than one line. I wasn't adding a shadow to the top or bottom or around a div.
The "pretty much" part for me is that there is a little vertical spill "dot" of about 1px or 2 pixels at the top and bottom of pixel line at certain widths. Essentially, the same problem above in reverse.
Not ideal, but far more preferable than having a whole line transparent.
I hope this will work for you (the reader) in similar other scenarios, but I haven't tested this.
Good luck, and let's all thank good ol' IE for its "challenges"!! ;)
You can fill the space with outline:1px solid color; It worked for me.
.container{
display:block;
position: relative;
width:450px;
height:450px;
margin: 0 auto;
background-color: #654d7f;
}
.header-emphasis{
position: absolute;
bottom:5px;
max-width: 420px
}
span{
position: relative;
left:8px;
background-color: white;
padding:4px 4px 4px 0px;
color: #666666;
box-shadow: 6px 1px 0px 2px #ffffff, -8px 1px 0px 2px #ffffff;
outline: 1px solid white;
}
<div class="container">
<h3 class="header-emphasis">
<span class="highlight">
If there are no dogs in heaven then when i die i want to go where they went.
</span>
</h3>
</div>
I thought I would share my answer to this issue. I cannot be sure that I have had the same exact problem as everyone else, but what I have observed is this: The problem occurs in EI11 (and EI10 according to other which I have not tested) when an element with a set width of pixels is centered using margin: auto; (my case was a left/right issue). I noticed that on resize, the div would shift over to the right 1px on every other pixel width of the screen.
I used a transparent background to observe that instead of just a gap appearing on the left, the div did in fact shift 1px to the right.
Changing the width of the div 1px does work on the current screen width. However, change the screen width will bring back the problem on every other pixel.
To solve the issue, we need to identify the screen width as even or odd. In my case, on even I added a css rule to my culprit div. The new rule changes the left positioning by 0.5px.
Furthermore, the function needs to be executed on the screen resize.
Below is the script I used to fix the issue:
(function (window, document) {
function isEven() {
var windowWidth = window.innerWidth;
// Find out if size is even or odd
if (windowWidth % 2 === 0) {
document.querySelector("#container").classList.add("container_left_1px");
} else {
document.querySelector("#container").classList.remove("container_left_1px");
}
};
document.addEventListener("DOMContentLoaded", isEven);
window.addEventListener(('onorientationchange' in window) ? 'orientationchange':'resize', isEven);
})(this, this.document);
And the css rule
.container_left_1px {left: .5px;}
Executing the script only on EI10 and 11 would be optimum. Please forgive my scripting as this is the first js I have made. Please feel free to correct any issues. This solved my problem; I hope someone finds it helpful!
DaveE gave a nice solution. I played with this myself as well. I had an issue with the top and bottom blur of a box-shadow, instead of left and right. I eventually solved it by just adding a border on top and use important next to it.
.class
{
border-top:1px solid $colorBg !important;
border-bottom:1px solid $colorBg !important;
}
Perhaps not as well tought out as the previous solution, but it worked for me.
Found this solution(Small space between box shadow and div when alpha set) and it works for me: div width must be an odd number.
width: 800px; => not working, but width:799px; => works and white gap disappeared!
In my case, I had a white line between the div bottom and the shadow and I resolved the issue adding a height to the div with decimals:
height:30px; -> height:30.1px;
I have a menu system which uses an image 170px wide by 1px tall (repeated indefinite) It has a 10px border on the left, but a 30px border on the right.
is there a way to center the text, but accounting for the extra 20px on the right side?
Fiddle SiteCode: http://jsfiddle.net/jgallaway81/AXVT5/1/
Relevant Code:
.menubuttonthin {margin-left:0px; margin-top:0px; margin-bottom:0px; width:170px; height:30px; display:block; line-height:30px; font-family:courier; font-size:small; color:#C8C8C8; text-decoration:none; font-weight:900; background-image: url(../_pic-lib/lcars-frame-button-thin.png); }
FCCorp.US Story
As you can see, I don't have the links div'd, because they are encapsulated by a div that created the menu area box. Also, I've tried margining and padding both sides, but all that does is increase the size of teh box, throwing off the background image so it doesn't match up to the background image of the site.
Place your text in a <div> and use the following style for it:
text-align:center;
margin-right:-20px;
For example, if you want to use inline style:
<div style="text-align:center; margin-right:-20px;">
</div>
If I'm understanding you're question, one approach would be to do something along these lines:
CSS;
foo {
width: 130px;
padding: 0 30px 0 10px;
text-align: center;
}
HTML:
<div class="foo">Whatevs</div>
That'll confine the contents of the div to just the non-border area.
Okay, one opinion... I'm a real idiot.
Answer:
It wasn't until madhushankarox mentioned text-indent that the answer came to me. Reduce the size of the link area to eliminate the difference between both sides as far as the text-centering was concerned, but then use padding to increase thesize to ensure the entire button image was displayed.
.menubuttonthin { padding-right:10px; width:160px; }
(only included the changes) width was shrunk from 170px to 160px, which created the centering; the padding increased teh size of the box, showing the last 10px of the background (button) image
Thanks for all the help!
Course, after I posted this, I realized that Ultranaut was right all along. Sorry about that. I checked your answer as the right one. Thanks.
Okay, been struggling with this for a bit now and I have pretty much the appearance I want but am now struggling with positioning the items. Basically I want a stroked text with the stroke on the outside, meaning the webkit text stroke is useless.
So I figured I'll position two text elements on top of each other and do it that way. And that works great, except since I am using position:absolute the element essentially has no height.
The HTML looks like this:
<div class="hcontainer"
<h2>A Framework For Web Artisans</h2>
<span class="h2white">A Framework For Web Artisans</span>
</div>
The CSS like this:
h2{font-size:2em;
margin: 10px 0;
color:#234F70;
-webkit-text-stroke: 10px #531A16;
-webkit-text-fill-color:#FFF;
letter-spacing:-2px;
position:absolute;
top:10px;
left:0px;}
.h2white{font-family:dom_bold,arial black;
font-size:2em;
margin: 10px 0;
color:#FFF;
position:relative;
top:10px; left:0px;
letter-spacing:-2px;
position:absolute;}
.hcontainer{position:relative;clear:both;height:2em;}
So here's the issue. The hcontainer needs to have a set height because the element it contains is positioned absolutely therefore has no height and messes up the flow. The problem is making that height dynamic so I can space the elements properly.
I could make a separate container for each heading but that just seems a bit much. Can anyone think of a better way to do what I'm trying to do here? Or a way around the height issue?
http://jsfiddle.net/calder12/9M7YZ/
I don't really understand what it means that "The problem is making that height dynamic so I can space the elements properly." But if you want to not have to declare a height on .hcontainer, you can use a negative top margin on .h2white to place it on top of the red h2 instead of using absolute positioning. Like so:
http://jsfiddle.net/9M7YZ/10/
.h2white{
font-family:lemon;
font-weight:bold;
font-size:4em;
color:#FFF;
letter-spacing:-2px;
margin-top:-86px;
position:absolute;
}
I have the following class in my CSS style sheet:
.errormsg {
border:solid 1px Red;
padding:5px 20px 5px 20px;
margin:5px;
color:Red;
font-size:medium;
font-weight:bold;
}
When I view it in IE7, the top and bottom border is cut off the when I use this class on a span tag.
What do I need to add to get it to work in IE7?
I've noticed similar issues with this sort of thing when the Line Height is not large enough. Try increasing it slightly.
<pan> elements are going to be treated as inline elements unless you specify otherwise. Add display: block; to your CSS and go from there. The alternative would be to use a <div> to wrap the error message, since <div>s are treated as block elements by default.
Setting display: inline-block; on the <div> will fix the display issues, and the width will still adapt to the text size:
Demo
You could also spruce it up a little with a css3 text-shadow, box-shadow, and gradient with an icon from iconfinder: Demo
I'm using VS2010,C# to develop my ASP.NET web app, I'm using a .js file to display some small tool tips in my program, there is a CSS file also that should be used in my ASPX files so that this tooltip is displayed correctly, but when I use this CSS all my page (including tables) are displayed at left side of page while I've aligned them to be at the center of page, I'm not an expert in CSS files, how can I fix this problem, here is my CSS file:
* {margin:0; padding:0}
body {font:12px/1.5 Tahoma, Arial, Helvetica, sans-serif; background:#FFF}
#text {margin:50px auto; width:500px}
.hotspot {color:#900; padding-bottom:1px; border-bottom:1px dotted #900; cursor:pointer}
#tt {position:absolute; display:block; background:url(images/tt_left.gif) top left no-repeat}
#tttop {display:block; height:5px; margin-left:5px; background:url(images/tt_top.gif) top right no-repeat; overflow:hidden}
#ttcont {display:block; padding:2px 12px 3px 7px; margin-left:5px; background:#666; color:#FFF}
#ttbot {display:block; height:5px; margin-left:5px; background:url(images/tt_bottom.gif) top right no-repeat; overflow:hidden}
#tt is set to position: absolute. This is probably the cause of your problems since you are not telling it what position you want so I suspect it is defaulting to top left.
What CSS are you using to align things to the center? And what is your HTML structure? I am assuming that #tt is ta main container on your page...
To actually find out which part of your CSS is wrong though then the easiest way of doing it is to just remove each line/property from your CSS file and retest until the positioning stops dying.
Also if that CSS is there purely for your tooltip then you probably shouldn't be using a * selector. Something more specific like .Tooltip * would minimise any interference from anyting outside.
And in general if styles are meant to only apply to one given piece of content I would use a class (or id) on that content as a prefix to every selector to guarantee that you cannot possibly change anything outside of that.
Going on your code and comments, all I can see that would be effecting the layout of your page is that you are resetting all the margins and padding on your elements using the style
* { margin: 0; padding: 0 }
Also since you are not properly centring your elements (using a wrapping <div> with a fixed width and margin: 0 auto;, then it seems as though it is just your margins and padding that are now off.