CSS - Blockquote And Form Problem
I dont understand why form at the following address take blockquote's background.
http://refinethetaste.com/html/cp/?Section=stats&Process=ViewStats Code: Code: <form action="" method="post"> <fieldset class="width50"> <div class="row"> <label for="DateRange">Date Range</label> <select name="DateRange" class="width50"> <option value="Today" selected="selected">Today</option> <option value="Yesterday">Yesterday</option> <option value="Last24Hours">Last 24 Hours</option> <option value="Last7Days">Last 7 Days</option> <option value="Last30Days">Last 30 Days</option> <option value="ThisMonth">This Month</option> <option value="LastMonth">Last Month</option> <option value="AllTime">All Time</option> </select> </div> </fieldset> <fieldset class="width50"> <input type="submit" value="Go" class="button" /> </fieldset> </form> <blockquote> <p> <div id="placeholder" style="width:100%;height:300px"></div> </p> <script> $(function () { // a null signifies separate line segments var d1 = [[1,38],[2,132],[3,41],[4,3],[5,291],[6,62],[7,31],[8,33],[9,125],[10,0],[11,0],[12,0],[13,0],[14,0],[15,0],[16,0],[17,0],[18,0],[19,0],[20,0],[21,0],[22,0],[23,0],[24,0],[25,0],[26,0],[27,0],[28,0],[29,0],[30,0],[31,0],]; $.plot($("#placeholder"), [d1]); }); </script> </blockquote> Similar TutorialsAll, I'm running into an annoying thing. Everytime I place an image on either side of something I surround with my blockquote tags, the text within the blockquotes will indent itself to make room for the image, but the border I have specified in the blockquote style does not indent itself with the text, so the image winds up sitting on top of one border. How can I fix this problem so that the border of the blockquote will also move to the side in presence of an image right beside it? Thanks. i have a question about blockquote styles. its being used in my blog: http://www.insanityonline.blogspot.com/ this is the css thats used: Code: blockquote { margin: 0 0 0 30px; padding: 10px 0 0 20px; font-size: 88%; line-height: 1.5em; color: #666; background: url(http://www.blogblog.com/tictac/quotes.gif) no-repeat top left; } ok i made 2 new images of smaller quote marks and rotated. now is there a way to get say the pics to have one in the top left AND bottom right as the words were in a quote?? Dear all, A very strange css problem when applying styles to the form tag. This page, when viewed in FF or Safari, has odd red background colouring the central directory items. It is caused by the lower form tag. If I remove the lower form tag, the problem disappears, but I don't want to remove the lower form tag! Can anyone (dev)shed any light on this? Looks fine in IE, and it validates fine. Many thanks Hello, I have been working for a few days on this form layout and it works pretty much the way I want it to in FF but everything goes to hell when I open it in IE. If you look at the code the three <td class="td_spacer"> elements are floated to the right but I dont know why the in IE they extend vertically off the page instead of reaching the predefined width of the form, where they should then be forced down to the row below. I hope someone can help me make sense of this. Code: form{ display:block; width:566px; margin:0px; padding:0px; } #form_table{ border-style:solid; border-color:black; border-width:thin; border-spacing:0px; border-collapse: collapse; float:right; width:564px; margin:0px 0px 50px 0px; padding:0px; } #form_table thead tr{ color:white; text-align:left; background-color:#1B1B1B; border:solid black thin; } #form_table tbody tr td{ float:right; display:block; } #country_list{ list-style-type:none; margin:0px; padding:5px 0px 0px 0px; } .td_spacer{ display:block; margin:0px; padding:10px 0px 0px 0px; } .input{ width:300px; } #message_box{ width:558px; height:286px; } Code: <form name="jobs" action="php/rtProcessor.php" method="post"> <table id="form_table" summary="post form"> <thead> <tr> <th><span class="">Post</span></th> </tr> </thead> <tbody> <tr> <td style="float:left;"> <ul id="country_list"> <li id="china"><input type="radio" name="color" value="red" />red</li> <li id="japan"><input type="radio" name="color" value="green" />green</li> <li id="korea"><input type="radio" name="color" value="blue" />blue</li> <li id="thailand"><input type="radio" name="color" value="orange" />orange</li> <li id="other"><input type="radio" name="color" value="Other" />Other</li> </ul> </td> <td class="td_spacer"> <label for="companyname">Company Name:</label> <input type="text" id="companyname" name="companyname" class="input" /> </td> <td class="td_spacer"> <label for="email">E-Mail Address:</label> <input type="text" id="email" name="email" class="input" /> </td> <td class="td_spacer"> <label for="subject">Subject:</label> <input type="text" id="subject" name="subject" class="input" /> </td> </tr> <tr> <td> <label for="message">Listing:</label> <textarea id="message_box" name="message" rows="16" cols="67"></textarea> </td> </tr> <tr> <td> <label for="hii">1+1 is?</label> <input type="text" id="hii" name="hii" class="input" /> </td> </tr> <tr> <td> <input type="submit" value="Submit" name="submit" /> </td> </tr> </tbody> </table> </form> Please take a look at my css form he http://www.pearl.ru/isdunyasi/admin/default[1].htm For some reason row under select boxes dislocated. I couldnt figure out why. Any help appreciated. Code: /**************** Form styles ****************/ fieldset { margin:1em 0; border:none; border-top:1px solid #aaaaaa; } legend { color:#aaaaaa; background:transparent; font-size:14px; font-weight:bold; } label { float:left; width:100px; padding:0 10px; text-align:right; } fieldset div { margin-bottom:.5em; padding:0; display:block; } fieldset div input,fieldset div textarea { width:150px; border-top:1px solid #000000; border-left:1px solid #000000; border-bottom:1px solid #aaaaaa; border-right:1px solid #aaaaaa; padding:1px; } #Submit input { border:1px solid #d7d7d7; padding:2px; background:#aaaaaa; color:#FFFFFF; font-weight:bold; } fieldset div.Req { font-weight:bold; } Hello every one, thanks for your help before hand, I have validating my own website, so far so good, but I have this problem. I can not figure out why is not validating, the problem lies on this second line of code: <input type="hidden" name="cfgId" value="1" /> So part of the form looks like this: <form action="/cgi-bin/ssecure/ssecure.pl" method="post" enctype="multipart/form-data"> <input type="hidden" name="cfgId" value="1" /> The Error message for validation says this: Validation Output: 1 Error Line 152, Column 49: 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. <input type="hidden" name="cfgId" value="1" / > <input type="hidden" name="cfgId" value="1" / > The last haracter ">" of this last line are in RED. Then it says: 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>"). ------------------------------------------------------------------------ The question, what is that I am doing wrong? Thanks, At this address my website form and shows differently in IE and Firefox. The questions I have a 1. the border I have coloured but in IE if I do not style it IE produces a nice rounded border but the wron colour. Does anyone know how to get the rounded border corners AND ones own colour? 2. In IE the space between the legend text and the first label text is OK but in Firefox is is greater for some reason. Any clues as to how to make it the same? i have a style sheet which says form should have no margin/paddings at all.. now the problem is that i have a form and i use: <form style="margin-top:12em; padding-top:12em;" > however if i use a value of anything <12 it doesnt move down one tiny bit, for 12em it will move down a bit (about 2em) and if i set it to 14 then it will move down more (about 5em). the form in question has an image & a hidden field. which have margin:0, padding0 applied to them, but my GUESS is it doesnt matter what they have because i am telling form to move down so all elements within it should move down as well but still be margin:0 etc? or am i reading/thinking it wrong? Hi all, I cannot figure why last two form inputs at the following website appears wrong near the end. I also included a screenshot. http://www.refinethetaste.com/yk/addproject.asp Hello, I have a problem to display a List/Menu in IE. It cut off the text in the drop down list when I set the WIDTH of the drop down box shorter than the text. It works fine in FireFox. Here is the picture I captured to demonstrate what I'm talking about. Sorry the forum don't allow me to post url, please copy the link and paste it in your browser linklighthouse.com/dropdown_ie.html How do I fix this problem in IE? Please help! Thanks hi my page involves having a form element inside of a div. the div is floated left. relevant (seemingly) css from my stylesheet & html code (all simplified for readability) form { margin: 0px; padding: 0px; } .mydiv { float: left; } html looks vaguely like: <div class="mydiv"><form name="blah" action="blahblah"> .... all form controls </form></div> PROBLEM!!!! in mozilla, none of the form elements display. in ie, everything displays as expected. PLEASE HELP ME BEFORE I GO INSANE AND START KILLING INNOCENT PEOPLE. thanks in advance. d 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? Hey, I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble. my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css Thanks. Hello everyone, I am hoping I could get some help on this. I'm the new Marketing guy at this company. One of my duties is to fix an issue with our website which was built by the last guy to sit in this chair. I may not know how to build a proper webpage, but this guy knew exactly how not to do it and ran with just that. So, the issue lies within this example page: tinyurl.com/rediculouswebsite The footer ends up under-lapping the table when viewed in IE (when not in compatibility mode) and Firefox. I know this is a ridiculously constructed site, I just need to fix this one problem and be done with web development forever. High fives and scotch from my boss very well may ensue. Thank you all very much. Hello. I am new at css and web design so if these are easy problems please excuse. First of all, the website url http://www.onlinecasinoboss.com In Firefox, the unordered lists <ul> in the left column do not display correctly. The left margin is way too big. I'm not sure why, please look at the page in IE to see what I want it to look like. And in Internet Explorer, the spacing between my top image, header bar, and main page is screwy. There should be no space between the header image and header bar (the flags are in this area). Also there should only be 2px spacing between the header and the main page, however it appears there is atleast 24px there. Again please refer to the page in FF to see what I want it to look like. I like css, and have decided to pursue my first design in css based off of the many professional designers reconmendations and reviews. But I must say it is a major headache to deal with cross-browser/platform display problems. And what professional designer wants to rely on 'css-hacks' when producing a product for a major vender. Just beginner bitching. Thanks for the help! 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 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. 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 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 I'm having trouble positioning my form elements how I want them. The following code shows correctly in Mozilla but in IE, there are spaces around the form elements. How can I get rid of all the spacing? PHP Code: <form> <div style="border:1px solid;width:200px;height:20px;"></div> <div style="float:left;border:1px solid;width:100px;height:20px;"></div> <div><input style="border:1px solid;width:100px;height:20px;" /></div> <div style="float:left;border:1px solid;width:100px;height:20px;"></div> <div><input style="border:1px solid;width:100px;height:20px;" /></div> <input type="submit" style="font-size:12px;border:1px solid;width:200px;height:20px;" /> </form> Take a look at this comparision image: Thank you! By the way, I've also tried using a table and was still unable to get rid of all the spacing. |