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
Related
In Chrome and Safari, the following CSS problem occurs:
ul, li and a or link have a default CSS property that pushes everything vertically away. I have fiddled with the following properties:
font-size
margin-right
padding
color
text-decoration
margin
padding
border
display
list-style
vertical-align
line-height
line-height
font-style
margin
font-variant
padding-top
padding-bottom
margin-top
margin-bottom
And nothing seems to prevent the problem.
I've downloaded the CSS reset by Yahoo, but I'm unsure how to use it properly.
I haven't pursued that because I don't know that it would solve my problem anyway.
I've looked at your Fiddle and I'm slightly confused. You say things are being pushed away vertically, but I don't see that happening at all.
The only thing I see which could even somewhat meet that description is the fact that your links are on separate lines.
If this is the problem, the solution very simple: divs are block-level elements. This means that they default to 100% width and are designed to break onto a new line before they start, and onto a new line after. This is the behavior of display: block; and is built-in to the default styles of a div.
To fix this, apply the following style:
#headernav div{ display: inline; }
This, however, is the least of your problems. The code you copied into the fiddle lacks a closing tag for one of the div elements, which could cause unpredictable behavior in older browsers. You have two divs with the same ID, which is a major no-no.
In this update to your fiddle I have fixed the HTML problems you have. Note that 'tempLink' is now a class, and is targetted by a '.' in CSS, not the '#' that indicates an ID.
I have applied the above CSS to the class tempLink, instead of any div within your headernav.
Note in that fiddle that your two links are now side-by-side. You can control the horizontal spacing between them with margin and padding (target the tempLink class).
As Adrift mentioned it would be a lot easier to diagnose if you use jsFiddle. That being said, have you tried display: inline-block or float: left?
I have this code, which is behaving differently in firefox vs chrome.
<h2>Presenting
<span style="font-weight:bold">Analytics by </span>
<div class="fi_logo"><img src="IMAGEURL" /></div>
</h2>
the class fi_logo referenced above is :
.fi_logo {
min-width: 35px;
height: 35px;
margin-left: 40px;
position: absolute;
top:-5px;
left: 262px;
float:right;
}
In firefox, there is an offset caused by margin-left in fi_logo between the image and the text(in h2). If i dont add the margin-left, then the image overlaps the text in chrome.
So, in short, if i add the margin-left property, it works in chrome, whereas it causes a large offset in firefox. Any suggestions on how to solve this?
Here it is: http://jsfiddle.net/bikerabhinav/mpL79/2/
Use combination of position relative and absolute.
Also, do not use div inside h2 - bad markup
Maybe if you set .fi_logo display:block
I think, your problem is with specific browser version.
I checked it in FF 3.6.2, which return same result like Chrome
Well it sounds like you still haven't sorted this out so I will make a little more commentary.
I cannot say exactly what is causing the browser inconsistencies without doing a bunch of trial and error, but I think that the way to fix it is to rethink the way you are positioning the image.
It seems awful convoluted to be positioning the img absolutely, floating it, and adding a left margin. Given all of that it is unclear what precisely you are even trying to accomplish with this code.
If you edit your question to describe how you want the image positioned, I (or someone else) would be more than happy to recommend a good approach
Your html is invalid. You cannot have a div inside a heading. I also question the float and absolute positioning on the same element. I also wonder if you are using a doctype.
Your image tag inside the div is not closed properly, and in the css the class definition is wrong; the class is defined by a dot (.);
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
I am new to CSS, so please bear with me. I have this form which I'm trying to style. Everything works fine, except the confirmation label which is in a div. I want some space to be there between div.field, and while this works for all the input elements, it doesn't work for the label message which is at the bottom. I tried increasing margin-top, but to no avail. I would like that element to be positioned in the center.
Using the web-developer addon of Firefox, it shows me that the width and height of div.field of label tag specifically is 284px and 209px respectively. Why is this so, when I haven't set it that way?
You can view the code live at jsfiddle: http://www.jsfiddle.net/yMHJY/
The solution is simple, really. Add a margin-top to the parent of the label element, and add overflow: hidden to the div#contact div .field selector.
However, can I just say that the code can be rewritten for much better efficiency and semantic correctness. For instance, I would contain the last massage in a p tag and not a label in a div. Also, I would have each input element placed in an unordered list ul instead of divs. You also have a lot of unnecessary floats and the br at the end of each input is wholly uneeded. Oh, and unless you are embedding Calluna somehow, don't use it - stick to web safe fonts (and if you are, you still need to suggest an alternative, in the user's browser does not support it, and also to give the browser something to display while the font loads).
Edit
Fixed the load for ya, I should be paid for this kind of stuff :) Just stick to better HTML and CSS next time.
http://www.jsfiddle.net/SNrtA/
To center you could add a parent container
<div id="parent">
<label id="label">Your Message Has Been Sent</label>
</div>
div#parent {
text-align:center;
}
or add an id to your original parent div to target it with above css
with regards to the margin, you seem to have an issue with a float:left being set in the
div#contact div input[type=text] class. You need to clear this as it could be causing you margin problems. Try removing this and amending your styles. Why are you floating the inputs left?
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.