Text in label position differently after zoom in IE7 - html

I'm having a problem with IE7 after I zoomed the page. Some of the text was compressed and the hover/onClick was not in the place where that text is.
Here is my sample code and css:
CSS:
.pagination{background-color: #CCFFFF;padding:2px 2px 2px 2px;}
.paginateNo{color: #000000;margin: 0 3px 0 3px;font-size: 10px; }
.paginateYes{margin: 0 3px 0 3px;color: #0033FF;cursor:pointer; font-size: 10px;}
.paginateYes:hover{color: #FF0000;text-decoration: underline;}
HTML:
<div id="pagination" class="pagination" align="right">
<label class="paginateNo">Records 1 - 20 of 150</label>
<label class="paginateNo">First</label>
<label class="paginateNo">|</label>
<label class="paginateNo">Previous</label>
<label class="paginateNo">|</label>
<label class="paginateNo">1</label>
<label class="paginateYes" onClick="showPage(?);">2</label>
<label class="paginateYes" onClick="showPage(?);">etc...</label>
<label class="paginateNo">|</label>
<label class="paginateYes" onClick="showPage(?);">Next</label>
<label class="paginateNo">|</label>
<label class="paginateYes" onClick="showPage(?);">Last</label>
</div>
Note: ? means page number
I'm not sure if some of my CSS causing this, but in ff and chrome I had no problem. Is this IE7 problem or just in my code. I'll appreciate any help. Thanks

use IE Conditional CSS or study about conditional css
note: using above trick, your site will not be validated by w3c

A test with version of IE and browser may proof that this is a browser bugs. I also do some experiment with label to see what its different with my current display and its only prove that this a browser behavior.

Related

Form within a non-white background strange borderrs

Within a div with a non-white background, when I add an input element it gives me this ugly border.
<div class="input-group">
<input type="search" style="height:30px;">
</div>
What can I do to get rid of it?
That is unusual... what browser are you using to view this? Do you have a source page you can show us? I'm wondering whether it's a browser-defined default, or you have some other CSS causing this.
Regardless, there is a simple answer to this: Set your own border.
Like so:
<div class="input-group">
<input type="search" style="height:30px; border: 1px inset grey;">
</div>
You can also use this instead if you want iPhones to render the exact same border too (Apple devices like to style things their own way and this will override that):
<div class="input-group">
<input type="search" style="height:30px; border: 1px inset grey; -webkit-appearance: none;">
</div>
I would still recommend posting a link to a real example (perhaps on jsfiddle.net), just so we can verify what's causing the border issue. There are several possible reasons, though the above code should solve the most common ones.

layout difference between IE8 and IE9

I have a site (www.jamesalder.co.uk) which is not rendering properly in IE8 and below.
Here it is in IE8:
And in IE9 and everything else:
As you can see, the search box has moved from top right to the wrong place.
The html for the search box is:
<div id="header">
<img src="/media/header_images/ts-hutton_2.jpg" title="Victorian Paintings at James Alder Fine Art" alt="Victorian Paintings at James Alder Fine Art" "="">
<form id="search-form" action="/search">
<label id="search-label">Search the Site</label>
<input type="image" src="/static/images/sign-up.gif" value="search" id="search-button">
<input type="text" name="q" id="search-input">
</form>
</div>
It seems as though it is totally missing out the following CSS, in that if I disable this CSS, it has the same effect:
#search-form {
position: absolute;
right: 0;
top: 0;
background-color: rgba(255, 255, 255, 0.6);
padding: 3px;
}
Does IE9 have some kind of problem with CSS on forms? Should I put it in a div?
As for the images below that which have decided not to float any more, I have no idea.
Are there any best practices or good resources about getting sites to behave across older versions of IE, or should I just use conditionals?
It was actually caused by malformed html. I had tags which looked like this:
<img src="/media/homepage_images/all-paintings-sale.jpg"
alt="All Victorian Paintings for Sale"
title="All Victorian Paintings for Sale" ">
Notice the " at the end, which was causing everything following it to be treated as text.
Bizarrely, IE9 and everything else fixed the error automatically but IE8 and below didn't.
It may cause by <form>.
Put your <form id="search-form" action="/search"> element in a div.
<div id="header">
<img src="..."/>
<div id="search-form">
<form action="/search"></form>
</div>
</div>
Try this please.

Space appears above form (in Chrome only)

I've got a form, which has a legend and a set of fields. I'm using Bootstrap 2.x to style it. For some reason, space appears above the form, but in Chrome only (it renders fine in IE10 and Firefox). I've pared it back to just the basics to demonstrate the issue I'm having:
<form>
<fieldset>
<legend>Legend</legend>
<div class="control-group">
<!-- This div results in the space appearing above the form -->
<label class="control-label">First Name</label>
<div class="controls">
<input type="text" />
</div>
</div>
</fieldset>
</form>
If I remove the class="control-group" from the div wrapping the input field, the space magically disappears, despite seemingly having nothing to do with this issue. I've checked all the margins and padding of everything in Chrome, and there's nothing, so I don't know where this spacing is coming from. I need to use this class on these field divs, as I'm implementing a horizontal form. I'm pulling my hair out trying to work out how to fix this issue - any ideas? Here's a jsfiddle to demonstrate: http://jsfiddle.net/christhecoder/kDrVH/3/
Any help would be much appreciated!
http://jsfiddle.net/kDrVH/10/
#import url("http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css");
legend+.control-group{
margin-top:0px;
}
you get 20 margin from this: legend+.control-group
This is because bootstrap CSS rules for <legend> has margin-bottom:20px
Just add a CSS rule:
legend {
margin-bottom: 0px;
}
Also you can add this only to your legend label:
<legend style="margin-bottom: 0px;">
// Whatever you want
</legend>
JSFIDDLE DEMO
Instead of
legend+.control-group {
margin-top: 20px;
}
Use this.
It will preserve your current layout and remove space above the form.
legend+.control-group {
padding-top: 20px;
}

IE8 displaying wrong piece of CSS sprite

There are a million issues with sprites and IE8 i've read about online, however, they all seem to deal with the issue of the sprites not showing up at all. Mine is showing up, its just showing the wrong piece of the sprite. It works fine in all other browsers.
Heres the CSS
div.searchForm input[type=text] {
border: 0;
padding: 0 10px;
margin: 0;
background: url(../img/sprite.png) 0 -125px no-repeat;
background-size: 115% 235px;
width: 600px;
height: 30px;
float: left;
font-size: 12px;
color: #fff;
-webkit-appearance: none;
-webkit-border-radius: 0;
}
and the html:
<section id="secondary6">
<h1 class="hidden">Search</h1>
<div class="clearfix">
<div class="grid_4">
<nav class="grid_2 secondary">
<h1 class="hidden">Search Secondary Navigation</h1>
</nav>
<div class="searchForm">
<input type="text" placeholder="search">
<input type="button">
<input type="submit" class="hidden" >
</div>
</div>
</div>
</section>
basically you click the search button, and it displays a search bar that should be hidden otherwise. Like I said it works in other browsers.
IE8 doesn't support background-size (see https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Browser_compatibility), so that's what you'll have to work around. Depending on your needs, you might try IE7.js (which works with other versions of IE) or a conditional comment to adjust the position of the image for IE8. Or, just make sure your raw image doesn't need to be re-sized.
What happens when You assign class or ID to particular text input field?
for example..
div.searchForm input.classInput {
/* css code here */
}
Also ...
..where is element form tag wrapper, form name, form action ?
The input fields should not reside in a document on a way You presented.. without form tag..
Which software actually generated this code for You?
Is it dreamweaver?
Basic and proper example of valid HTML input form ..
<form id="formID" name="formName" method="post" action="#">
<input type="text" name="textUno" value="" />
<input type="text" name="textDue" value="" />
<button type="submit" name="do_processing"> Go! </button>
</form>

Why does IE respect label CSS width, but not Firefox or Chrome?

I'm trying to write a contact form however my label widths aren't being forced in Firefox or Chrome - IE seems to be working okay though (for once). Here's my HTML
<form name="" id="" action="" method="post">
<div id="my_form">
<div>
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
</div>
<div>
<form>
and here's my CSS
#my_form div label{width:200px;display:inline-block;}
any ideas how I can force the label width, they seem to collapse
Try this:
#my_form div label{width:200px; display:block; float:left;}
See this running (http://jsfiddle.net/jrpab/), it works fine in Chrome.
try:
#my_form label{width:200px;display:block; clear:left; float:left; }
#my_form input{display:block; float:left; width:auto;}
After some head-scratching and research, I've found it's because
labels are inline elements, which according to CSS documentation
should ignore width styling. So, as usual, IE is doing it wrong and
Chrome and Firefox are doing it right.
...
set its display property to something other than inline. I've found display: inline-block is the best for achieving what you're going for.
http://doctype.com/firefox-chrome-ignore-widths-my-labels