I have an issue where Internet Explorer is generating an additional br element that is not in my source. The additional br effects the page's layout and is visible when using the developer tool. I've tried removing all hard returns between the surrounding elements but the additional br persists. Firefox and Chrome do not have this issue. Ideas on what I can do to fix the issue?
Instead of
First line.
Second line.
I get
First line
Second line.
Code Example
<asp:ImageButton ID="RemoveItem" AlternateText="Remove Item"
ImageUrl="~/img/buttons/remove.png" runat="server" CssClass="remove"
CommandName="Remove" OnCommand="RemoveCartItem_Command" />
<br runat="server" id="TotalBreak" />
<span class="fieldlabel">Total</span>
And what I end up with (... used to show I've shortened rendered ids)
<input id="...RemoveItem" class="remove" alt="Remove Item"
src="img/buttons/remove.png" type=image name="...RemoveItem" />
<br id="...TotalBreak"/>
<br/>
<span class="fieldlabel">Total</span>
It's probably due to line-height or another default in the browser's default style sheet. Like buyckbova said, you should use a CSS reset. Try Eric Meyer's, it's thorough: http://meyerweb.com/eric/tools/css/reset/
Try a CSS reset to remove browser defaults.
Related
i'm using bootstrap CSS for my application. I have asp:login control with "remember me" checkbox.
my problem is there is a space between checkbox and the word "remember me". i removed all checkbox css from my css files, but still couldn't fix the issue.
I tried this css code to remove the white space
.chkbox{margin-left:0px;padding-left:0px;white-space:nowrap;}
and this is my Login control
<div class="contact-address span3" style="/*width:250px;*/margin-top:15px;padding-left:5px;">
<h3 style="color:#1872AB;font-weight:normal;">LOGIN:</h3>
<div class="login">
<asp:Login ID="user_Login" runat="server" OnAuthenticate="user_Login_Authenticate" RememberMeText="Remember me" TitleText="" UserNameLabelText="Email:" PasswordLabelText="Password:" OnLoggedIn="SAP_Login_LoggedIn" >
<LoginButtonStyle CssClass="con-tbutton"/>
<CheckBoxStyle CssClass="chkbox"/>
</asp:Login>
<table style="width:100%;">
<tr><td style=""><label>Forgot your password</label></td></tr>
</table>
</div>
but still, it looks like the image below
any ideas?
I just quickly made a sample aspx page, and it works just fine:
This is unstyled. As you see, the checkbox aligns just fine. I don't see any bootstrap styling in your example, or classes for that matter. It might be the closing </div> tag you're missing... This is the best I can give you without a live html example from you on JS Bin or somewhere simlilar. Try what I suggested in my last comment.
Trying to set a page break in the page I'm working on but in the print preview I'm still seeing things on the page that aren't supposed to be there. Can't figure out why this isn't working.
In my css style:
.applicant-break hr {page-break-after:always;}
In my ASP.NET code...partial view of code the start tags are there:
<b>Resume</b>
<br />
<asp:Literal runat="server" ID="litResume"></asp:Literal>
<br />
<br />
<hr class="applicant-break" />
</ItemTemplate>
</asp:Repeater>
</asp:Panel>
Any help would be appreciated.
Your css needs to be
hr.applicant-break {page-break-after:always;}
EDIT:
Doing some reading on the W3Schools website, it seems this css property is meant for table elements
"Set the page-breaking behavior to always break after a table element"
EDIT:
Doing some more reading, it seems browsers do support more than the table element, however some browsers have trouble with it on HR and BR tags (Reading here)
try putting a div after the hr like so
<hr />
<div class="applicant-break"></div>
and changing your CSS to
div.applicant-break {page-break-after:always;}
So apparently I'm silly, I was trying to trust the print preview of Chrome instead of just actually printing it myself, upon printing it I see that the page break does in fact work, thanks for your assistance m.t! :)
So fair warning to anyone else reading this, while it is useful it doesn't always give you an accurate look at your print job all the time.
I tried this code in IE9, unexpectedly it got screwed because of a missing </p> after heading.
live demo
<style>
#MyForm div {
width: 200px;
height: 30px;
float: left;
}
</style>
<div>
<p><b>Login</b>
<form id="MyForm" action="test.html">
<div>
<label>My Email</label>
<input />
</div>
<div>
<label>My Password</label>
<input type="password">
</div>
</form>
</div>
It is a bug or just me?
Update
A block level element is invalid inside a "p" tag as per W3C
<P>
<DIV>...</DIV>
</P>
But it's optional to close <p> tag so,
<p>content block 1
<p>content block 2
<p>content block 3
<form> ..... </form>
This appears valid. A block element should automatically close <p> if it's not explicitly closed as in first example.
This does appear to be an IE9 bug.
After doing some more testing (and adding some <span>s into the form), in IE9 Standards Mode it looks like IE9 fails to recognise that a <form> is not allowed as a descendent of a <p> but does recognise that a <div> is also not allowed.
Consequently it inserts elements as descendants of the p element node until it encounters the first <div>, at which point it terminates the <form> and the <p> and then inserts the rest of the form body after the form.
When it encounters </form> it treats it as an end tag for a non-open element and ignores it.
After working with the sample Fiddle for a minute I can confirm that IE9 does have a problem with it. However other browsers may also have the same problem, though I have not confirmed. The problem is that IE9 thinks you are nesting a block level element (the div) inside of the p tag. This is not correct. That is what is causing layout errors. I even left the p unclosed and changed the div to a span and it worked just fine. Alternately you could also close the p tag.
Older versions of browsers didn't care so much if you were missing things like </p>; they'd try to fix it up. It's a bad practice that's starting to be stomped out, hence why it's not working in newer browsers/HTML versions.
While I appreciate the sarcasm in John's answer, to be clear, this is not actually a bug in the brower.
What is happening is the brower is written trying to conform to the standards. The standards define expected behavior when given valid HTML. When given broken HTML the standard is silent, and so if IE9 is trying to correct for the missing tag, it is assuming it belongs elsewhere, and IE9 displays it incorrectly.
You can force IE9 to try to correct for bad html by hitting F12 and changing the compatibility settings.
As you cannot expect your end user to go along with this, a better solution is to validate the HTML you are generating.
I periodically run into this bug. If you close your P's, or just delete them if possible, the FORM will behave normally. It can be hard to track down this problem because it can manifest itself in so many different ways. Most recently for me, there were no visual rendering cue, but I was getting nonsense javascript errors in IE9 only.
I'm usually able to just delete the P tag right before my form to fix the problem.
I declared an iFrame in my html, and the source is my XQuery file. In my XQuery, I defined a <div>, within which I also declared a button named "convert".
My XQuery file basically looks like this (this is the source for the iFrame）
return
<div id="content">
<table>
....
<tbody>
{
...
<td>
<a id="{$t/#id}"
rel="nofollow"
target="_new"
name="{util:document-name($t)}:{util:node-id($t)}"
href=
"http://localhost:8080/exist/rest/db/motorola/xquery/toDita.xql?xml={
util:document-name($t)
}&xsl=mot2dita.xsl">
<input type="submit" value="convert"/>
</a>
</td>
...
}
</tbody>
</table>
</div>
As you can see, in a td, I declared a button called "convert", and the "href" gives the link. Right now this button works perfectly in Firefox and Chrome(opening a new window to do the task), but in IE, after clicking it, it just doesn't do anything.
I wonder if this is a browser issue or my XQuery script has problems. Thanks in advance for helping out.
<input> tags are not valid inside <a> tags. The XHTML code is therefore not valid, which will account for the inconsistent behaviour - some browsers are better at compensating for odd cases like this than others.
Recommend you remove the <input> entirely and use CSS to style your <a> tag to look like a button, if it's just the look of a button that you're after.
Unless you're inside a form, it's not going to submit anything...definitely not an A tag.
I prefer to do these with Jquery UI's button feature. It gets the desired behavior you're looking for, is progressively enhanced and tested to handle the full gamut of browsers, and can be done use a href links, button elements, or input type=submit elements. Plus, styling looks great and is instantaneous.
Here's a quick tut: http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/
Here is a code snippet from my page:
<input value="Search" type="submit" /><!-- whitespace
--><span class="vdivider"></span><!-- whitespace
--></form><!-- whitespace
--><form action="login_action.php" method="post"><!-- whitespace
--><?php
Those whitespace comments are to get rid of the whitespace on each side of the divider. Is this really the only way of doing this? There has to be a more elegant solution.
One option to consider - use a templating engine if you can. For example, in Smarty, there's a {strip} function that does exactly this:
{* the following will be all run into one line upon output *}
{strip}
<table border='0'>
<tr>
<td>
<a href="{$url}">
<font color="red">This is a test</font>
</a>
</td>
</tr>
</table>
{/strip}
Output:
<table border='0'><tr><td><a href="http://. snipped...</a></td></tr></table>
You can use the font-size:0 hack. Basically, you set font-size:0 on the parent element, and set the font-size explicitly on the children.
Live demo: http://jsfiddle.net/simevidas/mLZYW/1/
(Presentation without hack: http://jsfiddle.net/simevidas/mLZYW/)
White-space only shows when it is around or next to inline elements, so at least for the forms you don´t need it (if you haven´t set your forms to display:inline...).
Positioning or floating things almost always removes the unwanted white-spaces, so for example if your .vdivider is supposed to be a vertical divider / new line, you can just use display:block on the input before it and remove that element and the comments around it.
Whitespace between elements (including newlines and tabs) cause browsers to insert spaces where there should be none.
The most elegant method that I've seen used to get around this issue is putting the > on the next line, instead of on the same line. This way, it's still legal html, and you can still keep it pretty.
For example:
<input value="Search" type="submit" />
<span class="vdivider"></span>
</form><form action="login_action.php" method="post">
<?php>
would become:
<input value="Search" type="submit"
/><span class="vdivider"></span
></form><form action="login_action.php" method="post"
><?php>