I facing issues with the alignment inside a column. I am not sure what I am going wrong. Different browser shows different result. Chrome and IE reacts similarly. So as Safari and Firefox. I am designing a popup. Inside the popup there are three main DIVs. Header, body and footer. The body has three DIVs as three columns. Everything else is aligned perfectly, except the middle column in the body. The popup width is 810px. The middle column is 32% of it. The issues I am facing.
The first box in the middle column is email address box, for some reason, the width is way lesser in chrome and IE.
Second box is Red Sumbit box - not aligned with email address box of anything else in the column
Third is text - We will never share your email address - BR - Why we ask - Privacy policy. For some reason, when I use BR to separate these two lines, the second line "Why we ask - Privacy Policy" is aligned to the center. I would like to have it aligned left.
the last box - Already member? Login - same here the box is not aligned left properly.
Everything in the columnn is not aligned to left. I am not able to assign anything to margin-left, since it throws off my third column image. I am attaching the HTML and CSS for the middle column. Thanks
input [type=text] {
padding:1px;
border:1px;
-webkit-border-radius: 13px;
width:236px;
font-size:11px;
font-family: Lucida Grande;
font-weight: regular;
margin-left: 2px;
margin-top:10px;
}
input[type=submit] {
background: #9B1C1F;
font-family: Lucida Grande;
color: #ffffff;
font-weight: bold;
font-size:14px;
text-align:left;
width: 241px;
margin-top:10px;
padding:5px 15px;
border:0 none;
cursor:pointer;
-webkit-border-radius: 2px;
}
#already {
float:left;
padding: 5px 5px 5px;
width:236px;
background: #A2CD39;
font-family: Lucida Grande;
font-size:18px;
margin-left:0px;
margin-top:30px;
color: #ffffff;
display: inline-block;
}
#whyweask {
float: left;
font-size:12px;
margin-left:0px;
margin-top:7px;
}
#middlecolumn {
float: left;
width:32%;
margin-top:36px;
}
<div>
<div id="middlecolumn">
<form name="MailingList" method="post" action="Config_FullStoreURLMailingList_subscribe.asp">
<span style="margin-left:1px;">
<input type="text" name="emailaddress" placeholder="Email Address" maxlength="100" size="30px">
<br>
<onclick="javascript:location.href='www.thankyou.html'">
<input type="submit" value="SUBMIT">
</form>
<div id="whyweask">We will never share your email address.</br>
Why we ask - <u>Privacy Policy</u>
</div>
<div>
<span id="already">
Already Member?
<b><u> Login </u></b> </span>
</div>
</div>
</div>
You have a space in your input [type=text], remove it to make it input[type=text].
All of your elements (input[type=text], input[type=submit], #already) have widths defined (width:236px;, width: 241px;, width:236px;) respectively. You need to change these to be the same widths or preferably width: 100%; to fit within your #middlecolumn element container.
Your text, in the #whyweask element, doesn't have a width defined. Go ahead and add width: 100%; to this as well.
Everything should now fit within your #middlecolumn element and be perfectly aligned.
Pro tip: You can always put a border around your container (in this case, it's #middlecolumn) like #middlecolumn { border: 1px solid red; } so that you can visually see how your elements fit inside to debug. I would typically do this inside of my web inspector tool to test quickly without having to save it into my CSS.
Related
Okay, I am trying to achieve for all of my elements to be 10px over from the left side of the screen except for the black box surrounding the other elements. I have set the margin and padding at 0px so that the black box can touch the edges of the screen. However, in doing so all elements inherit this value (to touch the left side of the screen) in which I would have to individually set margin and padding to every new element I create. I have tried setting the body tag to have 10px over from the left which pushes all elements over to the left and leaves 10px of white space on the left. When I have done so, this also makes it so that I cannot push the box back to touch the edge of the screen. In short - is there a way that I can make all of my elements inherit 10px to the left of the screen except for the box surrounding the elements.
body{
display:flex;
display: block;
font-family: sheepman, serif;
font-weight: 400;
font-style: normal;
padding:0px 0px 0px 10px;
margin:0px auto;
}
#boxcolor{
margin-left:-10px;
background-color:black;
}
#header{
margin-left:10px;
padding:20px 0px 20px 0px;
}
h1{
color:rgb(255, 255, 255);
font-size: 50px;
margin:0px;
padding-left:10px;
}
.Phead{
color:white;
padding-left:10px;
}
</style>
</head>
<body>
<!--------------------------Header of the Page----------------------->
<div id="boxcolor">
<div id="header">
<h1>Occulture</h1>
<p class="Phead">Sign up to learn more! <br> <br>
<input type="email" name="email" placeholder="email"/>
<input type="submit" value="Subscribe"/></p>
</div>
</div>
<!--------------------------Header of the Page----------------------->
<p>This is a simple test Paragraph to see if this will inherit the body tag elements </p>
From your question I get the impression that you think there is some 'OO' (object oriented) logic attached to HTML and CSS. This is NOT the case. Admitted, child elements can 'inherit' from their parents, but only when specifically assigning the inherit value to their attributes like .someSelector { background-color: inherit }. That would be the only reference to 'OOP' you can make. Lose the thought, completely.
Mandatory reading w3school: CSS Selector Reference. Get a good understanding of CSS classes, selectors and selector specifity, why they are used, when and how they are used. Html knowledge includes the meaning of parent-child nesting constructions and sibling element constructions.
In your case you would need two distinct sibling containers inside your document parent container: <body>.
a .header parent container (black background) with 10px inner space, containing h1 and p child elements
a .content parent container (white background) with 10px inner space, containing a p child element
To fully align both containers to the document sides, you first need to lose the html default <body> margin of 8px: body { margin: 0 }
Then create two containers inside <body> (header and content) and assign spacing and colors, like below snippet.
Friendly advice, do NOT change an elements' display attribute if you don't know how to use it (concluded from your double display assignment in body {...}). Flexbox layout is great, when you know what it is about. Html default of display: flex is row oriented, you needed column oriented FBL.
body {
display: flex;
flex-direction: column;
font-family: sheepman, serif;
/* font-weight: 400; /* html default */
/* font-style: normal; /* html default */
margin: 0;
}
.header {
background-color: black;
color: white;
/* never again use PX (search online "MDN units")*/
padding: 0.625rem /* rem is px-value/16 => 10px/16 */
}
h1 {
font-size: 3.125rem /* 50px/16 */
}
.content {
/* already has html default colors black on white */
padding: 0.625rem /* 10px/16 */
}
<div class="header">
<h1>Occulture</h1>
<p class="Phead">Sign up to learn more! <br> <br>
<input type="email" name="email" placeholder="email" />
<input type="submit" value="Subscribe" /></p>
</div>
<div class="content">
<p>This is a simple test Paragraph to see if this will inherit the body tag elements </p>
</div>
Ok so I found out that the text inside an <input> tag still gets cut off even though the <input> tag already has a padding. You'll notice it more when you set your font style to anything cursive.
Take a look at this image:
The first text box in the screenshot is an input of type=text and the second text box is just a div. The input text box cuts off the tail of character 'j', while the div text box does not.
HTML:
<input type="text" value="juvenescent" />
<div>juvenescent</div>
CSS:
input, div {
font-family: cursive;
font-size: 2em;
padding: 15px 20px;
margin-bottom: 10px;
width: 300px;
border: 1px solid black;
}
div {
background-color: white;
}
Here is a link to the jsfiddle:
https://jsfiddle.net/9eLzqszx
What would be the workaround here? Obviously, I want the padding of the input text box to NOT cut the text inside it.
It looks like the curve of the J goes past the left-hand side of what the browser considers to be the edge of the letter. Instead of using padding for both sides, use padding for top/right/bottom and instead use text-indent for the left, it should do the trick!
input {
font-family: cursive;
font-size: 2em;
padding: 15px 20px 15px 0;
font-style:italic;
margin-bottom: 10px;
width: 300px;
border: 1px solid black;
text-indent: 20px;
}
https://jsfiddle.net/will0220/pxrs321f/3/
An input element is a special element as it needs to cut and allow the user to navigate through its text. Its active text zone isn't increased by the padding, and that's why you're seeing this behavior. Firefox seems to be more clever than the bunch, as it doesn't vertically cut the text if the text's width is smaller than the input's active text zone.
A workaround would be to add text-indent and decrease padding-left:
text-indent: 5px;
padding-left: 15px; /* Originally 20px */
You can see it in a fiddle over here.
You could try increasing your line height property. That would be restricting the viewable area for the letters causing them to be cut off. However, that's probably a crappy hack if you want it to match the same size as your div.
Add height: auto; to your input type=text to keep flexibility, and change the padding to get the original effect, like this padding: 14px 20px;
I have a search box on-top of the page I am making, I have been trying to make the page cross-browser friendly as well as have a flexible page resolution.
I have come across this problem
http://imgur.com/gS3q02W
The button and the input box don't line up horizontally. No matter what I change it to one is always different than the other on the other browser.
Does anyone know of a cross-browser friendly solution?
html
<div id='search'>
<form>
<input class='search' type="text" placeholder="what would you like to find?" required>
<input class='button' type="button" value="search">
</form>
</div>
css
#search {
padding-left:200px;
margin-right:5px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}
.search {
margin-top:5px;
padding:4px 15px;
width:250px;
background:#FFF;
border:none;
color:#232d38;
}
.button {
position:relative;
padding:4px 15px;
left:-4px;
border:none;
background-color:#FFF;
color:#232d38;
}
.button:hover {
border:none;
background-color:#FFF;
color:#000;
}
I have found the solution.
The problem is down to the browser’s default styles. Mozilla, in their infinite wisdom, have chosen to put this line in their CSS:
button, input[type="reset"], input[type="button"], input[type="submit"] {
line-height:normal !important;
}
In Firefox, buttons get an extra 2px padding. In all other browsers they don't. So it is impossible to make them match using just padding.
You have to set top and bottom padding to 0px, and use height: 25px; vertical-align: middle; to make up for the loss of padding.
I was having this same issue, and used John's answer above to come up with a solution without having to use the height and vertical-align properties.
In my reset styling I basically made it so that all inputs had normal line height so that Chrome would render the same as Firefox and IE. The important addition between this and John's code above as targeting the general input selector:
button, input[type="reset"], input[type="button"], input[type="submit"], input
{
line-height:normal !important;
}
I'm currently working with a textbox that has a background. I was wondering if it's possible to center text (vertically) inside the textbox.
important: it's perfectly centered in firefox. Only IE it writes it too high for some reason. I've tried line-height, padding, and margin. Nothing works. Any ideas?
EDIT: This is my current CSS. I should say that I've tried the margin-top method and it didn't work for me. Also, as I mentioned, this is only for IE. I have IE specific style sheets so no worries.
.textValue { color: black; font-size: 12px; font-family: David, sans-serif; }
input { width: 110px; padding: 0 2px; padding-right: 4px; height: 20px; border: solid 1px white; margin-bottom: 0px; background: url(../images/contactTextBg.png) no-repeat top right; }
label { float: right; margin-left: 5px; font-size: 13px; }
For IE, I have the following:
.textValue { font-size: 14px; }
as for HTML:
<tr>
<td><label for="name">name</label></td>
<td><input type="text" name="name" id="name" class="textValue" value="" /></td>
</tr>
Thanks,
Amit
I wonder how you are able to align the text in a textbox but since you say, here is the suggestion:
For idiot IE, you can use this IE specific hack:
margin-top:50px; /* for standard-compliant browsers */
*margin-top:50px; /* for idiot IE */
_margin-top:50px; /* for idiot IE */
You might want to try other similar properties if you want rather than margin-top.
Did you try?:
input {vertical-align: middle;}
I know this one's a bit old, but I've just run into the same problem. The solution given here didn't help me which seemed strange. In my case it was the line height that was set to "1em". Changing the line height to something that resembled the height of the text box, rather than the size of the font it contained was the solution. This also continues to function as expected in Firefox, etc.
I have a website design that includes text input fields that look like this:
Input Field http://img401.imageshack.us/img401/4453/picture1ts2.png
I'm wondering what the best solution for creating this input field is.
One idea I have is to always have a div around the input with a background image and all the borders disabled on the input field and specified width in pixels, such as:
<div class="borderedInput"><input type="text" /></div>
I have tried to discourage them from using this format, but they won't be discouraged, so it looks like I'm going to have to do it.
Is this best or is there another way?
--
Trial:
I tried the following:
<style type="text/css">
input.custom {
background-color: #fff;
background:url(/images/input-bkg-w173.gif) no-repeat;
width:173px;
height:28px;
padding:8px 5px 4px 5px;
border:none;
font-size:10px;
}
</style>
<input type="text" class="custom" size="12" />
but in IE (6 & 7) it does the following when you type more than the width:
Over Length http://img240.imageshack.us/img240/1417/picture2kp8.png
I'd do it this way:
<style type="text/css">
div.custom {
background:url(/images/input-bkg-w173.gif) no-repeat;
padding:8px 5px 4px 5px;
}
div.custom input {
background-color: #fff;
border:none;
font-size:10px;
}
</style>
<div class="custom"><input type="text" class="custom" size="12" /></div>
You just have to adjust the padding values so everything fits correctly.
It is - in my eyes- definitely the best solution since in any other case you're working with a whole input field. And the whole input field is - by definition - a box where users can enter text.
If you can rely on JavaScript you could wrap such div-Elements around your input fields programatically.
Edit:
With jQuery you could do it this way:
$( 'input.custom' ).wrap( '<div class="custom"></div>' );
CSS:
div.custom {
background:url(/images/input-bkg-w173.gif) no-repeat;
padding:8px 5px 4px 5px;
}
input.custom {
background-color: #fff;
border:none;
font-size:10px;
}
And your HTML:
<input class="custom" ... />
You don't need the div element, you can assign a background to the input directly.
Edit: Here is the working code. I tested it, but you'll have to adjust it for your needs. As far as I can tell, everything here is needed.
input {
background: #FFF url(test.png) no-repeat bottom right;
width: 120px;
height: 20px;
line-height:20px;
padding:0;
text-indent:3px;
margin:0;
border: none;
overflow:hidden;
}
Edit2: I'm not quite sure why I'm getting downvoted, but this method should work unless you need an image bigger than the input element itself. In that case, you should use the extra div element. However, if the image is the same size as the input, there is no need for the extra markup.
Edit3: Ok, after bobince pointed out a problem, I'm getting a little closer. This will be work in IE6&7 and it's close in FF, but I'm still working on that part.
input {
background: #FFF url(test.png) no-repeat 0px 0px;
background-attachment:fixed;
width: 120px;
height: 20px;
line-height:20px;
padding:0px;
text-indent:3px;
margin:0;
border: none;
}
body>input {
background-position:13px 16px;
}
Edit4: Ok, I think I got it this time, but it requires use of a CSS3 selector, so it won't validate as CSS 2.1.
input {
background: #FFF url(test.png) no-repeat 0px 0px;
background-attachment:fixed;
width: 120px;
height: 20px;
line-height:20px;
padding:0px;
text-indent:3px;
margin:0;
border: none;
}
body>input {
background-position:13px 16px;
}
body>input:enabled {
background-position:9px 10px;
}
body>input will target everything except for IE6, body>input:enabled will target any form elements that aren't disabled for all browsers except for IE 6, 7, & 8. However, because :enabled is a CSS3 selector, it doesn't validate as CSS2.1. I wasn't able to find an appropriate CSS2 selector that would allow me to separate IE7 from the other browsers. If not validating (yet, until the validator switches to CSS3) is a problem for you, then I think your only option is the extra div element.
Have you evaluated using background image like this:
<style type="text/css">
input{
background-color: #AAAAAA;
background-image: url('http://mysite.com/input.gif');
border: 0px;
font-family: verdana;
font-size: 10px;
color: #0000FF;
}
I have done this a few times. I have the background image inside a div and use css to position the input field accordingly.
Have a peek at the following site I created that used this technique and use the code: http://www.ukoffer.com/ (Right hand side Newsletter)
AFAIK, the background scrolling problem can be solved either in Firefox and friends, OR Internet Exploder; but not make everyone happy at once.
I would normally have said to style the input directly, but now that I think of it that div example doesn't sound too bad and should take care of your background image scrolling problem.
In that case you'd set a div as position:relative, and put the input inside it with proper padding and width (or 100% width if padding is 0), background transparent, and put an image on the div.
okoman has gotten the CSS aspect correct. May I suggest using a <label> to improve the semantic structure of the markup?
<label id="for-field-name" for="field-name">
<span class="label-title">Field Name <em class="required">*</em></span>
<input id="field-name" name="field-name" type="text" class="text-input" />
</label>
<style type="text/css">
label, span.label-title { display: block; }
</style>
Not only is this more accessible, but it provides numerous hooks that you can use for any type of DOM manipulation, validation or field-specific styling in the future.
Edit: If you don't want the label title displayed for some reason, you can give it a class of 'accessibility' and set the class to display: none; in the CSS. This will allow screen readers to understand the input but hide it from regular users.
The easiest way to get rid of the overflow without JavaScript is simple:
Create a 3 spans, and set their heights to the height of the
image.
Cut the image into 3 parts, ensuring you cut the image such that
the left and right round parts will be on the 1st and 3rd images
respectively.
Set the background of the 1st span to the image
with the left border, and set it to no-repeat.
Set the background
of the third span to the image with the right border and set it to
no-repeat.
Put the input inside the middle span, remembering to
set its height to the height of the spans, and its background to the
2nd image, and repeat-x only.
That will ensure that the input
will seem to expand horizontally once the input is being filled. No
overlapping, and no JS needed.
HTML
Assuming the image height is 60px, the width of the first and third span is 30px,
<span id="first">nbsp;</span><br />
<span id="second"><input type="text" /></span><br />
<span id="third">nbsp;</span>
CSS
span#first{background:url('firstimage') no-repeat; height:60px; width:30px;}
span#third{background:url('thirdimage') no-repeat; height:60px; width:30px;}
span#second input{background:url('second image') repeat-x; height:60px;}
That should resolve your issue.