Checkboxes in IE 8

Hi,
I am having a strange allignment issue with some text boxes in IE. here is the page

http://www.qtelshareholders.com/mydetails.php

The boxes line up fine on Firefox and Chrome.

I’m pretty new to this, so the mistake is prob silly,

Thanks in advance.

Hi, the mistake is quite silly :).

Where is your doctype? Your <html> element? This is your code

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Qtelshareholders</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- Meta -->
<meta name="description" content="#">
<meta name="keywords" content="#">
<!-- CSS -->
<link href="reset.css" rel="stylesheet" media="screen, projection" type="text/css">
<link href="main.css" rel="stylesheet" media="screen, projection" type="text/css">
<link href="print.css" rel="stylesheet" media="print" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<!-- fix for transmenu never ending page height -->
<style type="text/css">
/* fix for transmenu */
.transMenu {
	top:-999em;
}
</style>
	<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
		<script src="coolclock.js" type="text/javascript"></script>
		<script src="moreskins.js" type="text/javascript"></script>

<script type="text/javascript" src="TransMenu.js"></script>
</head>
<body id="home">
<div id="outer">
	<h1 id="logo"><a href="index.php">Qtelshareholders<em></em></a></h1>
  <div id="clock"><table><tr>
  <td align="left">Dublin<br/><canvas id="c6" class="CoolClock::30 leftRightPad"></canvas></td>
  <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
  <td align="center">Dubai<br/><canvas id="c7" class="CoolClock::30:noHour:+3 leftRightPad"></canvas></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>

  <td align="right">Taiwan<br/><canvas id="c8" class="CoolClock::30:noHours:+7 leftRightPad"></canvas></td>
	</tr></table> </div>
<p class="header"><a href="#"></a></p>
	<ul id="nav" class="clearfix">
			<li id='tab_active' class="mainlevel-trans"><a href="register.php" id="item1" class="mainlevel-trans" title="Title1"><span><b>Register</b></span></a></li>
		<li class="mainlevel-trans"><a href="login.php" id="item2" class="mainlevel-trans" title="Title2"><span><b>Login</b></span></a></li>
	<li class="mainlevel-trans"><a href="contactus.php" id="item2" class="mainlevel-trans" title="Title2"><span><b>Contact Us</b></span></a></li>

		
	</ul>
	
	<p class="breadcrumb"></p>
	<!--<p class="breadcrumb">You are here &raquo; <a href="#">Home</a> &raquo; <strong>About</strong></p>-->
	<div id="main" class="clearfix">
		<div id="content">
		<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="">
<h1>Your Registered Details</h1>
<p>Please amend if incorrect</p>

<label>First Name
<span class="small"></span>
</label>
<input type="text" name="firstname" id="firstname" value = ""/>

<label>Surname
<span class="small"></span>
</label>
<input type="text" name="surname" id="surname" value = ""/>

<label>Address
<span class="small"></span>
</label>
<textarea name="address" >
</textarea>
<label>Email Address

<span class="small"></span>
</label>
<input type="text" name="email1" id="email1" value = "" />

<label>Confirm Email
<span class="small"></span>
</label>
<input type="text" name="email2" id="email2" value = ""/>

<label>Landline
<span class="small"></span>
</label>
<input type="text" name="landline" id="landline" value = ""/>

<label>Mobile
<span class="small"></span>
</label>

<input type="text" name="mobile" id="mobile" value = ""/>
<label>Alerts
<span class="small">Tick the boxes for the method you wish to use to receive your alerts</span>
</label>
  <div id="box">
    <span class="text">Email</span>
     <input class="check" type="checkbox" name="email">
       <span class="text">Text&nbsp;</span>
     <input class="check" type="checkbox" name="sms">


    </div>

	
<button type="submit">Go</button>

<div class="spacer"></div>

</form>
</div>

       	</div>
	</div>
	
		<div id="footer"> </div>

	
</div>
</body>
</html>

Give a doctype and then the <html>. If that doesn’t work then come back.

Oh dear, forgot about that, i have updated it and still have the same problem…

Hi, it’s better. On the input just change the width from 200px to 199px. It’s overflowing by 1px for some reason :).

Just tried that, still the same… any other ideas?

Hi, you didn’t do what I said, or you did something else :).

<!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>
<base href="http://www.qtelshareholders.com/mydetails.php" />
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Qtelshareholders</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- Meta -->
<meta name="description" content="#">
<meta name="keywords" content="#">
<!-- CSS -->
<link href="reset.css" rel="stylesheet" media="screen, projection" type="text/css">
<link href="main.css" rel="stylesheet" media="screen, projection" type="text/css">
<link href="print.css" rel="stylesheet" media="print" type="text/css">
<!--[if lte IE 7]>
<link href="iecss.css" rel="stylesheet"  media="screen,projection" type="text/css">
<![endif]-->
<!--[if IE 8]>
<link href="ie8.css" rel="stylesheet"  media="screen,projection" type="text/css">
<![endif]-->
<link href="style.css" rel="stylesheet" type="text/css">
<!-- fix for transmenu never ending page height -->
<style type="text/css">
/* fix for transmenu */
.transMenu {
	top:-999em;
}
</style>
<style>

