OK, I am working on a comment script in PHP for my blog. Right now, I am doing some basic PHP for it, aswell as working on the layout. If you go to <!-- m --><a class="postlink" href="http://216.36.173.149/blog02.php?comments=yes">http://216.36.173.149/blog02.php?comments=yes</a><!-- m --> , you can see a comment submission box at the bottom of the page. It looks fine in FF and other real browsers, but IE totally screws it up. I tried fixing it, but anything I did just made it worse. Could someone help me out? Thanx in advance,
-DanI'd do something like this, with the <label> element:
<style type="text/css">
/*<![CDATA[*/
div#comments {
padding: 0;
background-color: #CCC;
border: 2px solid #999;
width: 32em;
color: #333;
}
div#comments form div div {
padding: 0.3em;
}
div#comments form div div#center {
padding: 0.4em;
border-bottom: 2px solid #999;
border-top: 2px solid #999;
background-color: #FFF;
}
div#comments form div label {
display: block;
float: left;
width: 5em;
}
div#comments form div input#cname,
div#comments form div input#cemail {
width: 410px;
border: 1px solid #666;
}
div#comments form div textarea#cmsg {
width: 410px;
height: 150px;
border: 1px solid #666;
overflow: auto;
}
/*]]>*/
</style>
... ... ...
<div id="comments">
<form action="#">
<div>
<div><label for="cname">Name:</label>
<input type="text" name="cname" id="cname" /></div>
<div id="center"><label for="cemail">E-mail:</label>
<input type="text" name="cemail" id="cemail" /></div>
<div><label for="cmsg">Comment:</label>
<textarea name="cmsg" id="cmsg" cols="30" rows="5"></textarea></div>
</div>
</form>
</div>
To fix your code, add height: 35px; to your .comCellg styles, and then add margin: 5px 0 0 0; to your .text styles. There may be another, more solid way, but that's the quick fix I found.
***EDIT***
Well, now you have to clear the floats in Moz. Since you floated the inputs and textarea, you'll have to add some sort of small, invisible, clearing element, such as an <hr />, to clear the floats.
***EDIT 2***
Or, you could explicitly set the height of the <div> which contains the textarea. 195px or so is about right.OK, im done that, and it works good in firefox, but it screws up the bottom of the page in IE
-Dan
**EDIT**
All is fixed! Turns out I left out the ">" on my </form> tag! Wait, does this mean that IE did something right, by noticing the error and displaying the page wrong? Or does Firefox just allow some leeway?BTW, wtf is up with the </form> tag? It always seems to add an extra line after it, as if it were "</form><br />". Is there any way to prevent this? Thanx again,
-DanOriginally posted by DanieLTomaS
BTW, wtf is up with the </form> tag? It always seems to add an extra line after it, as if it were "</form><br />". Is there any way to prevent this? Thanx again,
-Dan
set margins and padding to 0px on all your elements, then add padding and margins to what you want. If you don't do this, you'll spend the rest of your life troubleshooting "weird spacing issues" because browsers all have different defaults for elements like FORM, INPUT, A, LI, yadda... IMO of course.
-DanI'd do something like this, with the <label> element:
<style type="text/css">
/*<![CDATA[*/
div#comments {
padding: 0;
background-color: #CCC;
border: 2px solid #999;
width: 32em;
color: #333;
}
div#comments form div div {
padding: 0.3em;
}
div#comments form div div#center {
padding: 0.4em;
border-bottom: 2px solid #999;
border-top: 2px solid #999;
background-color: #FFF;
}
div#comments form div label {
display: block;
float: left;
width: 5em;
}
div#comments form div input#cname,
div#comments form div input#cemail {
width: 410px;
border: 1px solid #666;
}
div#comments form div textarea#cmsg {
width: 410px;
height: 150px;
border: 1px solid #666;
overflow: auto;
}
/*]]>*/
</style>
... ... ...
<div id="comments">
<form action="#">
<div>
<div><label for="cname">Name:</label>
<input type="text" name="cname" id="cname" /></div>
<div id="center"><label for="cemail">E-mail:</label>
<input type="text" name="cemail" id="cemail" /></div>
<div><label for="cmsg">Comment:</label>
<textarea name="cmsg" id="cmsg" cols="30" rows="5"></textarea></div>
</div>
</form>
</div>
To fix your code, add height: 35px; to your .comCellg styles, and then add margin: 5px 0 0 0; to your .text styles. There may be another, more solid way, but that's the quick fix I found.
***EDIT***
Well, now you have to clear the floats in Moz. Since you floated the inputs and textarea, you'll have to add some sort of small, invisible, clearing element, such as an <hr />, to clear the floats.
***EDIT 2***
Or, you could explicitly set the height of the <div> which contains the textarea. 195px or so is about right.OK, im done that, and it works good in firefox, but it screws up the bottom of the page in IE
-Dan
**EDIT**
All is fixed! Turns out I left out the ">" on my </form> tag! Wait, does this mean that IE did something right, by noticing the error and displaying the page wrong? Or does Firefox just allow some leeway?BTW, wtf is up with the </form> tag? It always seems to add an extra line after it, as if it were "</form><br />". Is there any way to prevent this? Thanx again,
-DanOriginally posted by DanieLTomaS
BTW, wtf is up with the </form> tag? It always seems to add an extra line after it, as if it were "</form><br />". Is there any way to prevent this? Thanx again,
-Dan
set margins and padding to 0px on all your elements, then add padding and margins to what you want. If you don't do this, you'll spend the rest of your life troubleshooting "weird spacing issues" because browsers all have different defaults for elements like FORM, INPUT, A, LI, yadda... IMO of course.