I am new to html and currently trying to indent the html tables and its contents. Lets say I have to use table and cannot use div for this question. The example 1 only uses html and example 2 uses both html and css to achieve the same task.
Question for example 1 : Is there any better way to do then this, ie without using css (See how I am using lots of for indentation)?
Question for example 2 : Am I better of using example 1 then example 2?
Which one of the two is better approach and is there any better approach then this?
Only using html (example 1)
<h1>Question & Answer</h1>
<table border="0">
<tr>
<td><input type="checkbox" name="cheese" id="cheese">
<label for="cheese">Do the test?</label>
</td>
</tr>
</table>
<td></td>
<td> </td>
<td style="vertical-align: baseline;"><INPUT name="all" type="radio"></td>
<td>Select if Sick</td>
<table border="0">
<tr>
<td> </td>
<td> </td>
<td><INPUT name="x" type="checkbox"></td>
<td>If fever enter correct temp</td>
<td>
<INPUT TYPE="text" size="8">
</td>
<tr>
<td> </td>
<td> </td>
<td><INPUT name="y" type="radio"></td>
<td>Blood Pressure in Pascal:</td>
</tr>
</table>
<table border="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td>High:</td>
<td>
<INPUT TYPE="text" size="8">
</td>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td>Low:</td>
<td>
<INPUT TYPE="text" size="8">
</td>
</tr>
</table>
now using html and css (example 2)
.ItemTable {
width: 100%;
/*border: solid 1px #dbdce3;*/
}
.ItemTable td {
width: auto;
padding-left: 20px;
/*border: solid 1px #dbdce3;*/
}
<h1>Question & Answer</h1>
<table>
<tr>
<td>
<input type="checkbox" name="cheese" id="cheese">
<label for="cheese">Do the test?</label>
</td>
</tr>
<tr>
<td>
<table class="ItemTable">
<tr>
<td>
<input type="radio" name="sick" id="sick">
<label for="sick">Select if Sick</label>
</td>
</tr>
<tr>
<td>
<table class="ItemTable">
<tr>
<td>
<input type="checkbox" name="temp" id="temp">
<label for="temp">If fever enter correct temp</label>
<input type="text" name="temp" id="temp">
<br>
<input type="radio" name="blood_press_pascal" id="blood_press_pascal">
<label for="blood_press_pascal">Blood Pressure in Pascal:</label>
</td>
</tr>
<tr>
<td>
<table class="ItemTable">
<tr>
<td>
<label for="blood_press_pascal">High:</label>
<input type="text" name="blood_press_pascal" id="blood_press_pascal">
<br>
<label for="blood_press_pascal">Low:</label>
<input type="text" name="blood_press_pascal" id="blood_press_pascal">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
The purpose of   is for non-breaking space between two words. It means that if you use a   between two words, they will be not affected for word wrapping.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<strong>qwerqwerqwerqwerqwerqwerqwerqwerqwerqwerqwerqwerqwerqwerqwerqwrqer WordAfter&nbsp</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo perferendis neque error ratione obcaecati minima, itaque dolor illo repudiandae tempore eligendi in odit inventore temporibus. Magnam eum perspiciatis impedit, quas rem culpa accusamus ut eligendi ipsum consectetur perferendis nulla molestias necessitatibus esse dolor temporibus illo accusantium nobis praesentium suscipit quod excepturi neque. Enim laboriosam rem deserunt, animi tempora voluptatibus quos mollitia soluta itaque nostrum omnis quibusdam molestias fuga deleniti reprehenderit cum, inventore odio iusto illo ea tenetur non iure facere aut. Sapiente earum eos expedita aspernatur. Quas vero provident ea vitae itaque fugit facilis, magnam recusandae repudiandae voluptas dicta sapiente?
</body>
</html>
For styling you have to use CSS, because it's the goal of CSS and if you use the classes and properties correctly. You can modify the style easily.
Finally, for your first question. Yes, there is a better way (your second example) and you already have the answers for the rest.
Some recommendations:
Use external css
Use better class names for the indentation like IdentationLevelOne
Maybe you should use the tag form instead of tables
As per the specifications:
In a visual medium, CSS tables can also be used to achieve specific layouts. In this case, authors should not use table-related elements in the document language, but should apply the CSS to the relevant structural elements to achieve the desired layout.
You better use HTML Forms
Following is a sample code without a table or divs:
<html>
<head>
<style>
fieldset {
width: 350px;
padding: 0px;
border: 1px dotted black; /*remove if border not needed */
}
input[type="text"] {
width: 70px;
height: 1.2em;
}
.bp-group input[type="text"] {
float: right;
}
p {
margin: 5px;
}
</style>
</head>
<body>
<fieldset id="test" disabled>
<legend>
<label>
<input type="checkbox" name="club" onchange="test.disabled = !checked" />
Do the test?
</label>
</legend>
<p style="text-indent: 15px">
<input type="radio" name="sick" id="sick" />
<label for="sick">Select if Sick</label>
</p>
<p style="text-indent: 30px"
><input type="checkbox" name="temp" id="temp" />
<label for="temp">If fever enter correct temp</label>
<input type="text" name="temp" id="temp" />
</p>
<p style="text-indent: 30px">
<input type="radio" name="blood_press_pascal" id="blood_press_pascal" />
<label for="blood_press_pascal">Blood Pressure in Pascal:</label>
</p>
<div class=bp-group style="width: 190px">
<p style="text-indent: 55px">
<label for="blood_press_pascal">High:</label>
<input type="text" name="blood_press_pascal" id="blood_press_pascal" />
</p>
<p style="text-indent: 55px">
<label for="blood_press_pascal">Low:</label>
<input type="text" name="blood_press_pascal" id="blood_press_pascal" />
</p>
</div>
</fieldset>
</body>
</html>
Related
Here's the landing page: https://selfbrowser.github.io/self/
I want to show a popup automatically when someone lands of webpage. But only half on popup is window is visible. I'm confused how to positon that popup on webpage.
popup.css
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.popup{
background-color: #0f72e5;
width: 450px;
padding: 30px 40px;
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
border-radius: 8px;
font-family: "Poppins",sans-serif;
display: none;
text-align: center;
z-index: 1;
opacity: 1;
}
index.html
<div class="container">
<!--POP UP FORM -->
<div class="popup">
<button id="close">×</button>
<h2>Get Free Discounts, Offer Coupon in your inbox!</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita distinctio fugiat alias iure qui, commodi minima magni ullam aliquam dignissimos?
</p>
<form
method="POST"
action="https://script.google.com/macros/s/AKfycbyaUEskqvVM1oehXSA2ClQ7ZPeCOLwNluev9GpPFGKCTkFgPYjEC7jrf8Vr5leHoWC2HA/exec">
<input name="Email" type="email" placeholder="Email" required>
<input name="Name" type="text" placeholder="Name" required>
<button type="submit">Submit</button>
</form>
</div>
</div>
Can someone please fix & position the code at right place so that full popup window loads.
I got a problem when I make a text area, the text inside is centered vertically and not taking the whole space.
.get-in-touch-info #input-area2 {
background-color: #efefef;
color: black;
font-size: 1.3em;
border: 2px solid #b0b0b0;
width: 75%;
height: 9rem;
padding-left: 0.3em;
margin-bottom: 1em;
}
<section class="row get-in-touch-row">
<div
class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 text-center align-self-center get-in-touch-info"
>
<h2>get in touch</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
quisquam, temporibus suscipit totam soluta tenetur beatae ea non eum!
Quisquam!
</p>
<input
class="input-area1"
type="text"
placeholder="Your Name"
required
/>
<input class="input-area1" type="text" placeholder="Gender" required />
<textarea
name=""
id="input-area2"
cols="10"
rows="10"
placeholder="Message"
></textarea>
<button>SEND MESSAGE</button>
</div>
</section>
As you can try it only takes online to enter text but I want to use the whole space.
How can I prevent it?
.get-in-touch-info #input-area2 {
background-color: #efefef;
color: black;
font-size: 1.3em;
border: 2px solid #b0b0b0;
width: 75%;
height: 9rem;
padding-left: 0.3em;
margin-bottom: 1em;
white-space: pre;
overflow-wrap: normal;
overflow-x: scroll;
}
}
<section class="row get-in-touch-row">
<div
class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 text-center align-self-center get-in-touch-info"
>
<h2>get in touch</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
quisquam, temporibus suscipit totam soluta tenetur beatae ea non eum!
Quisquam!
</p>
<input
class="input-area1"
type="text"
placeholder="Your Name"
required
/>
<input class="input-area1" type="text" placeholder="Gender" required />
<textarea
name=""
id="input-area2"
cols="10"
rows="10"
placeholder="Message"
></textarea>
<button>SEND MESSAGE</button>
</div>
</section>
If I understand you correctly you want the <textarea> element to not be in the center of the page.
By default textareas, inputs, and buttons are inline elements meaning that they will all happily line up in a row unless they are too long for the page and in that case they will wrap around.
Most modern one page forms elements are not inline but lined up in a column. Hence, when I am styling forms I will often make all input elements display as blocks like this.
input, textarea, button, label {
display: block;
}
Here is your original code with the new changes to the css.
.get-in-touch-info #input-area2 {
background-color: #efefef;
color: black;
font-size: 1.3em;
border: 2px solid #b0b0b0;
width: 75%;
height: 9rem;
padding-left: 0.3em;
margin-bottom: 1em;
}
input, textarea, button, label {
display: block;
}
<section class="row get-in-touch-row">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 text-center align-self-center get-in-touch-info">
<h2>Get in touch</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
quisquam, temporibus suscipit totam soluta tenetur beatae ea non eum!
Quisquam!
</p>
<input class="input-area1" type="text" placeholder="Your Name" required />
<input class="input-area1" type="text" placeholder="Gender" required />
<textarea name="" id="input-area2" cols="10" rows="10" placeholder="Message"></textarea>
<button>SEND MESSAGE</button>
</div>
</section>
I have a page where Header is position: sticky element and body scrolls. Whenever I scroll the body, everything behaves as they should — the content scrolls, header remains sticky to the viewport.
But the problem occurs in iPhone. When I focus on the text-box of a select dropdown . Virtual keyboard opens. Everything looks fine till now. However, when I scroll the content, The Header loses its stickiness and start scrolling with the content. Weren’t they position: sticky?
Is this because the device doesn’t honor any position: fixed/sticky elements, when the virtual keyboard is open?
PS: In my case I have tried using -webkit-position: sticky as many have suggested. Yet position: fixed element behaves like position: static when the native keyboard is open.
In these links you can find a demonstration of the problem
when keyboard is not opened
and
when select dropdown is open
when keyboard is open
you can see the header has gone above the viewport when the virtual keyboard is open... i have also reproduced the bug in the snippet below...
#import url('httpss://fonts.googleapis.com/css?family=Roboto');
body {
margin: 0;
padding:0;
box-sizing: border-box
}
.text{
padding: 10px
}
.signup-form {
font-family: "Roboto", sans-serif;
margin:30px auto;
background:linear-gradient(to right, #ffffff 0%, #fafafa 50%, #ffffff 99%);
}
.form-header {
background-color: #EFF0F1;
position: sticky;
top: 0;
}
.form-header h1 {
font-size: 30px;
text-align:center;
color:#666;
padding:20px 0;
border-bottom:1px solid #cccccc;
}
/*---------------------------------------*/
/* Form Body */
/*---------------------------------------*/
select{
width: 100%;
}
.form-body {
padding:10px 40px;
color:#666;
}
.form-group{
margin-bottom:20px;
}
.form-body .label-title {
color:#1BBA93;
font-size: 17px;
font-weight: bold;
}
.form-body .form-input {
font-size: 17px;
box-sizing: border-box;
width: 100%;
height: 34px;
padding-left: 10px;
padding-right: 10px;
color: #333333;
text-align: left;
border: 1px solid #d6d6d6;
border-radius: 4px;
background: white;
outline: none;
}
.horizontal-group .left{
width: 100%;
}
.horizontal-group .right{
width: 100%;
}
input{
outline: none;
cursor:pointer;
}
#range-label {
width:15%;
padding:5px;
background-color: #1BBA93;
color:white;
border-radius: 5px;
font-size: 17px;
position: relative;
top:-8px;
}
::-webkit-input-placeholder {
color:#d9d9d9;
}
/*---------------------------------------*/
/* Form Footer */
/*---------------------------------------*/
.form-footer {
clear:both;
}
/*---------------------------------------*/
/* Form Footer */
/*---------------------------------------*/
.signup-form .form-footer {
background-color: #EFF0F1;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding:10px 40px;
text-align: right;
border-top: 1px solid #cccccc;
}
.form-footer span {
float:left;
margin-top: 10px;
color:#999;
font-style: italic;
font-weight: thin;
}
.btn {
display:inline-block;
padding:10px 20px;
background-color: #1BBA93;
font-size:17px;
border:none;
border-radius:5px;
color:#bcf5e7;
cursor:pointer;
}
.btn:hover {
background-color: #169c7b;
color:white;
}
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
.form-header {
position: -webkit-sticky;
}
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
.form-header {
position: -webkit-sticky;
}
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
.form-header {
position: -webkit-sticky;
}
}
/* ----------- iPhone X ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3) {
.form-header {
position: -webkit-sticky;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>sticky header</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="form-header">
<h1>Sticky Header</h1>
</div>
<div class="text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum et modi explicabo porro laboriosam
reprehenderit facere natus ipsa iure. Consequatur, minima? Cupiditate facere tempora molestias earum
praesentium consectetur quae consequuntur?
</div>
</header>
<main class="container">
<form class="signup-form" action="/register" method="post">
<div class="form-header">
<h1>Create Account</h1>
</div>
<!-- form body -->
<div class="form-body">
<!-- Firstname and Lastname -->
<div class="horizontal-group">
<div class="form-group left">
<label for="firstname" class="label-title">First name *</label>
<input type="text" id="firstname" class="form-input" placeholder="enter your first name"
required="required" />
</div>
<div class="form-group right">
<label for="lastname" class="label-title">Last name</label>
<input type="text" id="lastname" class="form-input" placeholder="enter your last name" />
</div>
<div class="form-group">
<label for="lastname" class="label-title">age*</label>
<select class="form-input">
<option value="20-30">20-30</option>
<option value="30-40">30-40</option>
<option value="40-50">40-50</option>
</select>
</div>
</div>
<!-- Email -->
<div class="form-group">
<label for="email" class="label-title">Email*</label>
<input type="email" id="email" class="form-input" placeholder="enter your email"
required="required">
</div>
<!-- Passwrod and confirm password -->
<div class="horizontal-group">
<div class="form-group left">
<label for="password" class="label-title">Password *</label>
<input type="password" id="password" class="form-input" placeholder="enter your password"
required="required">
</div>
<div class="form-group right">
<label for="confirm-password" class="label-title">Confirm Password *</label>
<input type="password" class="form-input" id="confirm-password"
placeholder="enter your password again" required="required">
</div>
</div>
<!-- Gender and Hobbies -->
<div class="horizontal-group">
<div class="form-group left">
<label class="label-title">Gender:</label>
<div class="input-group">
<label for="male">
<input type="radio" name="gender" value="male" id="male"> Male</label>
<label for="female">
<input type="radio" name="gender" value="female" id="female"> Female</label>
</div>
</div>
<div class="form-group right">
<label class="label-title">Hobbies</label>
<div>
<label>
<input type="checkbox" value="Web">Music</label>
<label>
<input type="checkbox" value="iOS">Sports</label>
<label>
<input type="checkbox" value="Andriod">Travel</label>
<label>
<input type="checkbox" value="Game">Movies</label>
</div>
</div>
</div>
<!-- Source of Income and Income Amount -->
</div>
<div class="form-footer">
<span>* required</span>
<button type="submit" class="btn">Create</button>
</div>
<div class="form-header">
</div>
<div class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam veniam tempora, sit exercitationem
voluptatum cupiditate odio aut iste deleniti inventore iure delectus ipsa eligendi rem minima beatae
molestias ullam corporis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam veniam tempora, sit exercitationem
voluptatum cupiditate odio aut iste deleniti inventore iure delectus ipsa eligendi rem minima beatae
molestias ullam corporis.
</div>
</form>
</main>
</body>
</html>
So far, I have determined that to keep my options (the rectangles with color) to the very right, I have to have my text fill up a whole line if not more.
In my form, the different topic questions are separated into tables as shown in the code below. For some of the tables, the options go to the very right since the questions take up the whole line, but for other tables, the questions are too short so the options don't reach the far right.
To address the problem, I have tried to put in filler white space or even text whose visibility is none, but everytime, for the options to be to the very right (as I want it to be), the text has to go onto the next line.
td:first-child {
width:85%;
}
input[type=radio]{
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
.yesImage, .noImage {
background-color:navajowhite;
}
input[type=radio]:checked + .yesImage {
background-color:black;
}
input[type=radio]:checked + .noImage {
background-color:black;
}
.optionImage {
cursor:pointer;
background-size:contain;
background-repeat:no-repeat;
display:inline-block;
height:35px;
-webkit-transition: all 100ms ease-in;
-moz-transition: all 100ms ease-in;
transition: all 100ms ease-in;
}
.yesImage, .noImage {
width:50px;
}
<!DOCTYPE html>
<html>
<head>
<title> Test </title>
</head>
<body>
<form>
<fieldset>
<table>
<tr>
<td>
<p class="questions" id="question1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<td>
<input type="radio" name="question1" id="yes1" value="yes"><label class="yesImage optionImage" for="yes1">
</label>
<input type="radio" name="question1" id="no1" value="no"><label class="noImage optionImage" for="no1">
</label>
</td>
</tr>
<tr>
<td>
<p class="questions" id="question2"> Lorem ipsum. (Question 2) </p>
</td>
<td>
<input type="radio" name="question2" id="yes2" value="yes"><label class="yesImage optionImage" for="yes2">
</label>
<input type="radio" name="question2" id="no2" value="no"><label class="noImage optionImage" for="no2">
</label>
</td>
</tr>
</table>
<table>
<tr>
<td>
<p class="questions" id="question3"> Lorem ipsum. (Question 3) </p>
</td>
<td>
<input type="radio" name="question3" id="yes3" value="yes"><label class="yesImage optionImage" for="yes3">
</label>
<input type="radio" name="question3" id="no3" value="no"><label class="noImage optionImage" for="no3">
</label>
</td>
</tr>
<tr>
<td>
<p class="questions" id="question4"> Lorem ipsum. (Question 4) </p>
</td>
<td>
<input type="radio" name="question4" id="yes4" value="yes"><label class="yesImage optionImage" for="yes4">
</label>
<input type="radio" name="question4" id="no4" value="no"><label class="noImage optionImage" for="no4">
</label>
</td>
</tr>
</table>
<table>
<tr>
<td>
<p class="questions" id="question5"> Lorem ipsum. (Question 5)<span id="whitespace"> filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text</span> </p>
</td>
<td>
<input type="radio" name="question5" id="yes5" value="yes" class="skippedQuestions"><label class="yesImage optionImage" for="yes5">
</label>
<input type="radio" name="question5" id="no5" value="no" class="skippedQuestions"><label class="noImage optionImage" for="no5">
</label>
</td>
</tr>
<tr>
<td>
<p class="questions" id="question4"> Lorem ipsum. (Question 6) </p>
</td>
<td>
<input type="radio" name="question6" id="yes6" value="yes" class="skippedQuestions"><label class="yesImage optionImage" for="yes6">
</label>
<input type="radio" name="question6" id="no6" value="no" class="skippedQuestions"><label class="noImage optionImage" for="no6">
</label>
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
[Please keep in mind this is an example of my problem.]
Please go full page when using the snippet so my problem can be seen more easily.
This is what I want (without the extra lines between the questions):
Here's the solution of your problem. I added some properties in my css in the solution and marked these by comments. Hope it will help you.
table { /*Add this block in your css*/
width: 100%; /*Newly Added*/
}
td:first-child {
width:85%;
}
td:nth-child(2) { /*Newly Added*/
width:15%; /*Newly Added*/
}
input[type=radio]{
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
display: none; /*Newly Added*/
}
.yesImage, .noImage {
width: 30% !important; /*Newly Added*/
margin-right: 5%; /*Newly Added*/
background-color:navajowhite;
}
input[type=radio]:checked + .yesImage {
background-color:black;
}
input[type=radio]:checked + .noImage {
background-color:black;
}
.optionImage {
cursor:pointer;
background-size:contain;
background-repeat:no-repeat;
display:inline-block;
height:35px;
-webkit-transition: all 100ms ease-in;
-moz-transition: all 100ms ease-in;
transition: all 100ms ease-in;
}
.yesImage, .noImage {
width:50px;
}
<!DOCTYPE html>
<html>
<head>
<title> Test </title>
</head>
<body>
<form>
<fieldset>
<table>
<tr>
<td>
<p class="questions" id="question1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<td>
<input type="radio" name="question1" id="yes1" value="yes"><label class="yesImage optionImage" for="yes1">
</label>
<input type="radio" name="question1" id="no1" value="no"><label class="noImage optionImage" for="no1">
</label>
</td>
</tr>
<tr>
<td>
<p class="questions" id="question2"> Lorem ipsum. (Question 2) </p>
</td>
<td>
<input type="radio" name="question2" id="yes2" value="yes"><label class="yesImage optionImage" for="yes2">
</label>
<input type="radio" name="question2" id="no2" value="no"><label class="noImage optionImage" for="no2">
</label>
</td>
</tr>
</table>
<table>
<tr>
<td>
<p class="questions" id="question3"> Lorem ipsum. (Question 3) </p>
</td>
<td>
<input type="radio" name="question3" id="yes3" value="yes"><label class="yesImage optionImage" for="yes3">
</label>
<input type="radio" name="question3" id="no3" value="no"><label class="noImage optionImage" for="no3">
</label>
</td>
</tr>
<tr>
<td>
<p class="questions" id="question4"> Lorem ipsum. (Question 4) </p>
</td>
<td>
<input type="radio" name="question4" id="yes4" value="yes"><label class="yesImage optionImage" for="yes4">
</label>
<input type="radio" name="question4" id="no4" value="no"><label class="noImage optionImage" for="no4">
</label>
</td>
</tr>
</table>
<table>
<tr>
<td>
<p class="questions" id="question5"> Lorem ipsum. (Question 5)<span id="whitespace"> filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text</span> </p>
</td>
<td>
<input type="radio" name="question5" id="yes5" value="yes" class="skippedQuestions"><label class="yesImage optionImage" for="yes5">
</label>
<input type="radio" name="question5" id="no5" value="no" class="skippedQuestions"><label class="noImage optionImage" for="no5">
</label>
</td>
</tr>
<tr>
<td>
<p class="questions" id="question4"> Lorem ipsum. (Question 6) </p>
</td>
<td>
<input type="radio" name="question6" id="yes6" value="yes" class="skippedQuestions"><label class="yesImage optionImage" for="yes6">
</label>
<input type="radio" name="question6" id="no6" value="no" class="skippedQuestions"><label class="noImage optionImage" for="no6">
</label>
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
just try above make the tales with width 100%.
table{
width: 100% !important;
}
The page contains a loginform which is held by the div "login". In IE9 that div is displayed twice.
I studied the CSS and HTML and source in several browsers. I can't find any reason for IE to display the div twice.
The site can be found here: http://atbfacturen.wietze.uwvakman.nl:81/
It's unclear to me why IE does this.
HTML:
<body>
<div id="header">
<img src="/img/atblogo_black.png" alt="Logo ATB Facturen" />
<div id="headerOptions">
Tuesday 06 September 2011 | Hulp
</div>
</div>
<form action="/" id="UserLoginForm" method="post" accept-charset="utf-8">
<div style="display:none;">
<input type="hidden" name="_method" value="POST" />
</div>
<div id="login">
<table>
<tr>
<td><strong>Gebruikersnaam</strong></td>
<td><input name="data[User][username]" type="text" style="width:150px" maxlength="50" id="UserUsername" /></td>
</tr>
<tr>
<td><strong>Wachtwoord</strong></td>
<td><input type="password" name="data[User][password]" style="width:150px" id="UserPassword" /></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Aanmelden" /></td>
</tr>
</table>
</form>
</div>
</body>
CSS:
#login {
width: 300px;
margin-left: auto;
margin-right: auto;
margin-top: 200px;
padding: 25px;
background-color: #efefef;
border: 1px solid #cccccc;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
}
you are closing your div inscie of a <tr> element when the <div> element was opened outside of the <table> as a whole.
IE is probably trying to clean up your markup a bit for you due to what it considers illegal nesting of tags
If you would take time and indent your HTML properly, you'd see your misaligned tags immediately. Also, running your website through HTML validator tends to help in these cases.
In fact, I'd advise to always run your webpages through the validator. I can hurt your feelings, but more often than not it will show you many small things that you missed. You don't have to fix all of them (sometimes there are good reasons for things to be the way they are), but it never hurts to fix as many as possible.
<body>
<div id="header">
<img src="/img/atblogo_black.png" alt="Logo ATB Facturen" />
<div id="headerOptions">
Tuesday 06 September 2011 | Hulp
</div>
</div>
<form action="/" id="UserLoginForm" method="post" accept-charset="utf-8">
<div style="display:none;">
<input type="hidden" name="_method" value="POST" />
</div>
<div id="login">
<table>
<tr>
<td><strong>Gebruikersnaam</strong></td>
<td><input name="data[User][username]" type="text" style="width:150px" maxlength="50" id="UserUsername" /></td>
</tr>
<tr>
<td><strong>Wachtwoord</strong></td>
<td><input type="password" name="data[User][password]" style="width:150px" id="UserPassword" /></td>
</tr>
<tr>
<td> </td>
<td>
<div class="submit">
<input type="submit" value="Aanmelden" />
</div>
</form>
</td>
</tr>
</table>