IE7 issue - <lable> pushes down next to <input> - html

For some reason, the text labels are being pushed down below the input tags. Here is the link: http://jurbank.com/lightning-grader/ the issue is at the very bottom of the page click "Get Started!"

see if applying float:left; to your labels fixes it.
Edit
and the second radio button. It needs floated also.
PS nice site btw

You can use display:inline-block; on both the label and the input.
To make it work in IE7, you also add
zoom: 1;
*display:inline;

Related

css - Aligning issue

I want to do some design tweaks in my web application, but I'm stuck due to some alignment issues.
Please go to http://qlimp.com
Login username/password: dummy/dummy.
Then go to this link http://qlimp.com/information.
There you can find Keywords input text with the add button at the bottom which is not positioned properly. I can't change the position of the input text. But when you remove that add button (#add-button), we can change the position of that #add-keywords input text. Why is this so?
Could anyone guide me to position it properly?
Thanks!
UPDATE
Please check this http://jsfiddle.net/RxHuN/
What I need is, I want the add button to be place on the input text and it want's to be movable, I mean changing positions
try this:
#add-keywords{
float:left;
}
#add-button{
float:left;
position:relative;
bottom:8px
}

button element not removed from print in IE9

I have added a print button to my page.
<button type="button" class="printBtn">Print This Page</button>
And now I want to remove the element from the print.
I used:
.printBtn{ display:none;}
This works for all other browsers perfectly but for some reason IE does not entirely remove the button when I print the page. The button does not display in print but it messes up the format of my images
example of the images aligned properly not in print preview:
http://i244.photobucket.com/albums/gg5/robasc/Untitled2.png?t=1323881931
example of the images not aligned in print preview and the button is removed using the above css and html:
http://i244.photobucket.com/albums/gg5/robasc/Untitled.png?t=1323881871
I believe the button still exists and is distorting the rest of the elements in the document.
Does anyone know how to fix this issue?
You could try using 'onbeforeprint' and jQuery to remove the button from the DOM (a little heavy handed).
you can try to use
.printBtn{
visibility:hidden;
}
that hides the butten

Invisible HTML form

I have a weird problem here. On one of my websites running Joomla! is the login form - http://bohemia-kichijoji.com/index.php?option=com_user&view=login . What I have noticed, the login form is invisible in Firefox (tested on 4.0.)m but visible on other browsers. I have tried almost everything - went through CSS, HTML, run validation - nothing helped. Could you please tell me the reason, why this happens?
Thank you very much!
Looks like it's getting pushed outside the page, try this:
fieldset {
clear:left;
}
OR
table.contentpane {
float:none; /* or remove the float:left; */
}
There didn't seem to be any reason to float the table, so personally I'd use option 2.
You have a floating problem. The Element before your fieldset element which is table is floated left. you have not cleared you floats. There are many ways around this. You could use the overflow property on the form element or you could clear the float on the filedset element itself as follows.
fieldset {clear: left;}
Or do like this
form {overflow: auto;}
This will cause the fieldset element to appear in Firefox 4.0 and Firefox 4.0.1
It is because of using which is causing it to not display in Firefox.
You'll need to remove the fieldset for Firefox and see it it works..

Css issue for IE8 - Odd space appearing between 2 divs in the header

You can view the issue on:
http://www.caterinaligato.com/
We can't reproduce the issue on IE7 or any of the Firefox versions. Using the DeveloperTool on IE8 its showing that the padding is inside the <div id="bannerArea">, however, we have tried #bannerArea * { padding:0; margin:0; display:block; } and that hasn't helped.
Please note that the 'Compatibility View' is off.
If anyone has any advise that would be great!
Start by adding overflow: hidden; to your BannerArea class. I'm not convinced that the star hack is necessarily the best option either. I would suggest removing that until it's proven that you absolutely need it.
Finally, make sure your <a> tag has its content all on one line. IE has historically had a degree of difficulty with the correct layout when anchor tags have line-breaks in the markup, displaying whitespace where there shouldn't be any.
Your line of markup:
<div id="bannerArea"><span class="bannerContainer first"><a href="#" class='banner-95 bannerImage' title='' rel='nofollow'><img src="/media/pics/site/imagecache/683C6A596432B154340F913300D76915.jpg" width="958" height="346" alt=''/></a> </span></div>
...splits the tag across three lines, which may be contributing to the issue.
use float:left for "bannerArea" it will reduce the white space in IE8, But the position will move right, need to reset the position.
I'm pretty sure this is happening because of your drop-down menu. If you add overflow:hidden to you "bannerArea" div, then the white space vanishes, but the placement is ruined. When added overflow:hidden to "nv" div, the image came back to it's place. So you have take care of the drop-down menu. Perhaps you can use scrip drop-down instead of pure css?

YUI Button misalignment

Im using YUI and am having alignment problems with YUI buttons inline with text input fields. The rendering problem is occuring in FF3 and is even present on YUI's own site.
http://developer.yahoo.com/yui/examples/button/btn_example09.html
As you can see the button sits higher than the text fields. Any ideas on how to get it all at the same height?
On that page, in FF3, getting rid of the vertical-align:baseline rule got the button to bottom-align with the text input boxes.
So:
#calendarpicker {
// vertical-align:baseline;
}
Looks like it's also a combination with
.yui-skin-sam .yui-button button, .yui-skin-sam .yui-button a {
min-height:2em;
}
Commenting that out helps too.
In the end i had to use position:relative;
Here is a YUI example that does actually align correctly: http://developer.yahoo.com/yui/examples/calendar/calcontainer_clean.html
I copied its css