I'm a complete CSS novice -- my background is back-end development. So please forgive the ignorance in advance.
I'm attempting to learn a bit more about the application (or.. practical use) of CSS.
Given the following CSS:
.input-size {
height: 25px;
width: 250px;
}
I'm trying to figure out why the following line of HTML in a WordPress page produces odd results:
<input type="text" placeholder="Search" class="input-size">
I believe the issue has to do with specificity, but I am unsure on how to give a heavier weight to the style above.
The following image is what I expect:
Notice the spacing between the bottom of the element and the canvas below.
However, when I apply the style to a textbox, I get the following:
There appears to be about a 25 pixel padding at the bottom, but that is not specified in the style posted above.
Any advice on moving forward would be appreciated. I'm, unfortunately, unsure of how to proceed with figuring out what could be causing the issue.
Thank you!
What you have is correct, however you do not have padding defined in your new class. What is most likely happening is that padding is defined for input and it just inheriting the properties from the default style. Since you have it inspected - trace the margin rule.
In the CSS, try specifying
padding : 0;
So it would be:
.input-size {
height: 25px;
width: 250px;
padding:0;
}
Related
I've been trying to apply a simple background image to a div. It seems like such a simple problem but after hours of searching through many threads on Stack and other sources, and trying many of the solutions, i'm still looking at an empty div.
I've verified that the asterisk.png file exists and renders when called by itself from an tag.
Here is the HTML
<div class="element"></div>
Here is the CSS
.element{
background-image: url('images/asterisk.png');
background-repeat: repeat-x;
width: 400px;
height: 50px;
}
Im hoping someone can point out the simple error I'm making here ... Thanks!
It should work, check in inspector if any other styles are not added to this element.
Something may make your element display: inline in this case, yes BG will be not visible, change it to display block or inline-block
Fixed it. I was incorrectly linking to the image file. 'images/asterisk.png' vs '../images/asterisk.png'.
My apologies ... I guess I had been staring at the screen for way too long and just needed to rest!
Thanks everyone.
I'm putting a floating picture on my friends blog real quick, but changing the margin values doesn't do anything.
#pic{
z-index:9999999999999999;
position:fixed;
width:200px;
background-color: transparent;}
And the structure:
<div style="margin-bottom:0px;" id="pic" ><img src="{image:Sidepicture}" style="width:200px;"</a></div>
When I change the margin values, the picture stays at the top left hand corner no matter what I do.
The culprit is likely position: fixed;
#pic{
z-index:9999999999999999;
position:fixed;
width:200px;
background-color: transparent;}
Is this all the code there is for pic? It seems that #pic is stuck to top: 0, left: 0
Try just removing the position: fixed line entirely and see what happens
If doesn't work out, also try adding position:relative;
Because you should be putting the margin on the <img />, not on the <div> surrounding the image (#pic).
#pic img { margin: 20px; }
... will do what you want it to.
The very least you should have done is validate that your HTML and CSS are actually valid. There are many errors in the code and style that you supplied. Unclosed Tags, Closed tags, Unmatched elements, styles without contents, invalid styles, Incorrect declarations and so on.
Its also a bit of a jumbled mess, with interwoven styles and script and parts of reset scripts towards the end, all sprinkled through with optional block and cycle contents, making helping you very difficult. Keeping your style separate from your code and grouping it into one block would help you narrow it down a bit as right now styles are all over the file, making it easy for anyone to miss the offending line.
I can only suggest that one of the later styles in your CSS after the style for img you are trying to apply. (somewhere after line 152) is overriding the margin that you are setting at 152. You can use the developer tools built into the browser and look at which styles are being applied to your element and which line in the file they come from. If your pix style is not applied then you will at least have an idea what other styles are and this will allow you to narrow down your investigation.
another way to find the offending line would be to to comment out the styles after line 152 and then comment them back in a few at a time, until you find the class causing the issue.
The quick and dirty fix is of course to put !important after your margin
You can also run your page through the CSS Validation and HTML validation to help you find any of the errors that may also be having an effect.
I recently modified a bit of a button to give it a 3d effect in a bootstrap site.
The result satisfied me, but when I applied the style to tag <button> instead of <a> I had several problems.
You can find the code in question here: http://jsfiddle.net/wctGM/3/
I hope someone can help me, because I can not in any way to move forward
You must use border: none:
button {
border: none;
margin-top : 50px;
}
Your code:
http://jsfiddle.net/wctGM/7/
There are some things which are different to each other. For an instance if you set the border:none; property for a button you will get rid of that border. But the width and height remains different. What I mean to say is go through the default properties which are set on each html tag and try to understand them and then try to change.
See this link. I have added border property like below.
button {
margin-top : 50px;
border:none;
}
So I have a simple page:
www.kensandbox.info/centerthis
This is a simple html/css page and I'm trying to add a paypal button.
The problem is that I can't figure out how to center the button? I've tried adding the following:
<div align="center"> form code here </div>
No dice. I've even tried adding the center tag before the form.
The site code (simple html and css file) can be downloaded here:
www.kensandbox.info/centerthis/centerthis.zip
My guess is that one of the other CSS elements is overriding my change.
What am I missing?
Thanks
there is a float:left in form input, form .btn inside mycss.css
Add float:none to that input if you want to override.
Without looking at your code I would say the best way to center a div is usually make sure it's displayed as a block element (should be by default) and that its width is specified; then finally apply margin: auto.
e.g.
<div class="container">
...
<div class="centered-element"> form code here </div>
...
</div>
where
container {
width: 200px;
}
centered-element {
width: 150px;
margin: auto;
display: block; /* to make sure it isn't being mucked up by your other css */
float: none; /* to make sure it isn't being mucked up by your other css */
}
Edit:
I say to do it this way because, like I now see someone has commented, <div align="center"> is deprecated and so is the <center> tag. To expand, this is because your HTML should only be used to create the structure and semantics of your web page, and CSS should be used for the presentational aspects of it. Keeping the two separate as best as you can will save you a lot of time in the long run.
Also it's best to design your CSS in a way where you shouldn't have to set display: block; on a div (because a div is already a block element) and your shouldn't have to unset a float by using float: none;. For more on a good way to do that, improve your workflow, save yourself some time, and generally be awesome, check into object-oriented CSS a.k.a. ooCSS
I found the answer and I want to thank the two individuals who took the time to answer.
The thing I didn't understand is how to look at a web page and see what CSS code was driving the formatting.
Some research lead me to a Chrome plug in named CSSViewer. Using this plugin and the information from the answer I was able to identify a float left css element that I simply had to change to a float center.
Thanks again for the help.
I have a problem in viewing my web app in mozilla.
In my web app I have a button whose css styles are as below:
.page_button
{
BACKGROUND-IMAGE: url(../images/pagebutton_bg2.png);
BORDER-LEFT:0px;
/*WIDTH: 100%;*/
CURSOR: pointer;
/*COLOR: #000000;*/
BORDER-BOTTOM:0px;
}
As above I have commented out the "Width:100%"&"Color:#000000" attributes as they are causing problems in Mozilla Firefox.(The width100% option makes my buttons appear very small) -- so i commented them.
But the problem here is that this button is inheriting the same Color:#000000 & Width:100% from other parent elements.How can I stop this inheritance.
I even tried overriding those properties like : Color : null; Width : none ---> But this is not working.
I appreciate any suggestions to overcome this.
Regards,
Vijay
I don't know if I understand your problem correctly but if you want to prevent accidental inheritance you can try and use full paths...so instead of just .page_button you could use something like body.page_button though it is more probable that you should do that somewhere else in your code and not in the part you are displaying hope that helps...good luck!
width is not an inheritable property, so you must be applying the style width: 100% to your button using another selector.
If you don't already have Firebug, then I recommend installing it and using it. With Firebug, you can select any DOM element and trace back exactly how the values of all CSS properties on the element were calculated.
If the button is on a link element, then width will have no effect unless the link is set to display:block; or display:inline-block; . That could be having an unintended effect.
I also second the Firebug recommendation!