I am creating a questionnaire (I have little coding expertise) and am completely stuck with the styline in IE.
Firefox and Chrome both work perfectly but Internet Explorer won't center the content, the input fields are also overlapping the text areas.
I know the is a place for questions and not so much coding help but I thought someone might be able to notice something obvously wrong and save me a massive headache!
<body>
<style type="text/css">
#wrap {
width:800px;
margin:0 auto;
background-color:white;
height:auto;
margin-top:-16px;
}
#left_col {
float:left;
width:400px;
}
#right_col {
float:right;
width:400px;
}
body {
background-image:url(questionnaire-background.png);
font-family: calibri, verdana;}
</style>
<div id="wrap">
<center>
<br>
<h1>HR Newsletter Questionnaire</h1>
<div>
<p style="margin-top:20px">What is your name?</p><br>
<p><input type="text" name="name" style="margin-bottom: 43px; margin-top:-46px; width: 50%"></p>
</div>
<div>
<p>Is the HR Newsletter something you would like to receive?<p><br>
<p><input type="text" name="like_to_receive" style="margin-bottom: 43px; margin-top:-46px; width: 50%"></p>
</div>
<div>
<p>Comments:</p><br>
<p><input type="textarea" name="comments" style="margin-bottom: 43px; margin-top:-46px; width: 50%"></textarea></p>
</div>
<div>
<p>What do you like from the current HR Newsletters?</p><br>
<p><input type="text" name="what_do_you_like" style="margin-bottom: 43px; margin-top:-46px; width: 50%"></p>
</div>
<div>
<p>What do you do like or would like to be seen removed from the HR Newsletter?</p><br>
<p><input type="text" name="not_like" style="margin-bottom: 43px; margin-top:-46px; width: 50%"></p>
</div>
<div>
<p>What would you like to be seen added to the HR Newsletter?</p><br>
<p><input type="text" name="added" style="margin-bottom: 43px; margin-top:-46px; width: 50%"></p>
</div>
<div>
<p style="margin-bottom:-22px">How often would you like to see the HR Newsletter?</p><br>
<p>
<input type="radio" name="how_often" value="weekly">Weekly
<input type="radio" name="how_often" value="fortnightly">Fortnightly
<input type="radio" name="how_often" value="monthly">Monthly
<input type="radio" name="how_often" value="quartely">Quarterly
<input type="radio" name="how_often" value="yearly">Yearly<br></p>
</div>
<div>
<p style="margin-top: 40px; margin-bottom:-22px">Would you prefer the HR Newsletter to see more of less of the following:</p><br>
<p>
<input type="radio" name="would_you_prefer" value="more_pictures">More pictures with less text
<input type="radio" name="would_you_prefer" value="more_text">More text with less pictures
<input type="radio" name="would_you_prefer" value="both">A balanced mixture of both<br></p>
</div>
<div>
<p style="margin-top: 40px; margin-bottom:-22px">How long would you like the HR Newsletter to be?</p><br>
<p>
<input type="radio" name="how_long" value="9">Less than 9 pages
<input type="radio" name="how_long" value="10_15">10 – 15 Pages
<input type="radio" name="how_long" value="15">15 + Pages<br></p>
</div>
<br><br><br><br>
<div>
<p><input type="submit" value="Send" style="margin-bottom: 43px; margin-top:-46px; width: 50%">
<input type="reset" value="Clear" style="margin-bottom: 43px; margin-top:-46px; width: 50%"><br></p>
</div>
</center>
</div>
<body>
The easiest solution (and this is not really the best way to go about this, for the record) would be to add the following line in your CSS:
body { text-align:center; margin:0px auto; }
I checked this in IE 9.0.8.
Related
I have been trying to style my "contact us" slider window but for my lack of knowledge (started website designing only a month back for my own project) I am kinda stuck.
The functionality is working great, but there are a few issues:
"contact us" text and a image that I am trying to get in a line is
not working.
in collapse mode, div containing text "contact us" is getting
reduced width wise.
Please excuse my not-so-technical language, since I am new to the concept.. Please refer my website koncreteplanet.com.. also, I have created a jsfiddle to give a glimpse of the code I am using (https://jsfiddle.net/jjff2o2x/). Thanks in advance!!
Javascript code:
jQuery("#ContactUs_header").click(function () {
jQuery('#slideContactUsbox').slideToggle('slow');
});
HTML / PHP code:
<div class="row">
<div class="col-md-8">
</div>
<div class="col-md-4" id="contactus-panel">
<div class="contactus-panel">
<div id="ContactUs_header" class="contactus_footer" >
<p>Contact Us</p>
<img align="right" width=auto height="40px" src= "<?php echo bloginfo('template_directory') . "/image/handshake.png" ; ?>">
</div>
<div id="slideContactUsbox" class="contactus-extended">
<div class="container" style="width:300px;align:left;" id="MailUs-Panel">
<form name="Form-MailUs" id="Form-MailUs" method="post" action=<?php echo (get_template_directory_uri() . "/contactus/html_form_send.php"); ?> >
<div class="">
<input type="text" class="form-control mailflds" name="first_name" id="first_name" maxlength="50" size="30" placeholder="Name">
</div>
<br>
<div>
<input type="text" class="form-control mailflds" name="email" id="email" maxlength="80" size="30" placeholder="E-Mail">
</div>
<br>
<div>
<input type="text" class="form-control mailflds" name="telephone" id="telephone" maxlength="30" size="30" placeholder="Mobile / Landline Number">
</div>
<br>
<div>
<textarea name="comments" id="comments" class="form-control mailflds" maxlength="1000" cols="25" rows="6" placeholder="Enter your comments"></textarea>
</div>
<br>
<div>
<Button class="btn btn-primary btn-block btn-custom" id="Submit_MailUs" name="Submit_MailUs">Submit</Button>
</div>
<div id="ack-mailus-err" style="color:red;font-family:garamond;font-size:18px;text-align:center;">
</div>
</form>
</div>
<div id="ack-mailus" style="color:green;font-family:garamond;font-size:18px;text-align:center;">
</div>
</div>
</div> <!-- end of contactus panel -->
</div>
</div>
CSS code
.contactus-panel{
position:fixed;
bottom:0;
z-index:9999;
}
.contactus_footer{
position:relative;
/*z-index: 10; */
/*float:right; */
text-align: left;
line-height: 1.5;
cursor: pointer;
padding: 5px 2px 4px 15px;
font-family:'Raleway', garamond, sans-serif;
font-size:20px;
background-color: #084000;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
position: relative;
width: 100%;
vertical-align:center;
float:left;
}
.contactus_footer a {
color: #fff;
}
.contactus-extended{
background-color:#fff;
padding-top:20px;
padding-bottom:20px;
}
slideToggle() is jQuery method. Please using jQuery.
https://jsfiddle.net/pgqnjdvp/
I was able to resolve both parts of the issue.. can't believe it was that simple.. for part 2: I just added width exclusively to the container and it ceased to exist... also resolved part 1 of the issue.. added float and vertical-align:middle to both the text and img element styling too in addition to the div class and got the desired result.
How can I use inline css to change the button and hover colors in the embedded Mailchimp form on my site Homeschool With Love? I would like the background color to be #0A99AA and the hover color to be #d40000. It is a Wordpress.org site. Can you please show what code I should insert and where I should insert it? Thanks. Here's the code I have right now:
<div style="border-style: solid; border-width: 2px; border-color: #0A99AA;">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//homeschoolwithlove.us13.list-manage.com/subscribe/post?u=74d56fdb848e8be499cc4df0e&id=a119f30caa" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div style="text-align: center; color: #d40000; font-size: 120%; padding-right: 10px; padding-left: 10 px;">
<h3>Sign up for the Homeschool With Love Newsletter and get the Angel Learning Resource Pack FREE</h3>
</div>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name <span class="asterisk">*</span>
</label>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none">
</div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_74d56fdb848e8be499cc4df0e_a119f30caa" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
</div>
add these two lines immediately after the #mc_embed_signup line:
#mc-embedded-subscribe { background-color: #0a99a !important; }
#mc-embedded-subscribe:hover { background-color: #d40000 !important; }
My page is divided in 3 parts and i have used flex box model for the layout. First part is top-panel.jsp which i have included explicitly in every page of my website. second part is left body and third is right body which i divided using the concept of "div" and flex but now i want to bring the left-body div and right-body div into a single div but it is not working on my page.
The code is:
<%# include file="top-panel.jsp" %>
<div class="left_body">
<!-- Heading Pannel Starts Here -->
<div class="welcome">
<p id="heading-pannel">Welcome ${username}</p>
<hr id="hr-thick">
</div>
${shortcut}
<div class="form_area">
<p> ${status} </p>
<div>
<c:if test="${emptyNotificationMessage!= null}">
</c:if>
<c:if test="${notifications!= null}">
<h3>Tasks pending</h3>
<hr id="hr-thin" />
<div>
<c:forEach items="${notifications}" var="next">
<form method="post" action="viewForm.htm">
<img src="images/addon/u175.png" alt="pointer" class="pointer" />
<input type="hidden" name="refNum" value="${next.key}"> ${next.value}
<input type="submit" value="View Form">
</form>
<br>
</c:forEach>
</div>
</c:if>
<c:if test="${appHistory!= null}">
<br/>
<br/>
<br/>
<br/>
<br/>
<h3>Application under review</h3>
<hr id="hr-thin" />
<div>
<c:forEach items="${appHistory}" var="next">
<img src="images/addon/u175.png" alt="pointer" class="pointer" /> ${next.value}
<br>
</c:forEach>
</div>
</c:if>
${myProjectsHeader}
<div id="myProjects">
<c:forEach items="${myProjects}" var="next">
<form method="post" action="viewIndividualProject.htm">
<input type="submit" value="${next.key}" class="transparent_btn">
<input type="hidden" name="individualProjectLink" value="${next.value}">
<input type="hidden" name="individualProjectName" value="${next.key}">
</form>
<br>
</c:forEach>
</div>
</div>
</div>
</div>
<div class="right_body">
<div class="right-box">
<h3 class="h3-sty2">Do you Know</h3>
<p>
<h5>The total period of absence on Casual <br> Leave(CL) including Sundays and <br> other holidays intervening, prefixing <br> and/or suffixing shall not ordinarily <br> exceed 9 days at a time.<br>Read Leaves rules</h5></p>
<p>
<h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p>
<p>
<h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p>
<hr id="hr-right-panel">
<p>
<h5>Are you new to Rnd Automation System?<br>Read FAQs.</h5></p>
<div> For any query e-mail to rndops#iitg.ernet.in </div>
</div>
</div>
When i add the whole code of left body and right body in a single div, The layout completely goes away. If someonecan help me resolve it. it would be great.
The css of left body and right body is:
.left_body {
position: relative;
width: 69%;
margin-top: 1px;
}
.right_body {
position: relative;
/* display:block; */
width: 29%;
/* margin-top: 48px;
border:thin solid #BDBDBD;
border-radius:5px; */
}
.right-box {
margin-top: 48px;
border: thin solid #BDBDBD;
border-radius: 5px;
}
You needs to use float and clearfix class. please see the demo.
.left_body {
position: relative;
width: 69%;
margin-top: 1px;
float: left;
}
.right_body {
position: relative;
display: block;
width: 29%;
float: left;
}
.clearfix:after{
content: " ";
display: table;
}
.clearfix:before{
content: " ";
display: table;
}
.clearfix{
clear: both;
}
<div class="main clearfix">
<div class="left_body">
<!-- Heading Pannel Starts Here -->
<div class="welcome">
<p id="heading-pannel">Welcome ${username}</p>
<hr id="hr-thick">
</div>
${shortcut}
<div class="form_area">
<p> ${status} </p>
<div>
<c:if test="${emptyNotificationMessage!= null}">
</c:if>
<c:if test="${notifications!= null}">
<h3>Tasks pending</h3>
<hr id="hr-thin"/>
<div>
<c:forEach items="${notifications}" var="next">
<form method="post" action="viewForm.htm">
<img src="images/addon/u175.png" alt="pointer" class="pointer"/>
<input type="hidden" name="refNum" value="${next.key}">
${next.value}
<input type="submit" value="View Form">
</form>
<br>
</c:forEach>
</div>
</c:if>
<c:if test="${appHistory!= null}">
<br/><br/><br/><br/><br/>
<h3>Application under review</h3>
<hr id="hr-thin"/>
<div>
<c:forEach items="${appHistory}" var="next">
<img src="images/addon/u175.png" alt="pointer" class="pointer"/>
${next.value}
<br>
</c:forEach>
</div>
</c:if>
${myProjectsHeader}
<div id="myProjects">
<c:forEach items="${myProjects}" var="next">
<form method="post" action="viewIndividualProject.htm">
<input type="submit" value="${next.key}" class="transparent_btn">
<input type="hidden" name="individualProjectLink" value="${next.value}">
<input type="hidden" name="individualProjectName" value="${next.key}">
</form>
<br>
</c:forEach>
</div>
</div>
</div>
</div>
<div class="right_body">
<div class="right-box">
<h3 class="h3-sty2">Do you Know</h3>
<p><h5>The total period of absence on Casual <br> Leave(CL) including Sundays and <br> other holidays intervening, prefixing <br> and/or suffixing shall not ordinarily <br> exceed 9 days at a time.<br>Read Leaves rules</h5></p>
<p><h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p>
<p><h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p>
<hr id="hr-right-panel">
<p><h5>Are you new to Rnd Automation System?<br>Read FAQs.</h5></p>
<div> For any query e-mail to rndops#iitg.ernet.in </div>
</div>
</div>
<div>
Try this in place of your stylesheet.
.left_body{
position:relative;
width:69%;
margin-top:1px;
margin-right: 0px;
margin-left: 0px;
float: left;
height: 100%;
}
.right_body{
position:relative;
/* display:block; */
width:29%;
/* margin-top: 48px;
border:thin solid #BDBDBD;
border-radius:5px; */
margin-right: 0px;
margin-left: 0px;
float: left;
height: 100%;
}
.right-box{
margin-top: 48px;
border:thin solid #BDBDBD;
border-radius:5px;
}
.main_body{
width: 100%;
height: 100%;
}
and your code should be like this :-
<body>
<div class="main_body">
<div class="left_body">
<!-- Heading Pannel Starts Here -->
<div class="welcome">
<p id="heading-pannel">Welcome ${username}</p>
<hr id="hr-thick">
</div>
${shortcut}
<div class="form_area">
<p> ${status} </p>
<div>
<c:if test="${emptyNotificationMessage!= null}">
</c:if>
<c:if test="${notifications!= null}">
<h3>Tasks pending</h3>
<hr id="hr-thin"/>
<div>
<c:forEach items="${notifications}" var="next">
<form method="post" action="viewForm.htm">
<img src="images/addon/u175.png" alt="pointer" class="pointer"/>
<input type="hidden" name="refNum" value="${next.key}">
${next.value}
<input type="submit" value="View Form">
</form>
<br>
</c:forEach>
</div>
</c:if>
<c:if test="${appHistory!= null}">
<br/><br/><br/><br/><br/>
<h3>Application under review</h3>
<hr id="hr-thin"/>
<div>
<c:forEach items="${appHistory}" var="next">
<img src="images/addon/u175.png" alt="pointer" class="pointer"/>
${next.value}
<br>
</c:forEach>
</div>
</c:if>
${myProjectsHeader}
<div id="myProjects">
<c:forEach items="${myProjects}" var="next">
<form method="post" action="viewIndividualProject.htm">
<input type="submit" value="${next.key}" class="transparent_btn">
<input type="hidden" name="individualProjectLink" value="${next.value}">
<input type="hidden" name="individualProjectName" value="${next.key}">
</form>
<br>
</c:forEach>
</div>
</div>
</div>
</div>
<div class="right_body">
<div class="right-box">
<h3 class="h3-sty2">Do you Know</h3>
<p><h5>The total period of absence on Casual <br> Leave(CL) including Sundays and <br> other holidays intervening, prefixing <br> and/or suffixing shall not ordinarily <br> exceed 9 days at a time.<br>Read Leaves rules</h5></p>
<p><h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p>
<p><h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p>
<hr id="hr-right-panel">
<p><h5>Are you new to Rnd Automation System?<br>Read FAQs.</h5></p>
<div> For any query e-mail to rndops#iitg.ernet.in </div>
</div>
</div>
</div>
</body>
If you completely want to remove the left_body and right_body tags from your page just remove them and try this :-
.right-box{
margin-top: 48px;
border:thin solid #BDBDBD;
border-radius:5px;
width: 29%;
}
.form_area{
width: 69%;
}
I'm developing a Grails app and I'm having a problem with the CSS rules applied to a view. Consider this GSP code:
<div id="radio" style="height: 30px">
<div class="fieldcontain">
<label style="float: left; width: 25%; overflow: hidden">
<g:message code="recepcionDeComplejoInstance.tipoDeMineral.label" default="Tipo De Mineral" />
</label>
</div>
<div class="ui-button" style="float: left; width: 75%; overflow: hidden; text-align: start">
<input type="radio" id="radioComplejo" value="complejo" name="radio" checked="checked"><label for="radioComplejo">COMPLEJO</label>
<input type="radio" id="radioPlomoPlata" value="plomoPlata" name="radio"><label for="radioPlomoPlata">PB-AG</label>
<input type="radio" id="radioZincPlata" value="zincPlata" name="radio"><label for="radioZincPlata">ZN-AG</label>
<input type="radio" id="radioCobrePlata" value="cobrePlata" name="radio"><label for="radioCobrePlata">CU-AG</label>
</div>
</div>
<div id="radio2" style="height: 30px">
<div class="fieldcontain">
<label style="float: left; width: 25%; overflow: hidden">
<g:message code="recepcionDeComplejoInstance.naturalezaMineral.label" default="Naturaleza Mineral" />
</label>
</div>
<div class="ui-button" style="float: left; width: 50%; overflow: hidden; text-align: start">
<input type="radio" id="radioSulfuro" value="sulfuro" name="radio2" checked="checked"><label for="radioSulfuro">SULFURO</label>
<input type="radio" id="radioOxido" value="oxido" name="radio2"><label for="radioOxido">OXIDO</label>
</div>
</div>
This is the result:
There are two CSS classes used in the view:
fieldcontain, that is the default CSS provided by Grails.
ui-button,declared in the JQuery UI Lightness file
(jquery-ui-1.10.3.custom.css)
As you can see the Naturaleza Mineral radio buttons don't have the appearance of the Tipo De Mineral radio button considering that the same CSS rules are being applied to both radio button groups.
Why is this happening?
It is because you have enable jquery-ui radio button style from javascript by calling buttonset():
$( "#radio, #radio2" ).buttonset();
Follow this plunker example.
I made a small window for a tools menu but because I had to use an iframe to solve a specific issue it now scrolls left and right. I still neet it to scroll up and down but disabled the left and right.
<div id="map-tools">
<form autocomplete="off" id=vis-select style="height:100%">
<ul id="tools-list" data-role="listview" style="height:100%">
<li id="tools-4">
<fieldset data-role="controlgroup">
<g:if test="${site.javaScriptModules.find{it.fileName=='google-map.js'} }">
<input name="radio-choice-v-2" id="google-map-module" value="" <g:if test="${site.defaultVisualization?.fileName == 'google-map.js'}">checked="checked"</g:if> type="radio" data-messages="switch-vis" data-switch-vis="#google-map" >
<label for="google-map-module">Google Map</label>
</g:if>
<g:if test="${site.javaScriptModules.find{it.fileName=='google-earth.js'} }">
<input name="radio-choice-v-2" id="google-earth-module" value="" <g:if test="${site.defaultVisualization?.fileName == 'google-earth.js'}">checked="checked"</g:if> type="radio" data-active="false" data-messages="switch-vis" data-switch-vis="#google-earth" >
<label for="google-earth-module">Google Earth</label>
</g:if>
<g:if test="${site.javaScriptModules.find{it.fileName=='cesium.js'} }">
<input name="radio-choice-v-2" id="cesium-earth-module" value="" <g:if test="${site.defaultVisualization?.fileName == 'cesium.js'}">checked="checked"</g:if> type="radio" data-messages="switch-vis" data-switch-vis="#cesium-earth" >
<label for="cesium-earth-module">Cesium Earth</label>
</g:if>
</fieldset>
</li>
</ul>
</form>
<iframe id="tools-cover-earth" class="cover" frameborder="0"></iframe>
</div>
this is the css
#map-tools{
position:absolute;
bottom: 44px;
background:#ffffff;
z-index: 10;
width: 320px;
height: 0px;
}
.cover{
background:#ffffff;
z-index: -1;
width: 100%;
height: 100%;
position:absolute;
top:0px;
overflow-x:hidden;
overflow-y:hidden;
}
You may need to play with overflow in css but for better answers you need to include your whole problematic code with context. <div><ui></ui></div> tells us nothing.