Forum Moderators: not2easy
Usual story, I got my site looking OK in IE and now it looks rubbish in other browsers.
The problem seems to be with all my <span>'s, the width is not being set in FF.
eg:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
Yada yada yada
<link rel="STYLESHEET" type="text/css" href="style.css">
</head>
<body>
<div class="content">
<form name="myname" action="myaction.php" method="POST">
Yada yada yada
<span class="services"> <input type="checkbox" name="name1"> Check1</span>
<span class="services"> <input type="checkbox" name="name2"> Check2</span>
....
<span class="services"> <input type="checkbox" name="name99"> Check99</span>
<input type="submit" value="Continue">
<input type="submit" name="Reset" value="Reset">
</form>
</div>
</body>
and the css is
body {
color:#006699;
color:#000000;
background-color:#E4CCD9;
margin:0px;
padding:0px;
font:9px verdana, arial, helvetica, sans-serif;
}
.content {
position:relative;
width:auto;
min-width:500px;
height:78%;
overflow:auto;
top:0px;
min-height:420px;
margin:0px 214px 0px 151px;
border:1px solid #9B4F75;
padding:10px;
z-index:3;
}
SPAN.services {
width:130px;
}
I'm lost ... IE puts the checkboxes in neat, equi-spaced columns and FF uses no spacing at all and crams everything together.
Any help would be greatly apreciated.
[edited by: Robin_reala at 7:13 am (utc) on May 1, 2007]
[edit reason] Correcting BB code [/edit]
Both show the check box, option labels, and buttons all in one row. You say you want it on multiple lines?
You realize that span elements are INLINE styled, meaning they don't do line breaks. You should use a DIV if you want each option on a new line, which is BLOCK styled.
Block-level elements also are resizable, so that's another thing you should like.
Lastly, if you want to control the width of horizontally displayed elements, you will need to set them to float:left or float:right, and still have them as divs.
[edited by: Xapti at 7:16 am (utc) on May 1, 2007]
You might want to think about designing your sites in more CSS compliant browsers first and then doing the odd tweak if need be for IE. I`ve found that to be a far better solution these days and code all CSS in Firefox first.
dc
<style type="text/css" >
body {
color:#006699;
background-color:#E4CCD9;
margin:0px;
padding:10px;
font:.8em verdana, arial, helvetica, sans-serif;
}
#content {
width:500px;
height:78%;
margin:0 auto 0 auto;
border:1px solid #9B4F75;
padding:10px;
}
#content form {
padding: 8px;
margin: 0;
}
#content ul {
list-style-type: none;
margin: 4px 0;
padding: 0;
}
#content ul li {
margin: 0 0 0 10px;
}
</style>
</head>
<body>
<div id="content">
<form name="myname" action="myaction.php" method="POST">
Yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada
<ul>
<li><input type="checkbox" name="name1"> Check1</li>
<li><input type="checkbox" name="name2"> Check2</li>
<li><input type="checkbox" name="name2"> Check3</li>
<li><input type="checkbox" name="name2"> Check4</li>
<li><input type="checkbox" name="name2"> Check5</li>
<li><input type="checkbox" name="name2"> Check6</li>
<li><input type="checkbox" name="name2"> Check7</li>
<li><input type="checkbox" name="name2"> Check8</li>
<li><input type="checkbox" name="name99"> Check99</li>
</ul>
<input type="submit" value="Continue">
<input type="submit" name="Reset" value="Reset">
</form>
</div>
</body>
The <span> is working just fine!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
is a Doctype which puts IE into quirks rendering [backwards compatible] mode, therefore it [IE] and only it will accept a width on an inline element. A <span>, or even the <input>, is an inline element unless you tell it to float or display:block; - so no widths allowed
if you do want inputs "in neat, equi-spaced columns" then you either have to use a table, as some like to continue doing forms in.. or you can use floats with widths
Suzy
[edited by: SuzyUK at 9:42 pm (utc) on May 1, 2007]
You can use the full version of a transitional DTD and IE will be in standards compliant mode.
btw.. If you're using frames should you be using transitional (full version) or should it be a frameset one - can you use either? - I haven't worked with frames for ages
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
[edited by: SuzyUK at 7:25 am (utc) on May 2, 2007]
What I'm after is my check boxes lined up in a grid. (say 4 x 5)
I have no <br>'s, I want the browser to wrap the lines in this bit.
I thought I could set the width of a span.
Xapti, my IE6 (and now 7) both set a width to each span (130px) thus when the line wraps, the next line lines up.
I will try the divs and floats
dreamcatcher ... yes sorry I was having a go at myself rather than the browsers
justgowithit ... thanks for that, but it just places the checkboxes in one column. I'm after multiple columns.
Thanks Susy ... you've got it ... I don't like tables so I'll go for floats.
[edited by: Kenton at 1:50 am (utc) on May 3, 2007]
I don't really use framesets, just iframes instead of ssi occasionly, hence I always use transitional.
Frameset doctype is only for when you have <frameset> instead of <body> or something, so is only used with framesets. The pages the frame holds would still be normal doctype I think or something... I don't know :\
[edited by: Xapti at 5:24 am (utc) on May 3, 2007]
