I have setup my form using CSS.. Labels float to the left and input/textareas float to the right. They align fine.
However I recently added a block with checkbox elements. For some reason, there is a margin appearing above it which I have not been able to find the solution to fix. I suspect it is a float problem but I can not figure it out. I'm generally pretty good with CSS.
(no longer viewable)
Notice the extra space above the checkbox block... Borders are on to help you understand where the divs lie.
So where is the offending CSS code?
Thank you!
Update
It appears to be fine in Safari.
I am testing on firefox 3 on mac osx .
This is because you are using a fieldset with a legend. The legend is pushing the top margin out. Legends are very difficult to style cross browser, in fact most browsers cant style them at all other than font color.
Check this link to see some research that has been done on styling legend elements (with cross browser screenshots): legend styling
I suggest you hide the legend, and include an extra label inside the fieldset for cross browser goodness.
I think its this:
.option-row input {style.css (line 562)
display:block;
float:left;
width:10%;
}
Firebug is telling me that your borders overlap. Reducing the width of that box to 8% would work, but not sure that achieves what you want?
if i'm not mistaken, your checkbox and label within the option-row class are both defined as block-level elements. try removing the display property or setting it to inline.
Related
my bullet points are too small and I can't seem to find a fix for this.
If I adjust the font-size to make the bullet point bigger, the ::before item gets vertically higher which creates a gap and pushes the following paragraph further away/down.
Website: https://bloglized.com/
CSS: attached are two images down below for more details (default + adjusted)
default
adjusted
If someone knows how to fix this, I would appreciate it.
EDIT: Also, I would like to use the list-style-position: outside, to vertically align my text. Unfortunately, it seems like it's not possible here. If anyone knows a fix for that as well that would be awesome!
What you're looking for is the line-height CSS property.
After you've made your font-size adjustments, change your line-height as desired.
Check this out:
http://codepen.io/maxwbailey/pen/vGKBr
Now, they look fine when you aren't hovering over them, but when you hover over the <button> and <input> elements, you'll see that the text below them is bumped around a bit, while hovering over the <a> element does not cause the same effect. That's because the <button> and <input> elements are displaying as inline-blocks still (which handle borders, padding, and margins differently than regular inlines), despite the display: inline !important; line that is applied to them.
Is there anyway to override this? I know it's doable via hacks like borders with the same colour as the background, etc. but I'd really like to know if there's a way to make them display: inline properly.
Note: The problem here isn't about the text being bumped around (though that is an effect of it), it's that, despite everything saying otherwise, the browser is still forcing the button to display as an inline-block. Thanks to everyone who's provided methods to prevent the text bumping from happening, but that's not the real problem here.
Thanks!
Not sure the context of why your markup exists like this, but the issue looks like it's being triggered by setting the font-family. If you take a look at this pen - http://codepen.io/pnts/pen/Egwuo - the hover works fine without a font-family specified, but if you uncomment the line specifying one, the jumping begins.
It seems your question is a little misleading. Your button tag IS in fact set to display:inline on both normal and hover states. It sounds like the question you have is how to prevent the text below from getting bumped down on rollover. Instead of using a bottom border as you are currently, why not use the following in the hover state to achieve the underline?
text-decoration:underline;
agree with the previous answer, however if you want the flexibility of a border, being able to use padding to adjust where it lays etc, you could use
border:1px solid transparent;
not as hacky as using the same color as you bg because it doesn't matter the color of the background that way.
I'm having this really strange problem with the CSS of my custom validator.
I have a custom validator with the display property set to dynamic and the CSSclass property set to a CSS class I wrote.
In this CSS class I have a padding property. My problem is that the left and right values of the padding just reverse for no reason when I view my website in IE7 or IE8 with compatibility view set to on.
The values just flip, the amount of pixels set to the left padding appear on the right and the other way around.
Sorry for not posting the code, I'm writing this from my phone because we don't have Internet access in this network.
Any ideas?
Had the same problem with span containing arabic text within an anchor tag - padding was inverted. Changing text to latin was one way to fix it :) Another one was to add zoom:1 to that span.
Without seeing any code...I can only assume that the default margin and padding values are being interpreted differently by each of the browsers. I'd recommend adding a css reset stylesheet just above your other stylesheet to see if that changes anything?
CSS RESET STYLESHEET: http://meyerweb.com/eric/tools/css/reset/
Hope that helps a little. :)
is there a way to align a fieldset legend in firefox to the right? I thought it was just my styles but apparently even with an example online the FF fieldset ignores the text-align: right:
http://www.quackit.com/html/tags/html_fieldset_tag.cfm (works in chrome)
There's no obvious way to do this in CSS (and in particular, CSS can't really describe legend/fieldset styling at all, so the fact that any of it works is a miracle), but <legend> has an attribute named align that you can set to right like so:
<fieldset>
<legend align="right">My stuff</legend>
</fieldset>
to get the behavior you want in Firefox. I'm surprised some people are seeing it aligned right on that testcase; there are no provisions for aligning a legend right in Gecko except for that align attribute and direction: rtl fieldsets.
The align attribute of legend has been deprecated since HTML 4.01. However aligning the legend element using float: left; and float: right; seems to work fairly well across browsers, though you might need to add some margin to the first element after the legend element.
I found out, that Firefox supports something like this
text-align:-moz-right;
Perhaps you could try this out - it might make text-align work in older version of FF.
i am late to answer, but i found this question via google and thought that this might help someone in future
in order to position the legend anyhow you like horizontally, all you have to do is set its width property to 100% and then treat its child elements as if they were inside a one-line block
so, for example, if you want to align the contents to the right, do
label{
width:100%;
text-align:right;
}
of course, don't forget to be careful about label's parent width to avoid any misbehavings
I have links in a vertical ul
Some of them are small (eg: Home) and are only on one line. However some are on two lines (eg: Register With Us - wraps onto the next line).
Is there any way to get all this text to vertically align in the ul?
My UL has a fixed height of 75px, as do the li's inside (which are float:left to make it vertical).
The a's inside the li's are display: block and have a height and width too.
Any help would be brilliant thank you, I can't find out how to do this anywhere.
Thanks
My guess is that you have li's floated at the minute, changing the lists to use display:inline-block; instead of float should enable you to get the vertical alignment..
This may not be a straight swap, it might need a tweak or two to look the same as what you have, however seeing your code would help us help you ;)
sorry, my mistake it's actually display: table-cell; which is the answer for modern browsers however this does not work in IE7 and below..
I was sure I'd done this using inline-blocks for IE but I can't find it in my archives.. am now going out, so for now will leave you with Chris Coyiers write up which lists a few different IE hacks at the bottom if you require IE7 support : Vertically Center Multi-Lined Text
There are more hack than solutions for this, and i don't know any working on all browser.
If you're using css3, you can use the flexible box layout: http://blog.isotoma.com/2010/08/css3-flexbox/
If no, you can use the 'table' hack : http://www.456bereastreet.com/archive/201103/flexible_height_vertical_centering_with_css_beyond_ie7/
this might give you a extra ideas of how can you vertical align things depending of your situation, http://blog.themeforest.net/tutorials/vertical-centering-with-css/ And it metions the goods and bads for each approach.
GL