|
CSS - Short Form Of Hexadecimal
Hi,
How come one can I write short form of hexadecimal(shorthand) #fff instead of normal #ffffff? How does it work? Does browser automatically assume that the rest is the same? Thank you. Similar TutorialsI have a body, a container div, and inside the container div, a head, navigation, content, and footer div. I have the background of the body filled in with a repeating background image .. and I have the footer div with clear: both, so it will show up below the content div, rather than just underneath it. The problem is the body background does not extend past the lower portion of the footer. How can I fix this? Link to Website a:hover {color: ##AECBE1} a:link {text-decoration:none; color: #000000} A:visited{text-decoration:none; color: #000000} P {text-align:justify;font-size:8pt} Font {text-align:justify; font-size:7pt} h1 {font-size:24pt} h2 {font-size:18pt} BODY {SCROLLBAR-FACE-COLOR: #FFFFFF; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #eeeeee; SCROLLBAR-ARROW-COLOR: #d8d8d8; SCROLLBAR-TRACK-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR: #eeeeee; } ^All in middle.css what's wrong with it? Ok, when I view my page, the justified part and everything else works, but the link wont change color when my mouse goes over it. WHY?!?!?! I'm using The Man in Blue's "footerStickAlt" code to ensure a footer sticks at the bottom of the page even with *short* content. No problem there til I resize my browser window. When the browser window shortened and I scroll down, the footer has jumped up and is concealing part of the menu. Yikes. Pages where the content is longer than the menu are fine, so I haven't uploaded them. It's only when content is shorter than the menu that this issue arises ~ which is the exact issue it's supposed to be tackling! Flaw/s in the code? I've already tried ripping out the horizontal min-widths and it seems there's no conflict there. From what I can make out, it's just a matter between the menu and the footer.... altho, when the browser is shortened in the way I've described the actual footer moves higher than it should be. Still, can't believe it's blueman at fault here. Must be something I've missed or tagged wrong. Or maybe it just doesn't work with this kind of menu? For reference, Blue Man's original code is he http://themaninblue.com/writing/perspective/2005/08/29/ Am just hoping the clever folk here will have some advice. I've burnt the whole day on this to no avail :| Whenever I specify <form> in an html page I find that the browser will skip a space after I'm done with the form. Overly simplified example: Code: <html> <body> <form name="input" action="html_form_action.asp" method="post"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form> test (notice that this is two lines below the input box instead of one) </body> </html> Is there any way to use a <form> tag but still have the text after the form appear right after the form and not skip extra spaces? I'm relatively new to css and i'm hoping this forum will help me get better acquainted by working out some of the problems i'm running into. the address is: thenserenity.com/form.html this form looks fine in everything except IE. in IE there is no margin and the text starts in the top left of the div, as you can see if you check it out in ie. i have two css's, 1 general and 1 for ie. here is the ie css: --------------------------- @charset "utf-8"; /* CSS Document */ div#wrapper { background:none; filterrogidXImageTransform.Microsoft.AlphaImageLoader(src='colhead-tl.png' ,sizingMethod='crop'); } .nav { margin-top:49px; } .rounded_STYLE { background-color: white; /* if needed */ border: 25px solid white; /* if needed */ position: relative; } .rounded_STYLE > .tl, .rounded_STYLE > .tr, .rounded_STYLE > .bl, .rounded_STYLE > .br { width: 750px; height: 25px; position: absolute; } .rounded_STYLE > .tl { background: url(../images/colhead-tl.jpg) top left no-repeat; top: -25px; left: -25px; } .rounded_STYLE > .tr { background: url(../images/colhead-tr.jpg) top right no-repeat; top: -25px; right: -25px; } .rounded_STYLE > .bl { background: url(../images/colhead-bl.jpg) bottom left no-repeat; bottom: -25px; left: -25px; } .rounded_STYLE > .br { background: url(../images/colhead-br.jpg) bottom right no-repeat; bottom: -25px; right: -25px; } br.clear { clear:both; } /* FORM -----------*/ .rounded_STYLEform { background-color: white; /* if needed */ border: 25px solid white; /* if needed */ position: relative; width:auto; height: 200px; } .rounded_STYLEform > .tl, .rounded_STYLEform > .tr, .rounded_STYLEform > .bl, .rounded_STYLEform > .br { width: 750px; height: 25px; position: absolute; } .rounded_STYLEform > .tl { background: url(../images/colhead-tl.jpg) top left no-repeat; top: -25px; left: -25px; } .rounded_STYLEform > .tr { background: url(../images/colhead-tr.jpg) top right no-repeat; top: -25px; right: -25px; } .rounded_STYLEform > .bl { background: url(../images/colhead-bl.jpg) bottom left no-repeat; bottom: -25px; left: -25px; } .rounded_STYLEform > .br { background: url(../images/colhead-br.jpg) bottom right no-repeat; bottom: -25px; right: -25px; } ---------------------- anyone know how to make this form look, in ie, as it does in everything else. thanks, jtn how would i change the colour of a text box in css? and also not sure if this is css or javascript but how do i clear a text box when the user clicks on it to write in their username? thanks tony Hello, I am creating a form based an ordered list. I want to have two columns: - Left column with labels and 20% width. - Right column with inputs with 80% width. The total width is defined by a div that contains the list ... or by the list itself. In this moment I have a few problems: 1. The inputs don't take the total width; 2. The labels get outside of the container on the left; 3. The required icon does not take a space to the input; 4. The input button is not aligned with other inputs. Could someone please help me out in solving these problems and improving my code? I created a sample project and uploaded it to: http://www.27lamps.com/Labs/Form/Form.html Any help would be great! Thank You, Miguel Is there a way to alter the <form> starting tag so that it doesn't add white space before and after it? I have this form tag that is really screwing with my design because of the spacing it's adding to the page ... I have found CSS to make an entire form pretty, but not something to remove the space that this tag adds to my page. Hi, I'm having difficult with learning forms and how to style them. I've gotten mostly what I am looking for just now I don't seem to be able to make adjustments: Adjusting the size of the text-window, wrapping the frame boarder around the fieldset. Those are my main issues, any help would be greatly appreciated. I'm reading around, wondering how I get form fields to change style and the text that is inserted in the form fields to change style (font/size).. Is there an easy way to do this? for example http://member.classifieds.com/userjoin.php the entry boxes are smaller, and the text is smaller.. I looked at their code and I'm not quite sure how they achieved this. I am not able to give a width to Label. so i tried to put a span around it and provide a width. still it doesnt work I want to shift the text fields to the right so that all are alligned at a right vertical line even if the label is of different char length. http://www.variable3.com/clients/be...gerDetails.html Hi there, I've been battling to get this right...basically I have the following HTML setup: <input class="tboxes" type="textbox" /> <input class="tboxes2" type="textbox" /> "span.label01" is an inline element, and appears to the left of the textbox "input.tboxes". What I am trying to do attach some style to "span.label01" AND "div.box10" when the textbox receives focus. I have tried the following CSS code: input.tboxes:focus { color:#FF9900; } input.tboxes2:focus { color:#FF9900; } but nothing happens. I know this is a CSS selector issue, but I just can't seem to get it right. I have even tried adjacent sibling selectors, and nothing. Can anyone help me here? TIA! How do you keep a dropdown box on top of all other windows? Hi all, I am looking for information on overlaying a form over a site. You see this technique used for advertisements and the like, generally in flash. Most of what I am finding is suggesting the z-index using div tags, and I am looking to corroborate that. Any information or links to good examples or tutorials would be great. Thanks Caden hey What i want is to have one line with a select box and a submit button on it. But when i put those 2 elements in a form it takes up 2 lines. How can i make it so that the form wont require an extra line? Hello. I have created a form with CSS and Divs. My problem is my "Submit your Testimonial" button background is all messed up and doesn't look like my "Reset Form" button in IE 6.0 SP2. It looks fine in Firefox. Not sure how or where this gets changed. It seems to be adding a thicker border or something? Here is the page: http://www.nessphysiotherapy.com/testimonials.php Suggestions? Thanks Matt When i click on the Login at the loginform on www.ipan.be the form is jumping under the text, IE is good... Is there anyone who has this porblem or a solution? I need css relative positioning for a web form interface on a browser page, so it is located (Center/middle) despite browser size. Then I need each of the elements inside of the form table absolutely positioned in relation to the box. The are eight graphics that surround the table. I would actually like to get rid of the table completely if it was possible. I believe the is a cleaner and more efficient way of doing this in css, but I haven't got a clue as to where to start? I have just read that I can apply the styles to this page in the header instead of being pulled from a universal style sheet, I would like to do this as this is a login page and is page is unique from the rest of the site. Any and all help greatly appreciated. Hello, my code uses span tags within a link tag to make an html form become visible when the link is hovered. It works perfectly in everything except IE7/8. I would really appreciate it if anyone is able to help me stomp out this bug. Bug description: After text has been entered into the form, the form will then close prematurely when the cursor is moved over the fields (specifically, while crossing the tiny gap between the fields). Recipe to reproduce bug: 1. Hover the link to reveal the form, and fill the fields with text. 2. Close the form by moving the mouse off of the form. 3. Mouse back onto the link and move the cursor continuously over the text fields. If you're in IE7/8 then the form will seem to suddenly close at random. I've uploaded a stripped down version of the code for your convenience: http://mobile.sheridanc.on.ca/~goodalek/test2.htm CSS code: Code: .hyperLeft2:hover{
background-color: #E9F1F9;
text-decoration:none;
z-index:50;
}
.hyperLeft2 span{ /*CSS for enlarged image*/
text-decoration:none;
position: absolute;
background-color: #E9F1F9;
text-align:left;
left: 20px;
font-size: 13px;
color: #474747;
top: -95px;
visibility: hidden;
color: black;
width: 500px;
}
.hyperLeft2:hover span{ /*CSS for enlarged image on hover*/
background-color:#aaaaaa;
visibility: visible;
left: 20px;
top: -95px;
z-index:60;
}
HTML code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="test2.css">
</head>
<body>
<br><br><br><br><br><br>
<a href="#" class="hyperLeft2">Request a Quote<span>
<form name="form1">
<input type="text" name="name" ><br>
<input type="text" name="custEmail" ><br>
<input type="text" name="phone" ><bR>
<input type="text" name="domain" ><br>
<input type="text" name="name2" ><br>
<input type="text" name="custEma3il" ><br>
<input type="text" name="phon4e" ><bR>
<input type="text" name="domai4n" ><br>
<input type="submit">
</form>
</span></a>
</body>
</html>
Please let me know if any further information is required. |
|||||||