What the hell is that? I found there is some problem with padding in chrome with this elements but even if set the padding to 0 in both (textarea and input) they are not "looking same" width in chrome. The code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title>WTF</title>
<style>
input {
width: 200px;
padding: 0px;
}
textarea {
width: 200px;
padding: 0px;
}
table {
background-color: blue;
}
</style>
</head>
<body>
<form>
<table>
<tr><td><input type="text" /></td></tr>
<tr><td><textarea></textarea></td></tr>
</table>
<form>
</body>
</html>
If you add border:0, it fixes itself in chrome. See fiddle: http://jsfiddle.net/Q96yN/2/
Related
Edited: I was trying to make a chat page that has a message textbox and a button to send inside a form element. Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>A</title>
<style>
body{height: 100vh;}
form{
line-height: 40px;
position: absolute;
}
</style>
</head>
<body>
<form name="form">
<input type="text" placeholder="A message goes here"/>
<button>Send</button>
</form>
<script>
var search = window.screen.height - 40;
document.form.style.top = search + "px";
</script>
</body>
</html>
But the form goes more than 100vh
There is no need for js or absolute positioning...you just need to set it up the way you need to look at it ...when I said use display: flex that needs to be inputed in the container box and your web content should go on a separate section outside your form like so:
body {height: 100%}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {flex: 1;}
form {
width: 100%;
height: 40px;
background: #000;
}
I copy your code and added it here: https://codepen.io/izzy_zeke/pen/OqVOVL
When I use <!DOCTYPE html> my textfield is larger (about 257px instead of 250px). Does anyone have any idea why this would be? I couldn't find anything online.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form>
<input type='text' style="width:250px">
<div style='width:250px;background-color:#00FF00'> </div>
</form>
</body>
</html>
Thanks in advance!
Try this one
.inp {
box-sizing:border-box;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form>
<input type='text' style="width:250px" class= "inp">
<div style='width:250px;background-color:#00FF00'> </div>
</form>
</body>
</html>
That is the browsers default styling, from chrome dev:
input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
cursor: text;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}
So border takes 2*2px and padding taking 2*1px equal to 256px
I am new to HTML , CSS and I want to add two vertical lines on the both sides (left and right) of the html page.
A bit of help would be very much appreciated...Thanks very much indeed
Edit: the code has now been added
<!doctype html>
<html lang="en">
<head>
<style>
#button1{
width: 300px;
height: 40px;
}
#button2{
width: 300px;
height: 40px;
}
#link1{
font-size: 33px;}
#pic1 {
position:fixed;
left:30%;
top:30%;
margin-left:-382px /*half the width*/
margin-top:-370px /*half the height*/
}
</style>
<meta charset="utf-8">
<meta name="Homepage" content="Starting page for the survey website ">
<title> Survey HomePage</title>
</head>
<body>
<img src="kingstonunilogo.jpg" alt="uni logo" style="width:180px;height:160px">
<button type="button home-button" id="button1" >Home</button>
<button type="button contact-button" id="button2">Contact Us</button>
LogIn
<img src="homepagepic.jpg" alt="homepagepic" id="pic1" style="width:400px;height:350px">
</body>
</html>
You can try creating a div container in your body and setting the borders, something along these lines:
<body style="width:100%">
//you can set the div-width to 100% too, I'm setting it to 95% so you can see it.//
<div style="width:95%;border-left:1px solid #000;border-right:1px solid #000;">
Page contents go here
</div>
</body>
Preview: http://jsfiddle.net/pbj4xxh0/
like i said in the title, I'm trying to match the menu header, which is a picture, on top of an ul that has a matching background picture with the menu header. No matter what i tried, there is still a gap between the header and the ul. Sorry if i sound confusing, here's the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul {
margin: 0;
padding: 10px 0px 25px 45px;
background:url(ul.png) no-repeat 0 100%;
list-style-image:url(li.png);
}
table td {
display: table-cell;
vertical-align: top;
}
ul li a:hover{
color: red;
padding-left: 10px;
}
img {
position: relative;
}
</style>
</head>
<body>
<table width="313" border="0">
<tr>
<td width="303" height="257"><img src="h3.png" width="224" height="35" alt=""/><ul>
<li>Future</li>
<li>Health</li>
<li>Life</li>
<li>Money</li>
<li>Personal</li>
<li>Phobias</li>
</ul></td>
</tr>
</table>
</body>
</html>
To avoid all of those "gaps problems", think about including the reset.css stylesheet made by Eric A.
You can grab it here --> http://meyerweb.com/eric/tools/css/reset/reset.css
Include it before your <style> by writing :
<link rel="stylesheet" type="text/css" media="screen" href="YOUR_PATH/css/reset.css" />
I have a pop-up built using Jquery.Block-UI and ajax.. and i have no issues with the functionality but the thing is CSS, when i checked in Chrome there are no CSS problem... But when it comes to IE and FIREFOX its worse.. the Design of pop-up is gone... please take a look at images below
IN CHROME : WORKS FINE:
IN IE-8
IN FIREFOX:
Here is the Code:
In head tag:
<link href="style.css" rel="stylesheet" type="text/css" />
Content:
<table class="quot-popup" cellpadding="0" cellspacing="0">
<tr><td><div style="float: right;"><input type="image" style="" src="../Webimages/x.png" onclick="closePop();"/></div></td></tr>
<%if(navLevel.trim().equalsIgnoreCase("0")){%>
<tr><td class="poptd">Are you a Registered User please Sign in to Quote List, Or Sign Up to Register.</td></tr>
<%}else if(navLevel.trim().equalsIgnoreCase("1")){%>
<tr><td class="poptd">Are you a Registered User please Sign in to Quote List, Or Sign Up to Register.</td></tr>
<%}%>
<tr><td class="poptd">Or</td></tr>
<tr><td class="poptd">You want to continue without Register, Click Here to Quote List.</td></tr>
</table>
<table id="askEmail" class="quot-mailPopup" cellpadding="0" cellspacing="0">
<tr><td class="mailtd1">Enter your Email Address : </td>
<td class="mailtd2"><input type="text" id="anonymousEmailId" name="anonymousEmailId" value=""/></td>
<td class="mailtd3"><input type="image" src="../Webimages/go-btn.jpg" onclick="sbtEmail(); return false;"/></td></tr>
</table>
CSS:
table.quot-popup{width: 100%; font-size: 11px; font-weight: bold;}
table.quot-popup td.poptd{padding-top:6px;padding-bottom:6px; text-align: center; vertical-align:middle; color:#0ea05f;}
table.quot-popup td.poptd A:hover{color:#99CF99;}
table.quot-popup{width: 100%; font-size: 11px; font-weight: bold;}
table.quot-popup td.poptd{padding-top:6px;padding-bottom:6px; text-align: center; vertical-align:middle; color:#0ea05f;}
table.quot-popup td.poptd A:hover{color:#99CF99;}
table.quot-mailPopup{width: 100%; font-size: 11px; font-weight: bold; display: none; text-align: center;}
table.quot-mailPopup td.mailtd1{width: 40%; padding-top:6px;padding-bottom:6px; text-align: center; vertical-align:middle; color:#0ea05f;}
table.quot-mailPopup td.mailtd2{width: 50%; padding-top:6px;padding-bottom:6px; padding-right:3px; text-align: center; vertical-align:middle; color:#0ea05f;}
table.quot-mailPopup td.mailtd2 input{width: 250px; height:18px;}
table.quot-mailPopup td.mailtd3{padding-top:6px;padding-bottom:6px; text-align: center; vertical-align:middle; color:#0ea05f;}
Html: pop up will be called on click List
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache" />
<link href="Webcss/style.css" rel="stylesheet" type="text/css" />
<link href="Webcss/contentslider.css" rel="stylesheet" type="text/css" />
<link href="Webcss/jquery.jcarousel.css" rel="stylesheet" type="text/css" />
<link href="Webimages/favicon.ico" rel="shortcut icon" />
<script type="text/javascript" src="Webjs/jquery.js"></script>
<script type="text/javascript" src="Webjs/jquery.blockUI.js"></script>
<script type="text/javascript" src="Webjs/ajax.js"></script>
<script type="text/javascript">
//------------------------------------- For Pop-Up
$(function() {
$('#QutLstLnkId').click(function() {
var qMailId = $("#qtMailId").val();
qMailId = $.trim(qMailId);
if(qMailId == "null" || qMailId == ""){
$.blockUI({
message: $('#messageDispDiv'),css: {
width:'530px',
height:'auto',
top: ($(window).height() - 110) /2 + 'px',
left: ($(window).width() - 530) /2 + 'px'
} });
$("#messageDispDiv").block({css:{border: 'none',padding: '15px',backgroundColor: '#000','-webkit-border-radius': '10px','-moz-border-radius': '10px',width:'200px',opacity: .5,color: '#0A7A48'}});
enqueue("web/quoteList.jsp?oper=QUOTLSTAUTH&pg=0",processAjax);
}else{window.location.href="web/createQuoteList.jsp";}
});
});
function processAjax(s){
$("#messageDispDiv").unblock();
$("#messageDispDiv").html(s);
}
function closePop(){
$.unblockUI();
}
function showMail(){
$("#askEmail").show();
}
//------------------------------------- For Pop-Up
</script>
</head>
<body>
<!-- PopUp div -->
<div id="messageDispDiv" style=" display: none; width:530px; min-height: 110px; border: 1px solid #0A7A48; text-align:center;">
<div id="askEmailId" style="display:none;">
</div>
</div>
<!-- PopUp div -->
</body>
</html>
Thank you.
Dude...your code... (sorry, it's hard to read).
I'm betting you're having a CSS issue because of the way you're shoehorning it into the table. Tables, and TDs look like DIVs, but they absolutely are not. I'm betting this is why Chrome seems to be working fine, but FF, and IE are snubbin' ya.
So - could you just simplify your design, and make things easier?:
<table id="popup"> <!-- this could/should be a div //-->
<tr>
<td align="center">
<img src="close.png" />
<p>Are You Registered...Register</p>
<p>Or</p>
<p>Or</p>
<p>You want to continue....list.<br />
Enter your Email Address : <input></p>
</td>
</tr>
</table>
CSS (for example):
#popup { border:4px solid gray; position:relative; }
#popup #closer { position:absolute; top:10px; right:10px; }
p { font: 1.1em/1.5 sans-serif; }
...etc. You get the gist - it's simple.
For a single-cell table, you're showing 11 lines of CSS. It's my belief that when my CSS starts to bloat like that...my code's gone awry somewhere - time to refactor.
You've strayed too far from semantic markup. You'll spend more time working up a hack then to just simplify your code design.
Solved.... Thank you all... there was nothing wrong with Css or Code or Browser... it was with Apache server cache... cleared Apache cache and its good in all browsers...