I have a table with a tr and two tds. First td contains an input(text), the second another input (image). The second input is supposed to be a button. I've set cellpadding and cellspacing to zero so that the text input and the image button can be attached with no spaces in between. This works fine in IE and Firefox but not in Chrome. Chrome keeps leaving a few pixels of space between the text input and the button. I tried using CSS but nothing seems to work. Any idea what Chrome's problem might be?
<head>
<style type="text/css">
.search{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #4D4D4D;
border: 1px solid #CCCCCC;
height: 21px;
outline: none;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<form method="post">
<tr><td><input type="text" size="30" class="search"></td>
<td><input type="image" src="button.gif" name="submit" id="submit" width="77px" height="21px"></td></tr>
</form>
</table>
</body>
First off, you need to move the <form> tag outside of the <table> you're going to cause yourself trouble that way.
Next, you need to set the padding on your tds to 0:
form td {
padding: 0;
}
That should get rid of any extra spacing you're seeing.
A stackoverflow user said:
Just mentioning that cellpadding and cellspacing have been made obsolete, and I received a shock when Google Chrome 23 didn't support it.
Anyway I can't find any reference on the internet!
For what you want, try border-collapse: collapse on the table via css.
Also, you might want to look into other means as using a table for layout is not the way forward these days and it sounds like that's what you're doing.
Related
I have created a couple of ASP.Net (aspx) pages which are supposed to run with existing ASP pages in a website.
Both ASP and ASP.Net pages use the same css file. In both the pages, there are headings which are styled using tag from css file.
The problem is that headings in .asp and .aspx pages are rendering in different size in Internet Explorer. It works fine in FF and Chrome.
Please suggest some workaround for this, as I have to make my .aspx pages similar in look and feel to the existing .asp pages.
Thanks in advance!
Updated:
I can paste a part of css file here, since it is a large file:
TH, FONT, TD, P, B, I, STRONG, U, EM, BLOCKQUOTE, LI, OL, CAPTION, DL, DT, DD,select,pre {font-size:11px;font-family:Arial, Helvetica, sans-serif;}
body{
font-family: Arial, Helvetica, sans-serif;
color: #000000;
line-height: 1.166;
margin: 0px;
padding: 0px;
}
h2{
font: bold 150% Arial, Helvetica, sans-serif;
color: #000000;
margin: 0px;
padding: 0px;
}
The aspx page (heading part) looks like this:
<table style="left: 35px; position: static; top: 231px">
<tr>
<td style="height: 85px; width: 2087px;">
<h2><asp:Localize id="lblHeading" runat="server" Text="Welcome to XYZ" meta:resourcekey="lblHeading"></asp:Localize>
</h2>
</td>
</tr></table>
ASP page has a simple tag:
<h2>Welcome to XYZ</h2>
Updated:
The weirdest thing happened. I tried stripping down the css file and started adding each style one by one, and refreshing the page to check which styles are getting applied to the heading. I noticed that if I remove the first line of css (keeping all the other styles intact):
<STYLE type="text/css">
then the headings look same in both asp and aspx pages. As soon as I add the above line in css file, the heading in aspx page becomes bigger.
Any comments as to why this is happening?
Make sure you are using the proper and the same Doctype at the top of the ASP and ASPX pages. You can also use the developer tools in FF and in IE to make sure that the same styles are applied to headings on ASP and ASPX pages in both browsers. What version of IE are you using?
You might be interested in section about w3schools recommendation for font-size
The suggested way, as I understand is to declare in body:
body{
font-size: 100%; // which default is 16px
}
and everywhere else use em (instead of % or px), as explained in the link.
So in your header you should not have 150%, but instead DesiredSizeInPx divded by 16, for example if you want to have 24px you write 24/16em, which is 1.5em
The problem could be that two different styles are being applied.
The ASP page is getting the straight h2 style
h2{
font: bold 150% Arial, Helvetica, sans-serif; etc.
Whereas the ASPX might be getting another style
id="lblHeading"
Check to see if #lblHeading is giving a different size.
I have an application that has an initial login page that
has a user name and password input box.
This page works fine in IE 7, Safari , Firefox 4 & 5 but not
in IE 8 and 9. In IE 8/9 the user name and password display with
different size input boxes when you adjust the zoom percent.
While doing some testing I noticed in IE 8/9 the Document Mode is in Quirks Mode.
So I tried setting the Document Mode in IE 9 to IE 9 Standards mode and
the page displays correctly. However in IE 8 it has no affect.
The only thing I have been able to get to work is to redefine
the font-family in the style sheet for the input boxes. This works
for IE 7,8 and 9 and also Safari and Firefox.
I have also tried setting the DOCTYPE and meta tags but none of those
combinations seem to work in IE 8.
I included a test stylesheet and html below that reproduces
the problem.
Does anyone know why IE 8/9 would require this ? Is there another
way to handle this other than redefining the font-family ?
Thank you.
The stylesheet below works in IE 7, Safari and Firefox 4 & 5. In IE 8/9 it causes
the user name and password to display with different lengths unless I use the commented
out line:
stylesheet:
body { font-size: x-small; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;}
form { font-size: 100%; }
input { font-size: 110%; }
/*input { font-size: 110%; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; }*/
INPUT.TEXT { font-size: 100%; }
select { font-size: 110%; }
textarea { font-size: 110%; }
html:
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="./mystyle.css">
</head>
<body>
<table>
<tr><td>User Name: </td><td><input type=text name=username size=20 value=""></td></tr>
<tr><td>Password: </td><td><input type=password name=pass size=20></td></tr>
<tr><td> </td><td><input type=submit value=Login></td></tr>
</table>
</body>
</html>
Your input length is based on your font-size. But many form element do not inherit your font-family.
Test it with a funky font (Comic Sans MS) and a big font-size.
Related (except the first answer is wrong, input type do not inherit font-family).
You could set your input size in CSS (width:200px).
Little note : INPUT.TEXT points to no element. .text is a class.
I have input and label fields:
<label class="adm" for="UserName">User name</label>
<input class="adm" id="UserName" name="UserName" size="30" type="text" value="" />
and CSS:
body,html { font-family: Verdana,Arial,Helvetica,sans-serif; margin:0; padding:0; color: #111;}
label.adm { font-size:0.9em; margin:0 0 3px 3px; display: block;}
input.adm { font-size:0.9em; margin:0 0 3px 3px; }
When the code opens up in Firefox the fonts are not the same. Firebug shows that both "should" inherit and when I look at computed it shows the label uses Verdana. However the input shows it uses "MS Shell Dlg".
Can anyone explain what's happening and why it doesn't seem to obey the normal CSS rules?
It does not inherit by default but you can set it to inherit with css
input, select, textarea, button{font-family:inherit;}
demo: http://jsfiddle.net/gaby/pEedc/1/
Form items (inputs/textarea/etc) don't inherit font information. You'll need to set the font-family on those items.
Three years later, I'm finding it strange <input> elements of types reset, submit, and button don't inherit font-family in Chrome or Safari. I discovered they would not receive padding either.
But when I mess with certain properties, like background, border, or this strange appearance property, then font-family and padding have effect, but the native look and feel of the button is lost, which is not a problem if you are completely restyling the buttons.
If you want a native looking button, with inherited font-family, use the <button> element instead of <input>.
See Codepen.
I've had the same problem. What worked for me was adding the style directly to the input element in the html. I'm coding in React fyi.
<input style={{fontFamily: "YOUR_FONT_CHOICE_HERE"}} />
This question is 10 years old, and some people coming to this recently may find that adding the right <meta> information at the top of the HTML page will fix similar issues experienced on mobile devices - try:
<meta name="viewport" content="width=device-width, initial-scale=1">
MDN has a good guide to what the viewport meta information does
I have a form of inputbox and i need to write a good selector. I need to assign attributes only to what is inside inputbox. form looks like this:
<label></label>
<input type="text" disabled="disabled" name="xxx" size="100" value="abcd" class="yyy" />
however, i have more elements of this class on my page.
what is the best way to go?
As you've added a class "yyy", you can just go ahead and do the following:
<style type="text/css">
.yyy {
font-size: 14px;
font-family: Arial;
color: #FF0000;
}
</style>
You can of course paste that HTML code above and plant it in your HTML document, but it's best practice to keep HTML and CSS away from each other.
So add this code in your head tag:
<link href="some/style.css" type="text/css" rel="stylesheet" />
And inside of style.css:
.yyy {
font-size: 14px;
font-family: Arial;
color: #FF0000;
}
You could use either input.yyy {}, which will work on all browsers but if you have more than one input element on the page with a class of yyy, it will select all of them.
An alternative is input[name=xxx], using a new CSS3 selector, but this won't work in older browsers, so it depends how important it is that the style works everywhere.
I have a DIV like the following:
<td>
<DIV>
<script type="text/javascript">
// link to some js
</script>
</DIV>
</td>
The .js renders the latest article abstract inside the div. However it renders it in Calibri 10px.
I want that any content inside the DIV should be rendered as Verdana 10px. I am using a 3rd party .js so have no control over it. How to I force the DIV to render the content the way I want?
If the elements the Javascript is adding have their own style declarations, then you will need to use more Javascript to override them.
Otherwise, You should be able to give your div a class, apply your styles to that class, then they should propagate through to any contents inside.
e.g.
css:
.myClass {
font-family: Verdana;
font-size: 10px;
}
html:
<td>
<div class="myClass">
<script type="text/javascript">
// link to some js
</script>
</div>
</td>
If that doesn't work, change the CSS to this:
.myClass * {
font-family: Verdana;
font-size: 10px;
}
If the javascript only puts content and no style, you could do this:
<td>
<DIV style='font-family: Verdana; font-size: 10px;'>
<script type="text/javascript">
// link to some js
</script>
</DIV>
</td>
You need to check what elements the javascript generates. Use firebug in FireFox or "Inspect element" in Chrome.
When you know the element, specify something like this in your stylesheet.
body table tr td div elementOrClassNameThatYouFound {
font: verdana 10px;
}
You could also try something in your CSS like:
.myClass {
font-family: Verdana !important;
font-size: 10px !important;
}