</style>
	<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
		<script src="coolclock.js" type="text/javascript"></script>
		<script src="moreskins.js" type="text/javascript"></script>
<script type="text/javascript" src="TransMenu.js"></script>
</head>
<body id="home">
<div id="outer">
	<h1 id="logo"><a href="index.php">Qtelshareholders<em></em></a></h1>
  <div id="clock"><table><tr>
  <td align="left">Dublin<br/><canvas id="c6" class="CoolClock::30

leftRightPad"></canvas></td>
  <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
  <td align="center">Dubai<br/><canvas id="c7" class="CoolClock::30:noHour:+3

leftRightPad"></canvas></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
  <td align="right">Taiwan<br/><canvas id="c8" class="CoolClock::30:noHours:+7

leftRightPad"></canvas></td>
	</tr></table> </div>
<p class="header"><a href="#"></a></p>
	<ul id="nav" class="clearfix">
			<li id='tab_active' class="mainlevel-trans"><a href="register.php"

id="item1" class="mainlevel-trans" title="Title1"><span><b>Register</b></span></a></li>
		<li class="mainlevel-trans"><a href="login.php" id="item2"

class="mainlevel-trans" title="Title2"><span><b>Login</b></span></a></li>
	<li class="mainlevel-trans"><a href="contactus.php" id="item2"

class="mainlevel-trans" title="Title2"><span><b>Contact Us</b></span></a></li>
		
	</ul>
	
	<p class="breadcrumb"></p>
	<!--<p class="breadcrumb">You are here &raquo; <a href="#">Home</a> &raquo;

<strong>About</strong></p>-->
	<div id="main" class="clearfix">
		<div id="content">
		<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="">
<h1>Your Registered Details</h1>
<p>Please amend if incorrect</p>

<label>First Name
<span class="small"></span>
</label>
<input type="text" name="firstname" id="firstname" value = ""/>

<label>Surname
<span class="small"></span>
</label>
<input type="text" name="surname" id="surname" value = ""/>

<label>Address
<span class="small"></span>
</label>
<textarea name="address" >
</textarea>
<label>Email Address
<span class="small"></span>
</label>
<input type="text" name="email1" id="email1" value = "" />

<label>Confirm Email
<span class="small"></span>
</label>
<input type="text" name="email2" id="email2" value = ""/>

<label>Landline
<span class="small"></span>
</label>
<input type="text" name="landline" id="landline" value = ""/>

<label>Mobile
<span class="small"></span>
</label>
<input type="text" name="mobile" id="mobile" value = ""/>
<label>Alerts
<span class="small">Tick the boxes for the method you wish to use to receive your

alerts</span>
</label>
  <div id="box">
    <span class="text">Email</span>
     <input class="check" type="checkbox" name="email"[b] style="width:199px;"[/b]>
       <span class="text">Text&nbsp;</span>
     <input class="check" type="checkbox" name="sms">

    </div>

	
<button type="submit">Go</button>

<div class="spacer"></div>

</form>
</div>

       	</div>
	</div>
	
		<div id="footer"> </div>
	
</div>
</body>
</html>

Look at the bold (and rmeove the <base> tag above in the <head> sectino, I used it only to access your site locally)

Validate your markup. I notice you’re using the HTML5 canvas element in an XHTML 1.0 document?!

ahhh coool, i changed the CSS, there is an outline around the boxes, can these be removed?

I tried and to no avail could I get it to go away. Users expect it to be there anywway so I wouldnt’ remove it. Also it causes a lot of accessibility issues if you take away the outline for keyboard userss.

I don’t think it is possible. I just remembered the firefox default stylesheet (which overrides any author setting) and it sets hte outline via the !important declaration making it impossible to get rid of unless you go in there and remove it (though other users will still see it)

Thats cool, thanks for your help :slight_smile:

Your welcome :).

I just noticed, I think the lines around the checkboxes are inherited from the stylized input class in the CSS ? Is there a way to override this?

Yes, use a selector that is more specific to target the said checkbox. Though I doubt its inheriting.

Is there a way to use the standard definition for “input” in the div with ID “box” ?

I’ll take that to mean you want to select na input within a div with id of “box”

div#box input{}

This is really strange

I have this


#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}

so, i then defined this


 #stylized box input{
}

yet, the input box is still appearing, strange?

#stylized box input{
}
That defines this sort of structure

<div id=“stylelized”><box><input /></box></div>

You have to put a # before the “box”. And of course the input box will still appear. You havent set display:none; on it…I don’t quite follow your thinking.

basically, I am trying not to show the input box around the checkboxes, the checkboxes are inside a Div called “box”. I have now used this definition and its still displaying the input box around the checkboxes


#stylized box input{
	 display:none;
}


I said above, change it to #box. “box” just selects <box>