I have a basic page which is used in an iFrame on an intranet site. It is generated using ASP.NET, the generated source is as follows:
<!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><title>
</title><link rel="Stylesheet" type="text/css" href="css/EDT.css" />
<script type="text/javascript" language="javascript" src="includes/ADIServices.js"></script>
</head>
<body>
<form name="form1" method="post" action="ADIServices.aspx?type=2&typename=contact&id=%7bA2755D17-67FF-4539-8AAE-327038D5E618%7d&orgname=RSAADI&userlcid=1033&orglcid=1033" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTg3NDY0NDE0Mg8WBh4IdXNlcm5hbWUFEG5rZW5ueUB2dWxjYW4uaWUeCWhhc2FjY2Vzc2ceBWFkaWlkKClYU3lzdGVtLkd1aWQsIG1zY29ybGliLCBWZXJzaW9uPTIuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49Yjc3YTVjNTYxOTM0ZTA4OSRhMjc1NWQxNy02N2ZmLTQ1MzktOGFhZS0zMjcwMzhkNWU2MTgWAgIDD2QWAgIDDw8WAh4EVGV4dAUQbmtlbm55QHZ1bGNhbi5pZWRkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYDBQ9yYlVzZXJBY2Nlc3NZZXMFDnJiVXNlckFjY2Vzc05vBQ5yYlVzZXJBY2Nlc3NOb1LW6lJTh7HRxc/r9DmBabkk6Q+U" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBwKT+7PEDAKl1bK4CQL62KvxCQLU6/3GAwLfl6DKCAK5ieyiCQLHst2vAuS7asmw5PqvB/FNK/KEPjCqeGEz" />
</div>
<div id="content">
<div id="username">
<span id="lblUsername" class="label">Username</span>
<input name="txtUsername" type="text" value="nkenny#xxxxxxx.xx" id="txtUsername" disabled="disabled" class="textbox" />
</div>
<div id="access">
<span id="lblUserAccess" class="label">Portal Access</span>
<div id="useraccessradiobuttons">
<span class="radiobutton"><input id="rbUserAccessYes" type="radio" name="rblUserAccess" value="rbUserAccessYes" checked="checked" /><label for="rbUserAccessYes">Yes</label></span>
<span class="radiobutton"><input id="rbUserAccessNo" type="radio" name="rblUserAccess" value="rbUserAccessNo" /><label for="rbUserAccessNo">No</label></span>
</div>
</div>
<div id="passwordchange">
<div id="newpassword">
<span id="lblNewPassword" class="label">New Password</span>
<input name="txtNewPassword" type="text" id="txtNewPassword" class="textbox" />
</div>
<div id="newpasswordrepeat">
<span id="lblRepeatPassword" class="label">Repeat Password</span>
<input name="txtRepeatPassword" type="text" id="txtRepeatPassword" class="textbox" />
</div>
<a id="lnkShowChangePasswordFields" class="link" OnClick="javascript:ShowHidePasswordFields()">Change Password</a>
</div>
</div>
<div id="submit">
<input type="submit" name="cmdSave" value="Save" onclick="return ValidateFields();" id="cmdSave" />
<span id="lblStatus"></span>
</div>
</form>
</body>
</html>
I have a stylesheet assoiciated with this:
body
{
background-color:#EAF3FF;
font-family:Tahoma;
font-size:11px;
}
input
{
font-family:Tahoma;
font-size:11px;
}
#content
{
width:350px;
}
.label
{
width:30%;
height:5px;
position:relative;
top:7px;
float:left;
}
.radiobutton
{
width:21%;
height:5px;
position:relative;
top:7px;
float:left;
}
.link
{
width:50%;
height:5px;
position:relative;
top:27px;
float:left;
color:blue;
text-decoration:underline;
}
.textbox
{
width:70%;
position:relative;
float:right;
}
#cmdSave
{
position:relative;
float:left;
top:50px;
left:-177px;
}
#lblStatus
{
position:relative;
float:left;
left:-170px;
top:53px;
color:red;
}
#useraccessradiobuttons
{
width:100%;
position:relative;
}
#newpassword
{
display:none;
position:relative;
top:22px;
}
#newpasswordrepeat
{
display:none;
position:relative;
top:22px;
}
When some users are browsing to this page the Save button is not appearing. I first came across this issue and released that Compatibility mode was turned on, when I turned it off the issue disappeared. This was fine, I instructed users to ensure that compatibility mode was off.
However now some users are reporting that the button is not appearing, even when compatibility mode is off. Users are using IE8.
I know there is a meta tag that can force the browser to emulate IE7/8/9, is this the way I should go, and if so, which of these versions should I be using based on the code above? It can be assumed that only IE will be used
Thanks in advance,
Neil
EDIT
Based on the answer given below I modified my stylesheet as follows:
body
{
background-color:#EAF3FF;
font-family:Tahoma;
font-size:11px;
padding-top: 5px;
padding-left:5px;
}
input
{
font-family:Tahoma;
font-size:11px;
}
#useraccessradiobuttons
{
width:60%;
display:inline;
}
#content
{
width:350px;
padding-bottom:10px;
}
#username
{
padding-bottom:7px;
}
#newpassword
{
padding-bottom:4px;
}
#passwordchange
{
padding-bottom:7px;
}
#access
{
width:100%;
padding-bottom:7px;
}
.label
{
float:left;
width:30%;
}
.radiobutton
{
padding-right:30px;
}
.link
{
width:50%;
height:5px;
color:blue;
text-decoration:underline;
}
.textbox
{
width:60%;
}
#cmdSave
{
width:60px;
}
#lblStatus
{
color:red;
}
#useraccessradiobuttons
{
display:inline;
}
#newpassword
{
display:none;
}
#newpasswordrepeat
{
display:none;
}
You seem to have a lot of unnecessary styling applied. The problem seems to be the
left:-177px;
on the #cmdSave.
However, a lot more of your styling can be removed to whilst keeping the same layout http://jsfiddle.net/jfsw4/6/
Then you can format more with margins and padding.
Related
I am having difficulty with this one. I am trying to change the border around the entire div (e.g. #option1) instead of just the text. As you can see, when you click each radio button it changes the border around the option text, but not the entire div. Any suggestions?
JSFIDDLE: https://jsfiddle.net/1hdv2n3h/1/
<div id="wine_club_selection">
<div id="option1">
<p><input type="radio" name="club_type" checked="checked" value="option 1"><br/>
<span class="bold_text">Option 1</span><br/>
3 Bottles<br/>
15% Discount<br/></p></div>
<div id="option2">
<p><input type="radio" name="club_type" value="option 2" ><br />
<span class="bold_text">Option 2</span><br />
6 Bottles<br />
20% Discount<br/>
</p></div>
<div id="option3">
<p><input type="radio" name="club_type" value="option 3"><br>
<span class="bold_text">Option 3</span><br />
12 Bottles<br />
25% Discount<br />
</p></div>
</div>
/* CSS: */
#wine_club_selection {
height:200px;
width:800px;
}
#option1 {
float:left;
width:266px;
}
#option1 p {
text-align:center;
}
#option2 {
float:left;
width:266px;
}
#option2 p {
text-align:center;
}
#option3 {
float:right;
width:266px;
text-align: center;
}
#option3 p {
text-align:center;
}
.bold_text {
font-weight:800;
}
.billing_table input {
font-size:18px;
color:#620101;
}
#option1 input[type="radio"]:checked ~ *{
border: thin solid #F00;!important;
}
#option2 input[type="radio"]:checked ~ *{
border: thin solid #F00;!important;
}
#option3 input[type="radio"]:checked ~ *{
border: thin solid #F00;!important;
}
I'm a bit anal-retentive about good-quality HTML, so I tidied yours up a little to make it more semantically-correct.
You can't use CSS to select the "parent" of an element -- only "sibling" elements that come after it -- so you have to sort-of fake it.
.options {
height:200px;
width:800px;
text-align:center;
}
.options li{
display:inline-block;
width:30%;
}
.options p{
margin:0;
}
.options header p{
font-weight:bold;
}
.options li div{
padding-top:1em;
}
.options li input{
position:relative;
top:2em;
}
.options li input:checked+div{
border:1px solid #f00;
}
<ul class="options">
<li>
<input type="radio" name="option" checked />
<div>
<header><p>Option 1</p></header>
<p>3 bottles</p>
<p>15% discount</p>
</div>
</li>
<li>
<input type="radio" name="option" />
<div>
<header><p>Option 2</p></header>
<p>6 bottles</p>
<p>20% discount</p>
</div>
</li>
<li>
<input type="radio" name="option" />
<div>
<header><p>Option 3</p></header>
<p>12 bottles</p>
<p>25% discount</p>
</div>
</li>
</ul>
I have been attempting to solve this phenomina using style="overflow: hidden; padding-right: .5em;". The search button still appears at the bottom left and creates an "l" shape. If any has ideas as to why this happens it would help
#searchbartop{
margin:auto;
vertical-align:middle;
position:absolute;
margin-left:25%;
}
#searchbartoptext{
width:600%;
}
<form id="searchbartop">
<input type="text" placeholder="Search..." id="searchbartoptext" style="overflow: hidden; padding-right: .5em;" required>
<input type="button" style="width: auto;" value="Search">
</form>
You can try like this: Demo
#searchbartop {
margin:auto;
vertical-align:middle;
margin-left:25%;
width:75%;
}
#searchbartop input[type=text] {
width:70%;
padding-right: .5em;
display:block;
float:left;
}
#searchbartop input[type=button] {
width:20%;
display:block;
float:left;
}
HTML:
<form id="searchbartop">
<input type="text" placeholder="Search..." required/>
<input type="button" value="Search" />
</form>
You may have to set the search button to position:absolute; as is the case in this Fiddle
i am struggling to place input check-box in same line x-horizontal as in label. My check-box is placing in 2nd line. I have a div with background to image then label and then check-box. The margin between image and label div and margin between label and check need to be same. Many thanks in advance.
<div id="map_Marker_Check_Block">
<div class="markerDiv" id="maker_school"><div class="marker_label">School</div> <input class="marker_ckeckbox" name="markerType" value="school" type="checkbox" /> </div> <br />
<div class="markerDiv" id="maker_gym"> <div class="marker_label">Gym</div> <input class="marker_ckeckbox" name="markerType" value="gym" type="checkbox" /> </div><br />
</div>
css
#map_Marker_Check_Block {
background-color:yellow;
display:block;
position:absolute;
width:20em;
height:400px;
top:0;
right:0;
z-index:10;
overflow-y:auto;
}
.marker_label {
margin-left:50px;
line-height:48px;
width:130px;
background-color:green;
}
.marker_ckeckbox {
float:right;
}
.markerDiv {
width:19em;
height:48px;
margin-left:5px;
}
#maker_school { background: url("img1.png") no-repeat; }
#maker_gym{ background: url("img2.png") no-repeat; }
http://jsfiddle.net/XUErp/
.marker_label {
float:left;
margin-left:50px;
line-height:48px;
width:130px;
background-color:green;
}
.marker_ckeckbox {
margin-top:15px;
float:right;
}
Use TOP and POSITION styles for checkbox:
.marker_ckeckbox {
float: right;
position: relative;
top: -35px;
}
But, I think the elements must be structured in a different way.
Or as Musa said use label instead of div:
Sample: http://jsfiddle.net/qaprB/1/
try this
<div class="markerDiv" id="maker_school"><label class="marker_label">School</label> <input class="marker_ckeckbox" name="markerType" value="school" type="checkbox" /> </div> <br />
<div class="markerDiv" id="maker_gym"> <label class="marker_label">Gym</label> <input class="marker_ckeckbox" name="markerType" value="gym" type="checkbox" /> </div><br />
css
.marker_ckeckbox {
float:right;
position: relative;
top: -35px;
}
.marker_label {
display:block;
}
So right now I'm starting a website im working on by just getting everything positioned and formatted on the page before i try to stylize it more and add some javascript. Oddly, i added three div tags after my form for the next row to be split into three columns. On my css sheet I added a border just so i can see the size of the boxes and the headings. Problem is nothing is showing up. Any help would be appreciated because i bet its something really simple.
<!doctype html>
<html lang="en"">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="operationStyle.css">
<title>Operation:Educate Children</title>
<script language="javascript" type="text/javascript">
image1=new Image();
image1.src="supermario.png";
image2=new Image();
image2.src="mario.png";
</script>
</head>
<body>
<header class="header">
<img src="mario.png" alt="header"/>
<h2>"Only the educated are free-Epictetus"</h2>
</header>
<table>
<tr>
<th>Home</th>
<th>About Us</th>
<th>Current Project</th>
<th>Get Involved</th>
<th>Calendar</th>
<th>Donate</th>
</tr>
</table>
<div id="slideshow">
<img class="slide" name="slide" src="supermario.png" width="100" height="200">
<script>
var step=1;
function slideit(){
if(!document.images)
return;
document.images.slide.src=eval("image"+step+".src")
if(step<2)
step++;
else
step=1;
setTimeout("slideit()",2500);
}
slideit();
</script>
<div>
<div class="contact">
<h2>Contact Us!</h2>
<form action="contact.php" method="post">
<strong>Name:</strong>
<input type="text" name="name"><br></br>
<strong>E-Mail:</strong>
<input type="text" name="email"><br></br>
<strong>Message:</strong>
<textarea name="message" cols="25" rows="12"></textarea>
<input type="submit" value="Send">
<input type="reset" value="Clear">
</form
</div>
<div class="events">
<h3><strong>Upcoming Events</strong></h3>
</div>
<div class="follow">
<h3><strong><Follow Us!></h3></strong>
</div>
<div class="blog">
</div>
</body>
</html>
BODY{
margin-left:15%;
margin-right:15%;
}
.header h2{
color:blue;
text-align:right;
border:5px solid black;
font-family:'Bookman Old Style',serif;
font-size:10pt;
font-style:italic;
width:28%;
float:right;
height:200px;
}
.header img{
width:70%;
float:left;
border:thin black;
height:200px;
}
table{
border:5px solid black;
width:100%;
height:75px;
clear:left;
}
.slide{
border:5px solid black;
width:70%;
height:400px;
float:left;
}
.contact{
border:5px solid black;
width:27%;
height:400px;
float:right;
}
.contact h2{
text-align:center;
}
.contact form{
margin-left:2%;
}
img.slide{
position:absolute;
left:0;
top:0;
}
#slideshow{
position:relative;
overflow:hidden;
}
.events{
float:left;
width:33%;
border:black;
height:200px;
}
.follow{
float:left;
width:33%;
border:black;
height:200px;
}
.blog{
float:left;
width:33%;
height:200px;
border:black;
}
Look at this line :
<h3><strong><Follow Us!></h3></strong>
You are using < and > inside the strong tag. This can screw up your HTML. Also your tags are not in the right order, you should change the line to this :
<h3><strong>Follow Us!</strong></h3>
Also, your last form's closing tag is not closed properly.
There are a couple closing tags that are out of order:
<div class="follow">
<h3><strong><Follow Us!></h3></strong>
</div>
</h3> and </strong> need to be reordered to be <h3><strong><Follow Us!></strong></h3>
You're also missing a closing form tag. </form lacks a closing >.
Change your CSS to read:
.events, .follow, .blog { // they are all the same, why having three times as much code?
float: left;
width: 33%;
border: 1px solid black;
height: 200px;
}
Then fix the missing > in </form
You also have missed the / in the slideshow div at the end </div>
(and fix the tag pointed out by Dany (<Follow Us!> > Follow Us!)
Then you will see the DIVs
As has been pointed out, your HTML code has several syntax errors, which made browsers render the 3 <div>s you added inside of the <div class="contact"> — and since the height of that was specified they were cut off.
I'm asking as a last-ditch effort to comply with my conscience and do this with CSS. I want to layout this simple form using CSS, but I've spent two hours trying to get it and always end up with alignment issues. I did it in ten minutes using tables.
I need labels right-justified, the name row split in two, the labels properly vertically aligned with the input text, and all the right edges of the inputs to line up. What does it take to do this in CSS?
EDIT: Adding my CSS to see where I'm going wrong.
Here's as far as I got with the CSS:
.form_row {
width: 500px;
}
.form_row label {
text-align: right;
width: 150px;
float: left;
margin-top: 6px;
padding-right: 6px;
}
#id_first_name, #id_last_name {
width: 130px;
}
#id_email, #id_password {
width: 300px;
}
The Markup:
<div class="form_row">
<label for="id_first_name">Name:</label>
<input id="id_first_name" type="text" name="first_name" />
<input id="id_first_name" type="text" name="last_name" />
</div>
<div class="form_row">
<label for="id_email">Email:</label>
<input type="text" name="email" id="id_email"/>
</div>
<div class="form_row">
<label for="id_password">Password:</label>
<input id="id_password" type="password" name="password" />
</div>
And the result:
You tempted me into taking up the challenge :) I just about did it in 10 minutes using CSS.
As long as you're ok with tweaking line-height's and settings dimensions in px for some elements I think its achievable.
Other things to note are how font-size, padding and line-height's affect textboxes and their dimensions.
Have a look at this: http://jsbin.com/osibu3/4
Tested in IE6+, FF3.6+, Chrome, Safari
Pasting for reference as well:
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
html,body,h1,h2,h3,h4,h5,p,ul,li,form,button,fieldset { margin:0; padding:0 }
body { font:normal 62.5% lucida grande, lucida sans unicode }
#my-form { font-size:1.1em; width:500px; padding:20px; background:#E9E9E9;}
#my-form fieldset { border:0; margin-bottom:2px; height:20px; line-height:18px; }
#my-form fieldset label { width:70px; display:block; float:left; text-align:right; padding-right:5px; color:#61515C; }
input.text { border:1px solid #ddd; font:inherit; font-size:11px; line-height:14px; height:14px; padding:2px;
border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;}
.text.long { width:395px }
.text.short { width:193px }
</style>
</head>
<body>
<form action="" id="my-form">
<fieldset class="name">
<label for="first"><strong>Name:</strong></label>
<input type="text" name="first" value="first" class="text short"/>
<input type="text" name="last" value="last" class="text short"/>
</fieldset>
<fieldset>
<label for="email"><strong>Email:</strong></label>
<input type="text" name="email" class="text long"/>
</fieldset>
<fieldset>
<label for="password"><strong>Password:</strong></label>
<input type="text" name="password" class="text long"/>
</fieldset>
</form>
</body>
</html>
http://www.blueprintcss.org/
The blueprint css framework can help you with tabular layout with divs. It has simple usage and good documentation.
It's hard to give another answer with such little information in your question.