The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Prevent Image Stretching
ftbadolato
post Oct 18 2017, 10:38 PM
Post #1


Novice
**

Group: Members
Posts: 25
Joined: 21-June 17
Member No.: 26,440



IPB Image

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>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
ftbadolato   Prevent Image Stretching   Oct 18 2017, 10:38 PM
Christian J   The above contains ASP(?) code. Can you show us th...   Oct 19 2017, 05:03 AM
pandy   I don't think the CSS contains the declaration...   Oct 19 2017, 07:01 AM
ftbadolato   I don't think the CSS contains the declaratio...   Oct 19 2017, 08:33 AM
ftbadolato   The above contains ASP(?) code. Can you show us t...   Oct 19 2017, 08:32 AM
Christian J   Here is the rendered code No, that's another...   Oct 19 2017, 09:43 AM
ftbadolato   Here is the rendered code No, that's anothe...   Oct 19 2017, 09:55 AM
ftbadolato   An online sample page might be helpful. Here is...   Oct 19 2017, 10:01 AM
Christian J   Here is a link to the template page I am using: h...   Oct 19 2017, 11:06 AM
ftbadolato   It would be easier for everybody if you created a...   Oct 19 2017, 12:15 PM
Christian J   Please see my very first post. That's exactl...   Oct 19 2017, 12:49 PM
ftbadolato   [quote name='ftbadolato' post='135152' date='Oct ...   Oct 19 2017, 01:18 PM
Christian J   I'm won't check all the stylesheets manual...   Oct 19 2017, 02:19 PM
ftbadolato   I'm won't check all the stylesheets manua...   Oct 19 2017, 04:15 PM
ftbadolato   Someone on another forum suggested I change positi...   Oct 19 2017, 10:32 AM
Christian J   Here is the rendered code, but this will have no ...   Oct 19 2017, 12:50 PM
Christian J   Since the INPUT is 100% wide the image would curre...   Oct 19 2017, 05:11 PM
ftbadolato   What's the purpose of the image? If it's ...   Oct 19 2017, 06:23 PM
ftbadolato   I just decided to put it next to the label instead...   Oct 19 2017, 06:36 PM
Christian J   Here's an idea using the CSS "display: ta...   Oct 19 2017, 06:54 PM
Christian J   Here's a probably better one: div { width...   Oct 20 2017, 09:54 AM


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 15th February 2019 - 01:38 PM