Ive used the following css code to align my form elements:
form { position:relative; }
form input { position:absolute; left:11em; }
However, the textarea element is not aligned correctly with the rest of the elements. I tried the following, but that didnt work
form input,textarea { position:absolute; left:11em; }
Any way to fix this ?
Thank You.
No-one is going to be able to solve this without seeing the current result; I generally avoid absolute positioning as a rule unless doing something particularly complicated like tooltips, can you not achieve what you want using margins?
It looks like this is a Firefox, em-specific bug.
I think it's related to this bug about Firefox textareas and its font: Mozilla 3.0.8 and Chrome height in em bug workaround
Your positioning should work if you add the following code:
form { font: 11px Arial; }
form textarea { font-size: 100%; font-family: inherit; }
Also, another workaround is using pixels instead of em's.
This does not address your question, but why not use "text-align"? Absolute positioning to place form elements sounds a bit odd in my ears.
If you must use absolute positioning in this way, have you considered using margin instead of left? As the others have pointed out, it's difficult to troubleshoot your problem without more information.
Related
I'm sure my question is quite a newbie one, anyway I can't figure out what I'm doing wrong. Basically, I created a <div> that I use as header, and inside of it another <div> that contains an image (logo) and a title (using <h1>).
The problem is that I get an unwanted extra space above the body
as you can see in this picture.
If I get rid of the <h1> title then everything is fine. I think the problem is due the float: left; property that I have assigned to the image, because if I assign no float property then the space disappears, but as you can see if I remove the float: left; the image and the title are not "aligned" anymore. So, the question is, how can I make the image to stay on the left and the title on the right of the image, without using float properties?
Any help will be appreciated, thanks!
Edit: Thanks everybody for the answers, I'm studying HTML and CSS at school and things like this are rarely mentioned by my teachers. Thanks again
A h1 element has margin by default. Simply remove it by adding:
margin: 0;
To the styles for your h1 element.
you can use this:
<h1 style="margin-top:0px; padding-top:0px">some text</h1>
At start of your work you should clear the style for margin (browser apply some of them).
So just in start of css file write:
h1 {
margin: 0;
}
A lot of devs just start a css file like :
* {
margin: 0;
padding: 0;
}
for clear it :)
Also you should read something about css reset and css normalize :)
This is because every browser has a default stylesheet, which you can find in Browsers' default CSS stylesheets. As you can see, the default margins are not zero. This can be solved by explicitly adding margin: 0px to your CSS.
I know there's a lot of questions about ie7 z-index issues,
I took a look at theses and none of them seems to solve my problem so here's yet another IE7 z-index question:
I have a table with cells containing long texts,
I'd like to show the full text when hovering a cell, in a pure CSS way (I'd really like to avoid another js fix because the app is already pretty slow client side with IE7 because of big tables).
I got it working on FF/Chrome/IE8/IE9 with that method:
http://jsfiddle.net/Zppy4/15/
but I can't get it to work with IE7.
If someone have a magic idea, any help is welcome :)
thanks in advance
try removing .c { position: relative } and adding .c:hover { position: relative }. Not tested but think this should work
here is another: add .c { z-index: 10000 } and .c:hover { z-index: 10001 }
Can you have a look at my code and please tell me why the hover is not working, thanks!
<style>
#moreDiscussHome:hover{
background-color: #ffffff;
}
</style>
<a id="moreDiscussHome" style="color:#f1f7f8;background-color:#12a1b7;" href="">more discussions</a>
Well, as soon as display: none; is applied, you are no longer hovering the element because it is not there, so it will basically flicker constantly or do nothing.
Try opacity* instead perhaps:
#moreDiscussHome:hover {
opcaity: 0;
}
Note that the element still retains it's space in the layout with this, which may not be what you want... but I'm honestly not sure what you're trying to achieve with this.
Side note: There's no reason not to move those other inline styles to a stylesheet.
This doesn't work: #moreDiscussHome:hover{ background-color: #ffffff; }
EDIT: I strongly urge you to move all inline styles to a CSS file. If for no other reason, to avoid some of the issues you already seem to be having with trying to apply background colors. A shortcut might seem easier at the time, but as the saying goes: "Shortcuts make for long delays". (In other words, don't do it)
* visibility:hidden will respond to :hover the same as display:none, so it won't work either. Thanks to thirtydot for the tip.
I've read about quite a few people having a problem with this and I've tried all the solutions I can find - hopefully someone can't point out where I'm making a mistake.
I'm working on this site, and as far as I can tell, I'm in standards mode. The doctype is the first thing in the file, and it's valid. I've tried using a wrapper div or body tag with text-align: center and the container div using text-align: left.
I can't seem to find anything that works. Any ideas would be greatly appreciated.
Your problem looks like it's in the ie7.css file. It has this rule:
* {
display:inline;
zoom:1;
}
Inline elements don't have margins. You'll need to drop this rule, or add display:block; to .container_12 somewhere.
How can I hide an HTML form legend from visual browsers, using CSS, in an accessible way?
legend { display: none; }
is not an option because, as I understand it, this will 'hide' the legend from screen readers. Other attempts I've made do not remove the legend from the layout - i.e. it continues to take up space.
Added as an answer instead of a comment so I can get more points. :-)
If you really want legends, have you tried putting a span inside the legend and positioning/manipulating that?
I understand this works in IE7 and Firefox...
You can't do this in Firefox because it is a bug in the browser.
You can read more here
Browser Bugs
Updated with replacement for -9999px hack ( http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ ) :
HTML:
<legend><span>Your description</span></legend>
CSS:
legend span {
display: block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
For what it's worth - and I'm sure I'll get flamed for this - legend tags are one of the few places I deliberately break the spec by leaving them out. I replace them with a heading of the appropriate level which provides the same information to the user but without the browser bugs.
(I'm happy to hear about the real-world downsides of this if anybody can see some)
edit: Oh and you should ask yourself why assistive technology users would want to hear the legends when your browser using users don't. If the answer is simply to satisfy the HTML specs, use display:none and be done with it - don't hinder the user experience of one group by providing useless information just for a formality.
Solved and tested in IE7, IE8, IE9, FF, Opera, Safari and Chrome. The legend will be read from screen readers, and users will not see it:
<legend><span class="accessibility">Your description</span></legend>
and then, in CSS:
legend span.accessibility {
position:absolute;
left:-9999px;
width:100px;
height:auto;
overflow:hidden;
}
Yes, there's something special about it. It's a replaced element like many form elements. Browsers have a very specific default formatting. Moreover it can't be forced to behave like a regular element using display:block or display:inline, causing attempts to override with CSS to ... not work well.
There are some well documented techniques that can help you accomplish SOME effects with legends, though workarounds are necessary for a semblance of cross-browser compatibility.
http://www.tyssendesign.com.au/articles/css/legends-of-style/ ...
Also see the revised version posted a year or so later.
Many versions of Firefox specifically ignore both display:none and absolute positioning.
You could try:
legend
{
position: absolute;
top: -1000px;
}
I know this is 2 years too late, but using visibility: hidden seems to work 'in an accessible way' in FF.
You can use a combination of visibility and position rules, see below:
legend {
visibility: hidden;
position: absolute;
}