|
CSS - Input Tag And Size Vs Css Width
I need advice on the below code:
xhtml: <input name="a_name" id= "a_name" type="text" value="a value" size="50" maxlength="100" /> css: input { width: 300px; } Given this set up what is the relevance of the size attribute of the input tag considering the css width setting? Aside from what happens if a user disables the stylesheet, is it even necessary to include the size attribute? Any browser issues with this code? Similar Tutorialsdear all, some simple divs of mine seem to be rendering differently in IE6 and IE7. for example, the following style works fine in IE6... Code:
#calHourNow {
background-color: #FFFF66;
margin:0px;
padding:0px;
width:50px;
height: 120px;
border-top:1px solid #999999;
border-right:1px solid #999999;
color:#000000;
font-weight:bold;
font-size:14px;
text-align:right;
font-family:"Times New Roman", Times, serif;
}
... I am left with a 12o x 50 px box (which is repeasted down the page) but in IE7 it seems the 1px border is added to the width and height, leaving me with a div that is actually 121 x 51 px. It is completely vital for my project (an outlook style calendar) that the dimensions of these divs are exactly the same on both browsers, is there a way round this? Many thanks, Mark Hello all I need to display the Login info inside a DIV 'WELCOME <USER FIRST NAME AND LAST NAME>' i have set the width of the DIV and a font size - 16px but when the name length increases the design brakes One way of solving the issue is by applying some logic using scripts but i want to know that whether we can do anything using the same with CSS only Regards Anees I'm not a programmer by nature, but am picking things up as I go along. I'm working on some forms to make my job easier. Hopefully what I will provide below is enough info to provide a solution. If not, let me know what else you might need. I understand that this section of CSS manipulates the size and other attributes of the textarea input box: fieldset div input,fieldset div textarea { width:150px; border-top:1px solid #555; border-left:1px solid #555; border-bottom:1px solid #ccc; border-right:1px solid #ccc; padding:1px;color:#333; } What I am looking for is what do I need to add to my CSS and consequent HTML markup to have other textarea input boxes with different attributes? What I really need is to have 4 small boxes within the same div on the same row. Thanks in advance!! Hi I am currently having problems changing the size (or width) of INPUT fields within a form when they have a class assigned to them. If I remove the class that is assigned then the size attribute works fine. Do I need to specify the size of the INPUT field within the CSS file that holds the class? And if so how do I do it? Thanks in advance for any help. please see following code. (i want myHeight becomes dynamis, that mean when user resize the browser, it will be changed automatic w/o refresh the page). thank you. waitting online for the answer. <html> <head> </head> <body > <table> <tr><td>tasd</td></tr> <tr><td> <script type="text/javascript"> var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible myWidth = document.body.clientWidth; myHeight = document.body.clientHeight; } //var height = myHeight *.8; document.writeln("<div style='HEIGHT:" + myHeight *.8 + "; WIDTH:100%; OVERFLOW:auto'>"); //return height; </script> <table> <tr><td> msg </td></tr> </table> </div> <td> msg </td> </table> </body> </html> Hello, I defined the width of a form input as follows: fieldset input {width: 24em;} But then the checkbox inputs also get a width. So I uses the following: <input name="IsPublished" id="IsPublished" type="checkbox" class="test" value="Yes" />Check to publish fieldset input.test {width: auto;} But I wasn't able to reset the width. Any idea why? I also tried with: fieldset input.test {width: 10px;} It didn't work either. Thanks, Miguel I've got simple webpage like this: <html> <style type="text/css"> div { font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px;} td { font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px;} input { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; vertical-align: middle;} select { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; vertical-align: middle;} </style> <body> <div> <select onchange="" style="width: 210px;"> <option value="0"> aa </option> <option value="1"> bb </option> <option value="2"> cc </option> </select> </div> <div> <table cellspacing="0" summary="" style="height: 210px; width: 210px; nowrap; border: solid #666666 1px; overflow: auto;"> <tr> <td> table </td> </tr> </table> </div> <div> <input name="custom" type="text" style="width: 210px;" value="" /> </body> </html> Everything is ok until I put XHTML DOCTYPE. After that width of <INPUT> tag is not the same as in <TABLE> or <SELECT>. What am I doing wrong? How to fix it? Elephant Something for the css pros: Can anybody give me a hint on how to convert the following (table) based markup snippet to div-only markup? http://www.twosailors.net/test.html In all my tests I cannot get the rightmost cell expand so the whole menu gets it's total size. I do NOT want to convert the boxes to fixed width but keep them shrinkwrapping around the menu texts. Also, I do want a border around the boxes so any faking with background colors will not work either. Any ideas? Andreas Pardeike Hello, I have a form as follows: <form id="New" action="/User/Create" method="post" class="Base"> <fieldset> <legend>User Data</legend> <ol> <li> <label for="Name">Name</label> <input type="text" name="Name" id="Name" value="" /> </li> <li> <label for="City">City</label> <select name="City" id="City"> <option>New York</option> <option>London</option> </select> </li> <li> <label for="CurriculumVitae">Curriculum Vitae</label> <textarea name="CurriculumVitae" rows="10" cols="20" id="CurriculumVitae"></textarea> </li> </ol> </fieldset> </form> And I defined the following: input, select, textarea { width: 520px; } The problem is that the select becomes narrow than the input and textarea. Why? How can I make all the same width? And what is the default width for an input? Is there a way to make its width according to its expected content without needing to use different CSS Classes? Thanks, Miguel I have a layout that has text in a left div and the form input in the right. I want the form input to be 100% width of DIV.standard_field_right not 100% width of the entire page. Can someone give me a hint please. CSS and XHTML below: PHP Code: DIV.standard_field_container { width: 98%; padding: 0.4em; border: 1px solid #8B8B8B; background-color: #E2E2E2; overflow: hidden; } DIV.standard_field_left { width: 10em; float: left; margin-right: 5em; font: bold 0.8em Verdana, Arial, Helvetica, sans-serif; } DIV.standard_field_right { font: normal 0.8em Verdana, Arial, Helvetica, sans-serif; } SPAN.standard_field_type_info { font-weight: normal; color: #ff0000; border-bottom: 1px dashed #ff0000; cursor: help; } INPUT.input_text_field { width: 30em; } XHTML: PHP Code: <div class="standard_field_container"> <div class="standard_field_left"> <span class="standard_field_name"><?php echo $field_definition[1]; ?></span> <span class="standard_field_type_info" title="<?php echo $field_definition[7]; ?>">Information</span> </div> <div class="standard_field_right"> <span class="standard_field_input_area"><input name="<?php echo $field_definition[0]; ?>" type="text" id="<?php echo $field_definition[0]; ?>" maxlength="<?php echo $field_definition[10]; ?>"<?php if ($value_applies == '1') { ?> value="<?php echo $row["$field_definition[0]"]; ?>" <?php } ?> class="input_text_field" /></span> </div> </div> Hi there, I'm completely new to CSS. I'm trying to do this more than one hour but can't get it right. Code: <font color='white'><font size='1' face=verdana size=1> I couldn't find the equivalent of this in CSS This is my last experiment but it doesn't seem to work either Code: fontstyle { color : #FFFFFF; font-family : verdana ; font-size :1;}
Thanks I could see this as potentially being really easy to do or really hard to do. I'm hoping for the former. Suppose I have 3 divs, A, B, C and that I want the total width of A + B + C to equal the width of the screen. Suppose also that I want them to be inline. How can I have B to be a fixed width while A and C expand depending on the screen width (such that the width of A = the width of C)? So when using Netscape 7.2 & Opera 7.5 and MSIE 6.0, How do you get a simple tag like body { font-size:small; } to be equal in all browsers? Setting IE Text Size to Medium, and Opera's Zoom to 100% (both defaults) and Netscape 7.2 to 120% (not the default) is one way, but is there a CSS way? By the way, the child element hack "body>div {property}" wasn't working no matter what I tried, by not working I mean to say Netscape never would read it or apply it. It appeared to be that Opera & IE need to read the same value while Netscape needs to apply a larger size to be equal to IE's and Opera's rendering. B Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help I have an absolutely positioned <div> containing a block of text. I have not specified a width for this <div>. This <div> is nested within another <div> for which I have specified a width of 200px. So something like: html4strict Code: Original - html4strict Code <div style="position: relative; width: 200px;"> <div style="position: absolute; top: 10px; left: 20px; z-index: 100;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris. </div> </div> <div style="position: relative; width: 200px;"> Since the absolutely positioned <div> is not part of the page's normal flow, I would expect that its width would expand according to its contents (and the browser window's boundries). Instead, in Firefox only, the width of the absolutely positioned <div> expands only to the width of its parent - in this case 200px. Am I doing something wrong? or is there a workaround for this? I have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen. The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content. Is there a way to get this effect? I'm at the very very very begaining of a table-less design (my first, actually). The problem is, since I have decided to have a non-fixed width, when the browser is minimized, at a certain point the design breaks. See it here (please don't make fun! it's just the start): SiliconSatan.com/test.php I'd like to set a minimum width, probably on the container <div>, so at a certain point it sort of becomes like a fixed width? No smaller than a set width? [EDIT] Also, I have a question about background color mismatch, but it was not quite OT for the CSS forum: http://forums.devshed.com/web-desig...e7t-403266.html Hello, (please also see attached/uploaded style sheet) I'm puzzled why (in the following code) the TEST #2 table renders as required (i.e. 2 rows in 1 column, all with the same cell WIDTH) but the table in TEST #1 seems to render the table cells (i.e. 2 columns in 1 row) without a common cell WIDTH. How can I get all the cells (there are plenty more!) in table TEST #1 to all be exactly the same width (preferably 85px)? Code: <link rel="stylesheet" type="text/css" href="http://thinet/cgi-bin/thinetStyleSheet.css"> TEST #1 <table class="menu" border=1 CELLPADDING=2> <tr> <td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td> <td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td> </tr> </table> <P> TEST #2 <table class="menu" border=1 CELLPADDING=2> <tr><td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td></tr> <tr><td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td></tr> </table> I don't think I've quite grasped the idea of CSS yet?!?! Any help/pointers would be appreciated. Thanks, Andy Ok. Here's the problem: I have a asp.net 1.x datagrid inside a floated div and I want the datagrid to stretch the width of the div. This div is in the center of two other floated divs. Is there a way to make a table go 100% the width of its container div? Css code: Code:
/* left bar: */
#navBar{
width: 185px;
float: left;
}
/* right bar: */
#rightModulesContainer {
width: 130px;
margin: 0;
padding: 0px 0px 0px 10px;
float: right;
}
/* center content: */
#content{
padding: 0px 5px 0px 0px;
margin-top:0;
margin-bottom:0;
margin-left:4px;
margin-right:0px;
float: left;
text-align:left;
/*display: inline;*/
}
/* contained in #container: */
#dataGridContainer{
margin: 0;
padding-bottom: 10px;
min-width:360px;
}
.categoryGridStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
color: #000000;
width:100%;
}
and here is the layout of the divs: Code: <div id="navBar">left navigation bar here (tree view)</div> <div id="rightModulesContainer">right side bar here</div> <div id="content"><div id="dataGridContainer">datagrid here</div></div> Thanks for your help in advance. I've been messing with this for a while - trying to get it to work cross browser is driving me nuts. I've tried placing the divs in containers and floating the containers, I've tried everything I can think of... |
|||||||