Prevent Image Stretching |
Prevent Image Stretching |
ftbadolato |
Oct 18 2017, 10:38 PM
Post
#1
|
Novice Group: Members Posts: 25 Joined: 21-June 17 Member No.: 26,440 |
Above is a picture of the problem I am having. Ideally, I want that calendar image on the right side of the text box. I know the CSS is causing the issue, but I am using a template and not sure how to counteract the CSS. I don't want to change it, but prefer to simply wrap the image in a div or span to cause it to display correctly. Here is the HTML and CSS. CODE .contact-form { position: relative; vertical-align: top; z-index: 1; margin: 0; top: -10px; } .contact-form .txt-form { display: none; } .contact-form .coll-1, .contact-form .coll-2, .contact-form .coll-3 { margin-bottom: 23px; float: left; width: 200px; } .contact-form .coll-1 p, .contact-form .coll-2 p, .contact-form .coll-3 p { margin-bottom: 3px; } .contact-form .coll-1, .contact-form .coll-2 { margin-right: 10px; } .contact-form fieldset { top: 9px; border: none; padding: 0; width: 100%; position: relative; z-index: 10; } .contact-form label { display: block; min-height: 45px; position: relative; margin: 0; padding: 0; float: left; width: 100%; } <div id="contact-form" class="contact-form"> <fieldset> <div class="coll-2"> <p>Due Date*</p> <label class="bidduedate"> <asp:TextBox ID="txtBidDueDate" runat="server"></asp:TextBox><asp:ImageButton ID="imgPopup" ImageUrl="/img/calendar.png" ImageAlign="Middle" runat="server" /> <ajaxToolkit:CalendarExtender ID="CalendarExtender1" PopupButtonID="imgPopup" runat="server" TargetControlID="txtBidDueDate" Format="MM/dd/yyyy"> </ajaxToolkit:CalendarExtender></label> </div> </fieldset> </div> |
Christian J |
Oct 19 2017, 05:03 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
The above contains ASP(?) code. Can you show us the rendered HTML, as it would appear to a web browser?
|
ftbadolato |
Oct 19 2017, 08:32 AM
Post
#3
|
Novice Group: Members Posts: 25 Joined: 21-June 17 Member No.: 26,440 |
The above contains ASP(?) code. Can you show us the rendered HTML, as it would appear to a web browser? Here is the rendered code, but this will have no impact on the image: CODE <div class="coll-3"> <p>Due Date*</p> <label class="workduedate"> <input name="ctl00$ContentPlaceHolder1$txtWorkDueDate" type="text" id="ctl00_ContentPlaceHolder1_txtWorkDueDate" readonly="readonly" /><input type="image" name="ctl00$ContentPlaceHolder1$imgPopup2" id="ctl00_ContentPlaceHolder1_imgPopup2" src="/img/calendar.png" align="middle" style="border-width:0px;" /> <br> <span id="ctl00_ContentPlaceHolder1_errorworkduedate" class="error">*This is not a valid due date.</span> <span id="ctl00_ContentPlaceHolder1_emptyduedate" class="empty">*This field is required.</span> </label> </div> |
Christian J |
Oct 19 2017, 09:43 AM
Post
#4
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
|
ftbadolato |
Oct 19 2017, 10:01 AM
Post
#5
|
Novice Group: Members Posts: 25 Joined: 21-June 17 Member No.: 26,440 |
An online sample page might be helpful. Here is a link to the template page I am using: http://onepropertyway.com/index-4.html This is NOT the page I am working, but you can see all the styles. Just imagine trying to put this image to the right of one of the text boxes. |
Christian J |
Oct 19 2017, 11:06 AM
Post
#6
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
That template uses several stylesheets and javascripts (that might affect styling as well). QUOTE This is NOT the page I am working, but you can see all the styles. Just imagine trying to put this image to the right of one of the text boxes. It would be easier for everybody if you created a sample page. Make a static HTML copy of the page you're working on, and remove HTML and CSS little by little until all that remains is a minimal test case. |
ftbadolato |
Oct 19 2017, 12:15 PM
Post
#7
|
Novice Group: Members Posts: 25 Joined: 21-June 17 Member No.: 26,440 |
[quote]This is NOT the page I am working, but you can see all the styles. Just imagine trying to put this image to the right of one of the text boxes.[/quote]
It would be easier for everybody if you created a sample page. Make a static HTML copy of the page you're working on, and remove HTML and CSS little by little until all that remains is a minimal test case. [/quote] Please see my very first post. That's exactly what I did. The issue is somewhere in that CSS. |
Christian J |
Oct 19 2017, 12:49 PM
Post
#8
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
|
Lo-Fi Version | Time is now: 24th April 2024 - 09:43 AM |