|
CSS - Textarea Expend Over 100% At Strict Mode..
Hello guys, i've been trying for the past 2 days to google for textarea sizing under strict mode.
i have found no solution and at the moment my problem is this... here is the code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<style type="text/css">
.style1 {
text-align: center;
width: 800px;
}
</style>
</head>
<body>
<div class="style1" style="padding: 0px; margin: 10px auto 10px auto; background-color: #D6EBF5; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; font-style: normal; color: #000000; width: 800px;">Little Bunny</div>
<div class="style1" style="margin: 0px auto 0px auto; background-color: #D6EBF5; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; font-style: normal; color: #000000;">
<div style="width: 400px; float: left; background-color:#EBEDF3; height: 100px; text-align: center; line-height: 100px;">Text</div>
<div style="width: 400px; overflow:visible; float: left; background-color:#F2F9E8" id="OuterDiv">
<form method="post">
<textarea cols="0" id="T1" name="TextArea1" rows="3" style="float:left; width:100%; height:100px; margin: 5px; padding:0">efefefefefef</textarea>
</form>
</div>
</div>
</body>
</html>
The Textarea expend over the surrounding Div and it shows differntly under FireFox 3.5.7 and IE 8 (tested for both) I'm trying to do the following: make the textarea width 100% and height 100px for example. + padding 5px outside the textarea (space 5px from left, right, top, bottom).. most importent thing is to see it equaly under both ff and ie.. hope you can correct my code since i'm clueless.... have a nice day Similar TutorialsHi folks, I am super excited about the box-sizing css rule. I've always thought the original IE box model was better and it was a shame that we had to ditch their superior model for the w3c one to be cross browser. Now all the browsers are starting to support box-sizing which will allow me to go back to the model I prefer. Unfortunately, pioneering the border-box sizing model, the only way I can get to it (that I know of) in IE6/7 is via quirksmode. Quirksmode has a whole bunch of other issues I don't want so this doesn't see a solution. I'm hoping someone out there will no how I can trigger box-sizing: border-box; in IE6/7 without quirksmode. If it's possible I'll be ditching the w3c box model in a hurry. Cheers, Pete I do a lot of we development work for an intranet site. All users are on IE. Occasionally, I'll develop a page that looks fine in my browser (IE 8.0.6001) but not in others (8.0.7600). I have to set mine to compatibility mode to see what others see. I thought the compatibility mode was meant to display a web page the way it would in an older browser. Is it possible that I have something installed on my machine that makes my browser render pages differently? I know this is vague, but I am just wondering if anyone has ideas on where to look. We've got something odd happening on our site. Check out: newser.com/story/82843/conan-obriens-twitter-woman-shows-class.html If you leave your browser window alone for about 5 minutes, eventually the content on the page jumps down. If you scroll, or mouseover the window, it jumps back. Any ideas on the issue? One thing to note -- we're watch for breaking news periodically -- when something big happens, we load a banner above the nav via AJAX. Seems like this may be a factor even though it's usually empty. Hey, does anyone know if there's a mozilla equivilent to writing-mode? um .. that's all Thanks I have a combo box written via JS that only seems to work in quirks mode in firefox. In IE it works in both quirks and SC mode. here is my js code (i know this is the CSS forum but javascript is changing the css) Code:
var fInitCombo=true;
// resdraw the combo box locations based on the windo resizing -- if need be
window.onresize=resizeCombos;
function resizeCombos(complete) {
// i take the select and place it in the right position. I also size the text box to be the same size as the combos
var oText, oSelect, obj, x, y;
for(var i in arrCombo) {
x=0;
y=0;
oText=arrCombo[i].textField;
oSelect=arrCombo[i].selectField;
obj=oText;
while(obj.tagName!="BODY") {
x+=obj.offsetLeft;
y+=obj.offsetTop;
obj=obj.offsetParent;
}
if(fInitCombo) {
oText.style.width=oText.offsetWidth-16;
//oSelect.selectedIndex=-1;
fInitCombo=false;
}
if(complete) {
//oSelect.selectedIndex=-1;
oText.style.marginRight=16;
}
oSelect.style.left=x;
oSelect.style.top=y;
oSelect.style.width=oText.offsetWidth+16;
oSelect.style.clip="rect(0,"+(oText.offsetWidth+18)+","+(oText.offsetHeight)+","+(oText.offsetWidth-2)+")";
oSelect.style.display="block";
}
}
function updateCombo(instance,use,oHiddenField) {
var oText=arrCombo[instance].textField;
var oSelect=arrCombo[instance].selectField;
if(use == "t")
{
oText.value = oSelect.options[oSelect.selectedIndex].text
}
else if(use == "v")
{
oText.value = oSelect.options[oSelect.selectedIndex].value
}
if(arguments.length > 2)
{
oHiddenField.value = oSelect.options[oSelect.selectedIndex].value
}
updateComboSelection(arrCombo[instance].selectField,arrCombo[instance].textField);
}
function comboLoad() {
resizeCombos(true);
}
function updateComboSelection(oSelect,oText)
{
oSelect.selectedIndex=-1;
for(var i=0;i<oSelect.options.length;i++)
{
//if(oSelect.options[i].text==oText.value)
if(oSelect.options[i].text.indexOf(oText.value) == 0)
{
oSelect.selectedIndex=i;
break;
}
}
}
subset of my html Code: <form action="##" name="data"> <fieldset style="width:600px"> <LEGEND>Appointment time</LEGEND> <table> <tr> <td> Start: <input type="text" name="start_time" id="start_time" onchange="changeHandler(this);" /><select name="start_time_select" id="start_time_select" onchange="changeHandler(this);" style="position:absolute;display:none;"><option>asdfasd</option></select> </td> </tr> </table> </fieldset> </form> arrCombo is just an array of objects pointing to the text and select fields. Any idea why this only works in quirks mode rather than SC mode it's the Resize combo method is the one thats running to do the combos Is this a strict (or even valid) doctype? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> what should I expect the UA to behave like? If i want to use the strict DTD, is there an alternative to the target attribute on the <a> link which you are no longer allowed to use? I usually build in XHTML Traditional, and modify via CSS... but i want to learn how to build in XHTML strict.. and practice i notice is putting data in ul lists... which when the css is taken off, gives quite a nice structured layout of text and such... problem is, i dont know how to do it to where the "dot" doesnt show up... anyhelp would be great. thanks It's not letting me post links since I am a new member, so copy paste the link below. (it's an image of what looks wrong in the website) img59.imageshack.us/i/52153657.jpg/ It loads correctly in Firefox and IE8, but the middle column breaks in ie7 and ie8 in compatibility mode. By break I mean the middle column gets shifted to the right side of the middle column and below the right column (while still in the middle column) I have also included the general layout and css below. I have tried changing doc types and a few small things but nothing has even effected the appearance. The website is in a layout like this: html4strict Code: Original - html4strict Code <div id="wrapper1"> <div id="wrapper2"> <div id="maincol"> <div id="leftcol"> </div> <div id="rightcol"> </div> <div id="centercol"> </div> </div> <div id="footer"> </div> </div> </div> <div id="wrapper1"> css Code: Original - css Code #centercol { position:relative; padding:0 200px; min-width: 520px; } #leftcol { position:relative; top:-10px; left:-10px; float:left; width:180px; margin:0 0 -10px 0; padding:10px; z-index:100; } #rightcol { position:relative; top:-10px; right:-10px; float:right; width:180px; margin:0 0 -10px 0; padding:10px; z-index:99; } #maincol { position:relative; margin:0; padding:10px; } #wrapper1 { position:relative; text-align:left; width:100%; min-width: 950px; background:#23415C url("images/side.gif") repeat-y top right; } #wrapper2 { position:relative; text-align:left; width:100%; background:url("images/side.gif") repeat-y top left; }
#centercol {
Any ideas on how to resolve this problem would be great. So my page is valid strict xhtml 1.0, and valid css 2, yet it looks so messed up in FF. I can't figure out why. http://www.drowninginmytears.org/index.php It looks perfect in IE, but totally messed up in FF Can anyone help? Thanks. Is there an equivalent to the target attribute in XHTML strict for anchor tags? Hi- I need to know if IE 5, IE 6 or IE7 are considered standards-compliant and do any of them support fully CS2 and strict standards? Thanks in advance- S I've been making ok progress with CSS (thanks to your help ) but have come up with a problem when wanting to embed a flash movie into my webpage. How do i do it using CSS? the follwing Html code works fine but fails upon validation. Code:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="300" height="300>
<param name="movie" value="flash/home.swf">
<param name="quality" value="high"><param name="BGCOLOR" value="#A1D7FD">
<embed src="fighter.swf" width="250" height="250" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" bgcolor="#A1D7FD"></embed></object>
Any help is appreciated. Also - is it a bad idea including small intro flash movies for webpages? any help is appreciated I have a search box/button I want to keep on a single line in a tool bar on my page in strict XHTML/CSS. The <form> tag produces a line break beforehand. In old HTML I could put the <form> tag outside of the table row or data tags, but XHTML does not allow that (bad nesting). I found in devshed here to use style="display:inline;" which works! But the page does not validate as strict XHTML/CSS (using validator.w3.org). <table><tr><td> <!-- simplified to illustrate!! --> <form method="get" action="..." style="display:inline;"> <input type="text" name="q" size="10" maxlength="255" value="" /> <input type="submit" name="sa" value="go" /> </form> </td></tr></table> The Error and reason given is below. It seems that you can not have a block-level element (<input>) within in inline-level element (<form>). *** document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag. The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>"). *** Does anyone know how to code this to not have the linebreak and still maintain strict XHTML/CSS code? I have a web site using XHTML 1.0 Strict. The main body of the web pages is absolutely positioned 225px from the left, 100px from the top and is 750px wide. There is a banner and menu at the top and then another menu with links to the left. They are also absolutely positioned as well. I am using IE 6.0 as the main web browser since this is a corporate environment. The problem that I am having is that when I select text in the main body it either selects everything from the top down to the cursor or from the cursor to the end. I have troubleshot this and narrowed it down to the absolute positioning. It works fine in IE 7 with the absolute positioning. Does anyone know why this is happening and is there a work around for this? Thank you. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Code: #content {
position:absolute;
width: 750px;
left: 225px;
top: 100px;
z-index: 500;
border-top-style: outset;
border-right-style: outset;
border-bottom-style: outset;
border-left-style: outset;
background-color: #ECE9E2;
}
quirks mode is what i'm using, but now im thinking that in order to support all browsers i need to jump to strict. now im really in trouble. is strict right for me? xhtml or html? my site works perfectly in firefox because that is what i have been testing it in, but it works horribly in IE. so, will switching to strict give me the best compatibility? Hi , I am trying to print my html page in the landscape mode.I should print this automatically in landscape mode with css orientation landscape. i am using the below code to print all tables in my html page in landscape mode @page rotated { size : landscape } table { page : rotated } Its not working . Is this write or wrong? Is there any other way to do it. Thanks, Hi! How do I open a link in a new window in XHTML strict? (knowing that target="_blank" forbidden). Thank you Hi all, I'am using a component called TinyMce and what people not to dragg images into the textrea how would I prevent this? Regards, Stephen Alistoun |
|||||||