I am running into this issue where the theme I'm trying to integrate has a CSS wildcard selector that is applied to the entire site. The problem is it breaks my previous form elements.
Please see this image for reference of the problem:
Bad:
http://i.imgur.com/mKKrbpD.png
This is what I would like it to look like:
Good:
http://i.imgur.com/sj4sBtN.png
To achieve the good look, I change the 'box-sizing' to content-box. The problem is the wildcard is continuously being applied to the entire page so it supersedes it, I believe.
Question #1: Can someone please show me how to apply this content-box to ONLY those two boxes on only one page?
Question #2: Kind of on point 1 - but this must only apply to those two boxes as the header and the entire rest of the site rely on that box-sizing: border-box
HERE IS A LIVE EXAMPLE:
failed
Problematic section, I think...
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Please take a gander at the live example and let me know exactly what to change to fix this issue. You can see all the things I've tried in there and none have worked yet. You will have my eternal gratitude and my blade in battle if you can help solve this.
Have a look the class .CollapsiblePanelTab Where Background img width is 660px and you've define the width:647px. Make sure the width is eqaul to background image width.
Here is the CSS code
.CollapsiblePanelTab {
font: normal 21px Arial;
text-transform:uppercase;
background-color: #fff;
border-bottom: solid 0px #CCC;
height: 40px;
margin: 10px 0 0;
padding-left: 10px;
padding-top: 13px;
width: 660px; /*change it from 647 to 660px*/
-moz-user-select: none;
-khtml-user-select: none;
background-image: url("http://i.imgur.com/6wGRmmk.png");
background-repeat: no-repeat;
color: #000000;
}
Side Note: you are using -khtml-user-select: none; thats were used for very older version. To target the latest version of chrome and safari you must use -webkit prefix.
Read More at MDN.
<style type="text/css">
.pnl_1
{
width :60%;
height :50px;
border : 1px solid blue;
border-radius :5px;
}
</style>
<form id="form1" runat="server">
<asp:Panel ID="pnl_id" runat="server" CssClass ="pnl_1" >
</asp:Panel>
</form>
Related
My div tag seems to be having a margin towards the top between the div and the body tag
body {
margin: 0px;
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
background-color: green;
border: 2px solid black;
}
div.container {
max-width: 920px;
height: 100%;
margin: 0px auto;
padding-left: 20px;
padding-right: 20px;
background-color: #e1e1e1;
display: block;
//border: 2px dotted black;
}
Here are my two css for body and div, if I include the border code in the div tag then the color is blue all the way till the top otherwise there is margin of green inbetween the div and the body tag.
How do I remove this margin without using a border ?
Browsers may have built-in styles which can make some difference in some cases. These built-in styles may include paddings, margins, other kinds of spacings, styles for tables, etc.
Here is a project which when included, normalizes every style which may be applied by the browser. https://necolas.github.io/normalize.css/
As far as I know, every CSS framework use this technique too.
If that doesn't solve your issue, try to use Chrome Dev Tools or other debugging tool to check the actual DOM. The tool can provide you information about actual paddings, margins, and dimensions. For Chrome, right click your page and choose inspect element or something similar. You'll have a similar option in most of the modern browsers.
I have an input (that holds a number) that I want to put a button next to. This button would, when pressed, increment the value in the box by 1.
I am having a heck of a time lining it up in all browsers though.
I've tried using button, img, and a to accomplish this. img does not line up properly in most of the browsers. Meaning that if I put an input and an img next to each other, the img is a few pixels higher than the input, but that varies by browser. The closest i can get is by making it a button that is styled with css to use my custom image. It works in Chrome, ie7, and ie10. However, in ie8, ie9, and firefox, it is 1 pixel too high, and I can't for the life of me get them to line up.
I read here that floating would make them line up. Sure enough, it did. But now the input and the button are jammed against the edge of the td they're in, and I can't figure out how to move them. Is there perhaps a better method than float? Or just a way to line them up properly?
This is how it is where I am having issues. In Chrome and ie7, ie10 it works fine. It messes up in ie8,9 and firefox.
This is how it looks with floats. It displays right in all the above browsers, but it is now off-center.
Any suggestions?
OK. Here is one way. So I think you might like vertical-align: middle; It only works on inline and inline block elements aligning them to each other. So it's not aligning them inside a box. I made a little sandbox to test your issues HERE. I'm not sure of your constraints, but I use box-sizing: border-box; on most everything these days - So that is something to beware of when looking at the code. I checked it in browser-stack and all seems well for the most part. This is always a difficult task in my experience. I kept to the key points in the CSS below, but there is a bunch of comments and styles and stuff in the codepen. I hope this helps! Good luck!
HTML
<div class="wrapper">
<input class="your-input" type="number" /><button class="your-button">+</button>
</div>
CSS
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper {
float: left;
height: 4em; /* needs to be defined in this case so that the children know what they should be 100% height of */
/* just for show */
background-color: lightgray;
border: 1px solid red;
padding: .5em;
}
.your-input, .your-button {
display: inline-block;
/* aligned to each other and not the .wrapper */
height: 100%;
/* already was inline by dephault - but just to be clear */
vertical-align: middle;
}
.your-input {
margin: 0;
padding: 0;
width: 20em; /* arbitrary */
text-indent: 1em;
border: 1px solid black;
}
.your-button{
/* whatevers */
background: lightblue;
border: 1px solid black;
border-left: 0;
width: 6em;
border-radius: 0 10px 10px 0;
cursor: pointer;
}
You might want to consider using the bootstrap libraries. See "Prepended and appended inputs" here. They do a great job with browser compatibility. You can further refine the l&f, so that it better matches what you have in your examples.
I came up with a method that fixes my issue, but only for ie8+ which is satisfactory for me.
The structure looks like this:
<input class="add_input" type="text" name="qty" value="0" /><a class="add">
<img src="plus.png"/>
</a>
There cannot be a space or new line between the input and the a or else it will misalign them. The image is simply the "+" by itself, nothing else. Then I use CSS to style the image into the shape I want, with the appropriate :hover and :active selectors.
Here's the CSS:
.add_input{
width:28px;
height:18px;
padding:1px 0;
display:inline-block;
text-align:center;
border:1px solid #0a1c40;
border-right:0;
vertical-align:bottom;
}
.add img{
background:url(add.png);
display:inline-block;
width:18px;
height:20px;
border:1px solid #0b1e45;
border-radius:0px 12px 12px 0px;
vertical-align:bottom;
}
.add img:hover {
background:url(add_hover.png);
}
.add img:active {
background:url(add_active.png);
}
I'm note sure if other vertical-align types would work or not, I just know bottom does.
Preface: I've read lots of articles about images inside a div having a strange space around them, etc.
Example #1: Unwanted padding-bottom of a div
Example #2: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
Example #3: cannot eliminate space between 2 horizontal divs inside containing div
Their issues seems similar but not identical to mine. In this sample document, the border, padding, outline, etc are set to zero .. yet both Opera and Firefox render a spare pixel at the top of the div. The third may cheat a way around this space but nobody seems to answer why it's there..
Edit: I read MANY articles that are temptingly close to answering this, but they all seem slightly different with the actual issue.
What am I missing? It's my first question so be patient please :)
<!doctype html>
<html>
<head>
<title>Anger</title>
<style>
*{
cursor: default;
margin: 0;
outline: 0;
border: none;
padding: 0;
text-decoration: none;
}
body{
background-color: #87cefa;
}
div{
background-color: #ffffff;
}
button{
border-radius: 9px;
padding: 1px 6px 2px 6px;
font: 14px monospace;
color: #ffffff;
background-color: #1e90ff;
}
</style>
<head>
<body>
<div>
<button>Sample Button</button>
</div>
</body>
<html>
Is there some CSS3 that will make it all work? This is an experimental project, so the latest CSS3 is welcomed.
PS: I only care about the Opera rendering, though Firefox would be nice to support with the same standards compliant code.. Thanks!
Change the line-height on the div to zero.
div{
background-color: #ffffff;
line-height:0;
}
jsFiddle example
Set vertical-align to top on the button. That will fix it.
On this page there's a form with a Publish and Cancel button. The former is an <input type="submit"> and the latter is an <a>. For some reason the Publish button is slightly taller than the Cancel button, though I don't understand why because they both have the same:
font-size
top and bottom border sizes
top and bottom padding sizes
I had a look in Firebug and the reason for the difference seems to be because the <input> is given a height of 19px whereas the <a> has a height of 17px. How can I make the height of both identical?
Update
I'm not bothered about supporting IE <= 7
You have to define height of your buttons.
of Write like this:
a.primaryAction, .primaryAction.matchLink {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
font-size: 13px;
font-weight: normal;
height: 30px;
padding: 5px 11px;
text-decoration: none;
}
You should apply display: inline-block to the a, to match the button which already has display: inline-block.
You also need this to remove the extra spacing in Firefox:
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;
padding: 0;
}
This kind of problem can be a real hassle to solve.
Only block elements accept a height. You can use either display:block or display:inline-block to achieve this.
At first, display:inline-block; seems like it's a nice, easy way to go - but is not supported in IE7 or earlier.
So, you can either use inline-block and leave old browsers in the wake, or add a conditional stylesheet for ie7, or you can display:block and give them a width (if it's appropriate).
The following CSS rule would work in your case:
.buttonHolder * { height:17px; }
I have the following css and html (drilled down to the essentials. The full code with additional styles can be found here: I have this css I pasted on jsfiddle: http://jsfiddle.net/BwhvX/ , this is however enough to reproduce the problem)
css:
* {
margin: 0px;
padding: 0px;
font-size: 13px;
line-height: 15px;
border: none;
}
input[type="submit"]::-moz-focus-inner {
border: 0;
}
#search .text, #search .button {
border: 1px solid red;
}
html:
<form method="post" id="search" action="">
<p><input type="text" class="text" value="" name="suche"><input type="submit" class="button" value="Suchen"></p>
</form>
this is how firefox renders:
this is how chrome renders:
i want the two form elements to have the same height in all browsers. looks to me like some default style is applied, that i manually need to reset like i did for firefox in this example.
in chrome developer tools one has height 16 and one height 17 px but i am not able to see where it comes from, its just calculated. the applied styles (that are shown to me) are the same.
change:
*{
line-height: normal !important;
}
or add something like:
input[type="submit"], input[type="text"] {
line-height:normal !important;
}
don't ask why)
and. safari need special fixes. but looks well
I found this in normalize.css that solved it for me:
// Removes inner padding and border in Firefox 4+.
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
Try By giving
.text{
border:0px;
}
Usually one of these below has worked for me in the past using firefox browser.
vertical-align: bottom;
vertical-align: top;
If you specify height instead of line-height, they will render correctly. height behaves well cross-browser; line-height does not.
Had the same issue with firefox, setting line-height:normal didn’t help. Setting identitcal padding values on both, the input and button element, helped me out.
CSS3 has the box-sizing property. Setting it's value to border-box, you tell the browser that the element's border-width and padding should be included into element's height, and then may easily set the height itself:
input {
box-sizing: border-box;
height: 15px;
}
This works for html select elements as well.