Hi basically I am new to css etc so my form may be awful, however last night it was appearing abosloutely fine....I haven't touched it, and on loading the site this morning it is not appearing correctly.
so here is my jsfiddle,
can somebody wise please explain why its changed over night? I am sure I haven't touched it.
thanks,
All you need to do is add clear: left to:
#stylized label {
clear: left;
display: block;
float: left;
font-weight: bold;
padding-bottom: 12px;
padding-left: 2px;
padding-right: 2px;
padding-top: 3px;
text-align: right;
width: 180px;
}
http://jsfiddle.net/userdude/7Zc6u/5/
What's happening is the edge of the password label is getting caught on the edge of the username label.
replacing padding
padding: 5px 3px 2px 12px; to #stylized label solves the problem
Or use
clear:left; in #stylized label
Related
I have some problems with a button arrangement where I have several buttons forming a grid.
The problem I am encountering is, that as soon as there is more than one line of text inside the button it gets shifted downwards.
I think you see what the problem is.
<button class="boxed" dummy="0" name="x" type="submit" value="x">
SEGEBERGER ZTG.DO
</button>
corresponding CSS
button {
background:#fff;
border: 1px solid #c1c1c1;
padding-left:11px;
padding-right:11px;
height:29px;
margin-top: 5px;
white-space: normal;
}
.boxed {
margin-left:1px;
padding-top:10px;
padding-left:10px;
width:100%;
max-width:150px;
height:150px;
font-size: 10pt;
word-break: break-all;
}
I looked around but did not find anything that fixed it.
https://jsfiddle.net/k1vvsx2h/
Hope someone has a hint on how to fix this.
Have a good one :)
Adding a float:left will fix this issue.
.boxed {
float: left;
margin-left: 1px;
padding-top: 10px;
padding-left: 10px;
width: 100%;
max-width: 150px;
height: 150px;
margin-right: 5px;
font-size: 10pt;
word-break: break-all;
}
button {
background: #fff;
border: 1px solid #c1c1c1;
padding-left: 11px;
padding-right: 11px;
height: 29px;
margin-top: 5px;
white-space: normal;
}
Here also a jsFiddle for you: https://jsfiddle.net/hb8ydyba/1/. Make sure you're using a clearfix with this solution.
If you're looking for a more flexible solution maybe a CSS Framework like Bootstrap or UIKit and their Gridsystems will work out well for you.
I am working on a voting system that shows what people have been voting for, showing the names of the Movies. I have never had this problem before and can't find anything about it online.
Outlined by the red box is the problem, a random space for the first value that is printed.
Here is the code for the text
echo "<br><form method='POST' action='vote.php'>
<font size='5'><center>".$row['moviename']."</center></font>
</center>
And here is the code for the votes bar
.wrap {
margin-right: 500px;
margin-left: 500px;
width: auto;
border: 1px solid #000000;
border-radius: 3px;
background-color: #000000;
padding: 2px;
}
.bar {
background: orange;
height: 24px;
border-radius: 2px;
}
Sorry if this is a stupid question... If you need any more code please ask.
Thanks in advance.
I'm going to find all the paddings and margins that only have 4 parameters by regular expression, so created a regexp pattern like this:
(margin|padding)[ ]*:([ ]*((-*\d+(px|em|%|cm|in|pc|pt|mm|ex)?|auto|inherit)[ ]*)(!important)*){4};
But I have found one problem! It also passes this:
margin: 1px 11px 4px;
But I don't know how should solve this problem, also I don't know it has other problems or is it optimized?
Please edit this if possible or offer a new pattern.
Thanks
You just have to remove the ? after unit:
(margin|padding)[ ]*:([ ]*((-*\d+(px|em|%|cm|in|pc|pt|mm|ex)|auto|inherit)[ ]*)(!important)*){4};
Otherwise your regex matches any value with 4 digits at least, whether or not there are units or space in-between.
Then following examples won't match anymore (they did with your regex):
padding: 1111px;
padding: 444px 6px;
padding: 4px 356px;
padding: 44px 36px;
padding: 4px 11px 3px;
padding: 4px 1px 3px 56px;
padding: auto;
padding: 4443px auto;
padding: auto 22356px;
padding: auto 36px 89em;
padding: 42px 11px auto;
padding: 4px auto 3px 56px;
Tested on https://regexr.com/418b9
EDIT: there are new units like vh or vw. And -prefix-calc(10% - 6px). If you're analysing legacy code, no prob ^^ but if you're searching into the wild wild web you may find a few occurences of that.
Within my Wordpress site I have a custom written PHP search. It appears within the Content section of specific pages via 'include' so it's a separate file.
http://www.glutenfreeireland.com/accommodation/find-accommodation/
The entire code for search and results appear within the DIV .wheretoeatsearchwrapper.
Unfortunately a large gap appears between the text "Step 1: Choose a Location:" and the first SELECT box. It is caused by the adverts on the right, which when removed, fix the problem. I understood the class wheretoeatsearchwrapper kept everything within that DIV, i.e. objects either side of wheretoeatsearchwrapper wouldn't affect content inside it?
This is the applicable CSS:
.wheretoeatsearchwrapper {
/*max-width: 490px;*/
clear: none;
margin: 0;
padding-left: 10px;
}
.wheretoeatsearchwrapper h1,h2,h3,h4,h5,h6 {
display: inline;
}
.searchlocation select {
font-size: 95%;
margin: 0.2em;
float: left;
clear: both;
}
.steps {
color: #339933;
font-weight: bold;
}
.searchvenuetype {
font-size: 95%;
margin: 4px;
float: left;
clear: none;
}
It's the clear:both; on the searchlocation select element.
.searchlocation select {
font-size: 95%;
margin: 0.2em;
float: left;
clear: both; // Remove this
}
Remove clear: both for .searchlocation select
.searchlocation select {
font-size: 95%;
margin: 0.2em;
float: left;
/*clear: both;*/
}
Hey guys, I have this piece of code:
while($uno=mysql_fetch_assoc($results)) {
echo '<div class="wcapt"><a class="neutral" href="../images.php?id=' . $uno['id'] . '"><img class="pad" src="'. $uno['thumbs'].'" border="0" /></a><br/><center><p>'.$uno['name'].'</p></center></div>';
}
And all the images I link to have exactly the same size. Here's the Mainstyles.css
div.wcapt
{
border: 1px solid green;
float: left;
padding: 0;
margin: 3px;
font: 11px/1.4em Arial, sans-serif;
color: gray;
}
img.pad
{
padding: 5px;
}
a.neutral
{
display: inline;
font-weight: normal;
text-transform: none;
background-color: transparent;
color: white;
text-decoration: none;
}
The problem is that Firefox adds some extra padding to the first image, and only the first image. And this is really annoying. Here's a screenshot of the page:
that's why it's recommended to use a "reset" css... so you wont have this type of inconsistencies between browsers.
Try using a reset css and if the problem remains then it's not the browsers fault =)
Good luck
have you tried targetting the selector more explicitly using..
div.wcapt img {
padding: 5px;
}
You could then remove the .pad class completely
Try adding a pseudo selector more information here
http://www.w3schools.com/CSS/css_pseudo_classes.asp
Note you need to set the doctype to do this
div.wcapt img:first-child {
padding: 2px;
}
I used Firebug and figured out the problem, thanks guys, and I had to answer my question since the answer was in the comments and I can't accept comment answers.