Modal dialog box div is not working in IE browser? - html

I need help for modal dialog box is not working in I.E browser here is my code please verify and where i did a mistake suggest me.It is working in Firefox and chrome but I.E is not working.Please verify my below code and give me a suggestion for me.
HTML code:
<a href='#openModal' ><img src='images/question.png' /> </a>
<div id='openModal' class='modalDialog'>
<div>
<a href='#close' title='Close' class='close'>X</a>
<img src='images/ifsc-code1.png' />
</div>
</div>
CSS code:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: -1;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 604px;
//height: 600px;
position: relative;
margin: 5% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
-moz-box-shadow: -5px -5px 30px #888888,5px 5px 30px #888888;
-webkit-box-shadow:-5px -5px 30px #888888 ,5px 5px 30px #888888;
box-shadow: -5px -5px 30px #888888,5px 5px 30px #888888;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }


The following code is perfectly working for me in IE9, IE10, Firefox and Chrome.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: -1;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 604px;
//height: 600px;
position: relative;
margin: 5% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
-moz-box-shadow: -5px -5px 30px #888888,5px 5px 30px #888888;
-webkit-box-shadow:-5px -5px 30px #888888 ,5px 5px 30px #888888;
box-shadow: -5px -5px 30px #888888,5px 5px 30px #888888;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
</style>
</head>
<body>
<a href='#openModal' ><img src='images/question.png' /> </a>
<div id='openModal' class='modalDialog'>
<div>
<a href='#close' title='Close' class='close'>X</a>
<img src='images/ifsc-code1.png' />
</div>
</div>
</body>
</html>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<style>
.pop-up {position:absolute; top:0; left:-500em}
.pop-up:target {position:static; left:0;}
.popBox {
background:#ffffff;
position:absolute; left:30%; right:30%; top:30%; bottom:30%;
z-index:1;
border:1px solid #3a3a3a;
-moz-border-radius:12px;
border-radius:12px;
-webkit-box-shadow:2px 2px 4px #3a3a3a;
-moz-box-shadow:2px 2px 4px #3a3a3a;
box-shadow:2px 2px 4px #3a3a3a;
opacity:0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
:target .popBox {position:fixed; opacity:1;}
.popBox:hover {box-shadow:3px 3px 6px #5a5a5a;}
.lightbox {display:none; text-indent:-200em; background:#000; opacity:0.4; width:100%; height:100%; position:fixed; top:0; left:0; bottom:0; right:0;}
:target .lightbox {display:block}
.close {
position:absolute; top:-0.75em; right:-0.75em; display:block; width:1em; height:1em;
font:bold large/1 arial, sans-serif; text-align:center; text-decoration:none;
background:#000; border:3px solid #fff; color:#fff;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
-moz-box-shadow: 0 0 1px 1px #3a3a3a;
-webkit-box-shadow: 0 0 1px 1px #3a3a3a;
box-shadow: 0 0 1px 1px #3a3a3a;
}
.close:before {content:"X"}
.close:hover {box-shadow:0 0 1px 1px #c00; background:#c00;}
.close span {text-indent:-200em; display:block;}
</style>
</head>
<body>
<ul id="links">
<li>Pop-up Two</li>
</ul>
<div id="pop3" class="pop-up">
<div class="popBox">
<div>
<h2>Pop-up Two</h2>
<p>Blah, blah, blah. Yada, yada, yada.</p>
</div>
<span>Close</span></span>
</div>
</div>
</body>
</html>
The above code is working in all browsers from I.E-9

Related

Overlapping divs having position fixed and relative

I have a div named container that contains multiple child div elements. Of these child divs, the top most one, named top_bar, has position: fixed while the remaining others have position: relative. The trouble is that divs that have relative positioning are overlapping with the div with fixed positioning. The jsfiddle outlining the issue. I was able to correct this by adding top:150px but this feels more like a hack. Is there a better way to do this?

If you want to this dynamic so you can check below mentioned link:
https://jsfiddle.net/06vzbuf0/2/
I've used jQuery to resolve this issue.

Add padding-top:120px; to container and top:0; to top_bar to that below div is not overlay to topbar.
html, body {
height:100%;
}
.container {
text-align: center;
width:100%;
margin:0%;
padding:120px 0 0;
color: dodgerblue;
}
.top_bar{
box-shadow: 0px 5px 5px #DDD;
position: fixed;
z-index: 10000;
opacity: .95;
background-color:#f9f9f9;
width:100%;
top:0;
}
.mugoogle{
font-size: 22px;
font-family: Arial;
margin: 10px auto;
}
.mugoogle a, .tab_results a {
text-decoration:none;
-webkit-transition:all .3s ease;
-ms-transition:all .3s ease;
transition:all .3s ease;
}
.mugoogle a:hover{
color: #aaa;
}
.tab_results a:hover {
text-decoration:underline;
color: #000
}
.textbox{
margin: 0px auto;
height:30px;
width:60%;
}
.rounded {
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
/* h4{
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
}
*/
input[type="submit"] {
height: 30px;
}
input[type="text"] {
border: 1px solid #ccc;
margin: 10px;
padding: 5px;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
}
input[type="text"]:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.button {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
width: 40px;
font: 14px/100% "Century Gothic", Arial, Helvetica, sans-serif;
/* padding: .5em 2em .55em; */
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
text-decoration: none;
}
.button:active {
position: relative;
top: 1px;
}
.blue {
color: #d9eef7;
border: solid 1px #0076a3;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top, #0095cc, #00678e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
color: #80bed6;
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -moz-linear-gradient(top, #0078a5, #00adee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}
.project_data{
text-align:left;
width: 1000px;
position:relative;
padding: 5px;
word-wrap:break-word;
margin:0 auto;
font-family: Calibri;
font-size: 18px;
color: #555;
}
<div class = "container">
<div class = "top_bar">
<h4 class = 'mugoogle'>
<a href = '/search/'>
muGoogle
</a>
</h4>
<form class="form-wrapper" method = "GET" action = "{% url 'doc_scorer'%}">
<input type="text" name = 'query' class="textbox rounded" placeholder="Search docs related to..." required>
<input type="submit" class="button blue" value="🔎">
</form>
<br>
</div>
<br>
<div class = 'project_data project_name'>
<strong>Project name: </strong>
</div>
<div class = 'project_data scq_title'>
<strong>SGQ: </strong>
</div>
<div class = 'project_data situation'>
<strong>Situation: </strong>
</div>
<div class = 'project_data future_state'>
<strong>Future State: </strong>
</div>
<div class = 'project_data complications'>
<strong>Complications: </strong>
</div>
<div class = 'project_data questions'>
<strong>Questions: </strong>
</div>
<div class = 'project_data data'>
<strong>Data: </strong>
</div>
<div class = 'project_data name'>
<strong>Name: </strong>
</div>
<br>
<br>
</div>

Try position: sticky. Positions static & relative keep their natural space in the flow of the document, while the absolute & fixed don’t — their space is removed and they have a floating behavior.
position: sticky;

CSS Button turn to normal size smoothly when un-hovered

im new to css and i don't have any idea how to make button get smaller smoothly when user unhovered the button , i have successfully make the button get bigger smoothly but it turn into normal size in instant time , this is my code :
<html>
<head>
<style>
body {
background-image:url("http://cdn.mysitemyway.com/etc-mysitemyway/webtreats/assets/posts/976/full/tileable-light-blurs-and-abstract-circles-18.png");
}
.title {
position:relative;
text-align:center;
border : 5px solid rgba(255,255,255,0.9);
background-color:rgba(0, 199, 255, 0.7);
font-size:100%;
color:white;
box-shadow: 10px 10px 5px #888888;
}
.firstcontainer {
position:relative;
margin-top:3%;
}
.menubutton {
box-shadow: 10px 10px 5px #888888;
font-size:200%;
margin-left:1%;
text-align:center;
background-color: rgba(0,157,255,0.5);
display:inline-block;
color:white;
border:3px solid white;
padding:1% 1% 1% 1%;
}
.menubutton:hover {
background-color:rgba(0,199,255,0.5);
padding: 1.1% 1.1% 1.1% 1.1%;
transition-duration:0.5s;
}
.menutext {
color:white;
}
</style>
</head>
<body>
<div class="title"> <h1 > English Lesson </h1> </div>
<div class="firstcontainer">
<div class="menubar"></div>
<div class="menubutton"><strong><i><u>Home</u></i></strong></div>
<div class="menubutton"><strong><i><u>Contacts</u></i></strong></div>
</div>
</body>
</html>
I am sorry if this already asked somewhere but i cannot find it at search engine such as google .
Is there any way to make something like .menubutton:unhover ?

Add transition to menubutton also, the transition property gets applied to the hover state, therefore your animation takes 0.5 second when changing to that specific state. Adding it to the regular state will also apply it when changing back from a special state
body {
background-image: url("http://cdn.mysitemyway.com/etc-mysitemyway/webtreats/assets/posts/976/full/tileable-light-blurs-and-abstract-circles-18.png");
}
.title {
position: relative;
text-align: center;
border : 5px solid rgba(255,255,255,0.9);
background-color: rgba(0, 199, 255, 0.7);
font-size: 100%;
color: white;
box-shadow: 10px 10px 5px #888888;
}
.firstcontainer {
position: relative;
margin-top: 3%;
}
.menubutton {
box-shadow: 10px 10px 5px #888888;
font-size: 200%;
margin-left: 1%;
text-align: center;
background-color: rgba(0,157,255,0.5);
display: inline-block;
color: white;
border: 3px solid white;
padding: 1% 1% 1% 1%;
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
}
.menubutton:hover {
background-color: rgba(0,199,255,0.5);
padding: 1.1% 1.1% 1.1% 1.1%;
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
}
.menutext {
color: white;
}
<div class="title">
<h1 > English Lesson </h1>
</div>
<div class="firstcontainer">
<div class="menubar"></div>
<a href="#" class="menutext">
<div class="menubutton"><strong><i><u>Home</u></i></strong></div>
</a> <a href="#" clas="menutext">
<div class="menubutton"><strong><i><u>Contacts</u></i></strong></div>
</a>
</div>

Your transition property needs to be on the default .menubutton class. This means that when you hover the button it will transition to the new style and then back to the default again when you stop hovering.
.menubutton {
box-shadow: 10px 10px 5px #888888;
font-size:200%;
margin-left:1%;
text-align:center;
background-color: rgba(0,157,255,0.5);
display:inline-block;
color:white;
border:3px solid white;
padding:1% 1% 1% 1%;
transition-duration:0.5s;
}
.menubutton:hover {
background-color:rgba(0,199,255,0.5);
padding: 1.1% 1.1% 1.1% 1.1%;
}
The reason that your animation doesn't work when you stop hovering is that the transition property is no longer applied to the element, as it only exists on hover.

Add to class
.menubutton {
box-shadow: 10px 10px 5px #888888;
font-size:200%;
margin-left:1%;
text-align:center;
background-color: rgba(0,157,255,0.5);
display:inline-block;
color:white;
border:3px solid white;
padding:1% 1% 1% 1%;
transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
}

You need to use scale() effect and apply transition-duraion for both unhovered and hovered button
Look at snippet:
body {
background-image:url("http://cdn.mysitemyway.com/etc-mysitemyway/webtreats/assets/posts/976/full/tileable-light-blurs-and-abstract-circles-18.png");
}
.title {
position:relative;
text-align:center;
border : 5px solid rgba(255,255,255,0.9);
background-color:rgba(0, 199, 255, 0.7);
font-size:100%;
color:white;
box-shadow: 10px 10px 5px #888888;
}
.firstcontainer {
position:relative;
margin-top:3%;
}
.menubutton {
box-shadow: 10px 10px 5px #888888;
font-size:200%;
margin-left:1%;
text-align:center;
background-color: rgba(0,157,255,0.5);
display:inline-block;
color:white;
border:3px solid white;
padding:1% 1% 1% 1%;
transition-duration: 0.5s;
}
.menubutton:hover {
transform: scale(1.2);
transition-duration: 0.5s;
}
.menutext {
color:white;
}
<div class="title"> <h1 > English Lesson </h1> </div>
<div class="firstcontainer">
<div class="menubar"></div>
<div class="menubutton"><strong><i><u>Home</u></i></strong></div>
<div class="menubutton"><strong><i><u>Contacts</u></i></strong></div>
</div>

<html>
<head>
<style>
body {
background-image:url("http://cdn.mysitemyway.com/etc-mysitemyway/webtreats/assets/posts/976/full/tileable-light-blurs-and-abstract-circles-18.png");
}
.title {
position:relative;
text-align:center;
border : 5px solid rgba(255,255,255,0.9);
background-color:rgba(0, 199, 255, 0.7);
font-size:100%;
color:white;
box-shadow: 10px 10px 5px #888888;
}
.firstcontainer {
position:relative;
margin-top:3%;
}
.menubutton {
box-shadow: 10px 10px 5px #888888;
font-size:200%;
margin-left:1%;
text-align:center;
background-color: rgba(0,157,255,0.5);
display:inline-block;
color:white;
border:3px solid white;
padding:1% 1% 1% 1%;
transition: padding 0.1s;
}
.menubutton:hover {
background-color:rgba(0,199,255,0.5);
padding: 1.1% 1.1% 1.1% 1.1%;
}
.menutext {
color:white;
}
</style>
</head>
<body>
<div class="title"> <h1 > English Lesson </h1> </div>
<div class="firstcontainer">
<div class="menubar"></div>
<div class="menubutton"><strong><i><u>Home</u></i></strong></div>
<div class="menubutton"><strong><i><u>Contacts</u></i></strong></div>
</div>
</body>
</html>
Just remove transition-duration from hover element and add a transition: padding 0.1s to the button class. The animation does not look so smooth due to small padding change.

Try to use - in cases where it's possible - transform property. It handles the animations very smoothly.
In your case, I suggest you to use transform: scale() instead, animation works fine and it looks even better than before.
By the way, if you want to apply a value, e.g. 5px to padding or margin, you don't have to write it separately for all directions, just use simply:
margin: 5px or padding: 5px. It will affect top, bottom, left and right directions together.
body {
background-image: url("http://cdn.mysitemyway.com/etc-mysitemyway/webtreats/assets/posts/976/full/tileable-light-blurs-and-abstract-circles-18.png");
}
.title {
position: relative;
text-align: center;
border: 5px solid rgba(255, 255, 255, 0.9);
background-color: rgba(0, 199, 255, 0.7);
font-size: 100%;
color: white;
box-shadow: 10px 10px 5px #888888;
}
.firstcontainer {
position: relative;
margin-top: 3%;
}
.menubutton {
box-shadow: 5px 5px 2px #888888;
font-size: 200%;
text-align: center;
background-color: rgba(0, 157, 255, 0.5);
display: inline-block;
color: white;
border: 3px solid white;
padding: 4px;
margin: 4px;
transition: all .5s ease;
}
.menubutton:hover {
background-color: rgba(0, 199, 255, 0.5);
transform: scale(1.1);
transition: all .5s ease;
}
.menutext {
color: white;
}
<div class="title">
<h1> English Lesson </h1>
</div>
<div class="firstcontainer">
<div class="menubar"></div>
<a href="#" class="menutext">
<div class="menubutton"><strong><i><u>Home</u></i></strong>
</div>
</a>
<a href="#" clas="menutext">
<div class="menubutton"><strong><i><u>Contacts</u></i></strong>
</div>
</a>
</div>

'Click' animation effect on button with CSS

I am not able to achieve the click-effect in my Next button (see snippet 1).
In the first snippet it is achievend with the float: left; value, but when I insert it into my code, it breaks the position of the button. My 'Next' button is supposed to be the way it is the second snippet, i.e. vertically and horizontally centered.
Any ideas how to find a workaround here?
Snippet 1
.next-button {
transition: all 0.1s;
-webkit-transition: all 0.1s;
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
float: left;
border-radius: 10px;
font-family: 'Montserrat';
font-size: 25px;
color: #ffffff;
text-decoration: none;
background-color: #f9c60f;
border-bottom: 5px solid #888888;
text-shadow: 1px -2px #888888;
}
.next-button:active {
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}
<html lang="en">
<head>
<body>
NEXT
</body>
</html>
Snippet 2 (My code)
.next-button {
transition: all 0.1s;
-webkit-transition: all 0.1s;
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
float: left;
border-radius: 10px;
font-family: 'Montserrat';
font-size: 25px;
color: #ffffff;
text-decoration: none;
background-color: #f9c60f;
border-bottom: 5px solid #888888;
text-shadow: 1px -2px #888888;
}.course-video {
background: #f9c70f;
border: none;
margin: 0;
box-shadow: 0px 2px 4px rgba(0,0,0,0.3) inset;
-moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.3) inset;
border-radius: 0;
-moz-border-radius: 0;
}
.next-video-button {
transition: all 0.1s;
-webkit-transition: all 0.1s;
padding:7px 200px;
border-radius: 10px;
font-family: 'Montserrat';
font-size: 1em;
color: #ffffff;
text-decoration: none;
background-color: #888888;
border-bottom: 5px solid #5a5a5a;
text-shadow: 1px -2px #888888;
text-align: center;
line-height:49px;
}
.next-video-button:active {
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}
.video-title {
font-family: montserrat;
font-size: 1.5em;
color: #000000;
padding: 0.5em;
box-sizing: border-box;
width: 854px;
text-shadow: 0px 2px 4px rgba(0,0,0,0.3);
}
.video-descr {
width: 854px;
box-sizing: border-box;
height: 50px;
margin-top: -5px;
text-align:center;
}
.next-button:active {
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}
<div class="course-video video-title">Hello</div>
<iframe src="https://player.vimeo.com/video/154094373" width="854" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<div class="course-video video-descr">NEXT</div>

Try using
.next-video-button {
display:inline-block;
...
}
instead of
float:left
Using inline-block makes the element act like it was text so your text-aligns will work on these as well

Aligning the html form to the center

The following html code gives a html form in a table but though i aligned the table to center it does not align to the center and remains in the left side of the web page!
<!DOCTYPE html>
<html>
<head>
<style>input.textfill {
float: right;
}</style>
<link type="text/css" rel="stylesheet" href="order.css" >
<script type="text/javascript">
var textbox = function(me){
if(me.checked == false){
var textb = document.createElement('textarea');
textb.name = "Address";
textb.id="Address";
textb.required=true;
textb.placeholder="Address";
me.parentNode.appendChild(textb);
}
setInterval(function(){
if(me.checked == false){
me.parentNode.removeChild(textb);
return false;
}
});
};
var i = 1;
function addkid() {
if (i <= 2) {
i++;
var div = document.createElement('div');
div.innerHTML ='<br><div class="headingbox">'+ 'Prescription Copy-'+i+':'+'</div>'+'<br><input id="uploadFile-' + i + '" class="disableInputField" placeholder="Choose File" disabled="disabled" />'+'<label class="fileUpload">'+'<input id="uploadBtn-' + i + '" type="file" required class="upload" name="Image'+i+'" />'+'<span class="uploadBtn-' + i + '">Upload</span>'+'</label>'+' <input id=remove type="button" value="-" onclick="removekid(this)">';
document.getElementById('kids').appendChild(div);
document.getElementById("uploadBtn-" + i).onchange = function() {
document.getElementById("uploadFile-"+i).value = this.value;
};
}
}
function removekid(div) {
document.getElementById('kids').removeChild(div.parentNode);
i--;
}
</script>
</head>
<body bgcolor="#E6E6FA">
<form id=orders name="orders" action="orders_action.php" method="post" enctype="multipart/form-data" onsubmit="return Validate(this);onTimeChange ();">
<table align="Center" >
<tr><td height="40"><br>
<div class="headingbox" id="hBoxNIC" > National ID </div>
<div style="width:100%;text-align:center;">
<input type="text" placeholder="920290505v" maxlength="13" name=NIC required autofocus />
</div>
</td></tr>
<tr><td height=50 ><div class="headingboxs">Pick up</div>
<input type=radio name=DP required value="Pickup">
<div style=" float: right;"><div class="headingboxs">
Delivery</div>
<input class="textfill" type=radio name=DP required value="Delivery" onmouseup="textbox(this)" /></div><br><br></td></tr>
<tr><td height="50"><div class="headingbox" >Expected Time </div>
<div style="width:100%;text-align:center;">
<input type="time" id=time autofocus name=DPTime onfocusout="hid('timeerror2');" onfocus="show('timeerror2');"min="09:00:00" max="22:00:00" /><br>
</div>
<div class="poperror" id="timeerror2"> Pharmacy is opened from 9AM to 10PM </div>
<script>
var input = document.getElementById('time');
function validateTime (element) {
var minTime = element.min;
var maxTime = element.max
var value = element.value + ':00'
if(minTime > value || value > maxTime) {
console.log("Time is outside of min/max.");
}
}
</script>
</td></tr>
<tr><td height="50"><div class="headingbox" id="hBoxPN"> Phone Number </div>
<div style="width:100%;text-align:center;">
<input type="text" maxlength=10; autofocus name=Tele /><br>
</div>
<div class="error" id="phoneerror" > error occured </div><br></td></tr>
<tr><td height="50"><div class="headingbox" id="hBoxEM"> E-mail </div>
<div style="width:100%;text-align:center;">
<input type="text" autofocus name=Email placeholder="xxx#gmail.com" /><br>
</div>
<div class="error" id="emailerror" > error occured </div><br>
</td></tr>
<tr>
<td height="50" width=330><br><div class="headingbox"> Prescription Copy-1</div> <div id="kids">
<input id="uploadFile" class="disableInputField" placeholder="Choose File" disabled="disabled" />
<label class="fileUpload">
<input id="uploadBtn" type="file" class="upload" name=Image1 />
<span class="uploadBtn">Upload</span>
</label>
<input type="button" id="add" onclick="addkid()" value="+" />
</div></td></tr>
<script>
document.getElementById("uploadBtn" ).onchange = function() {
document.getElementById("uploadFile").value = this.value;
};
</script>
</div></td></tr>
<tr><td colspan=5 align=center>
<input class="button" type=submit name=submit value=Place >
<input class="button" type=reset name=reset value=Cancel> </td></tr>
</table>
</form>
</body>
</body>
</html>
The css code is as follows
* { margin:0; padding:0;font-family: Arial; }
#orders {
padding: 0px 25px 25px;
background: #dcdcfb;
box-shadow:
0px 0px 0px 5px rgba( 255,255,255,0.4 ),
0px 4px 20px rgba( 0,0,0,0.33 );
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
display: table;
position:center;
width:60%;
margin: 20px;
}
#orders .inputs .buttonS {
width: 100%;
outline:none;
margin-top: 20px;
padding: 15px 0;
color: #fff;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
text-align: center;
text-decoration: none;
background: -moz-linear-gradient(
top,
#b9c5dd 0%,
#a4b0cb);
background: -webkit-gradient(
linear, left top, left bottom,
from(#b9c5dd),
to(#a4b0cb));
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #737b8d;
-moz-box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
-webkit-box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
text-shadow:
0px 1px 3px rgba(000,000,000,0.3),
0px 0px 0px rgba(255,255,255,0);
display: table;
position: static;
clear: both;
}
#orders .inputs .buttonS:hover {
background: -moz-linear-gradient(
top,
#a4b0cb 0%,
#b9c5dd);
background: -webkit-gradient(
linear, left top, left bottom,
from(#a4b0cb),
to(#b9c5dd));
}
#orders .inputs .buttonDis {
outline:none;
width: 100%;
margin-top: 20px;
padding: 15px 0;
color: #fff;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
text-align: center;
text-decoration: none;
background: -moz-linear-gradient(
top,
#e0e0e0 0%,
#bfbfbf);
background: -webkit-gradient(
linear, left top, left bottom,
from(#e0e0e0),
to(#bfbfbf));
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #737b8d;
-moz-box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
-webkit-box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
text-shadow:
0px 1px 3px rgba(000,000,000,0.3),
0px 0px 0px rgba(255,255,255,0);
display: table;
position: static;
clear: both;
}
#Address{
background: #f5f5f5;
font-size: 0.8rem;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: none;
padding: 13px 10px;
width: 90%;
margin: auto;
margin-bottom: 17px;
box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
-webkit-box-sizing:content-box;
transition: all .5s ease-in-out;
}
.inputs select, input[type=date], input[type=text], input[type=password],input[type=time] {
background: #f5f5f5;
font-size: 0.8rem;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: none;
padding: 13px 10px;
width: 90%;
margin: auto;
margin-bottom: 17px;
box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
-webkit-box-sizing:content-box;
transition: all .5s ease-in-out;
}
.inputs select:focus, input[type=date], input[type=text]:focus{
background: #fff;
box-shadow: 0px 0px 0px 3px #8efffc, inset 0px 2px 3px rgba( 0,0,0,0.2 ), 0px 5px 5px rgba( 0,0,0,0.15 );
outline: none;
}
.inputs ul li label{
display: block;
position: relative;
font-weight: 300;
font-size: 18px;
padding: 25px 25px 25px 80px;
margin: 10px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
}
.inputs ul li:hover label{
color: #FFFFFF;
}
.inputs ul li .check{
display: block;
position: absolute;
border: 5px solid #AAAAAA;
border-radius: 100%;
height: 25px;
width: 25px;
top: 30px;
left: 20px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
.inputs input[type=radio]:checked ~ label{
color: #0DFF92;
}
.headingboxs{ /*for the radio button headings */
position:relative;
text-align:left;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 2px;
padding-top: 5px;
border-top-left-radius:2em;
border-top-right-radius:-2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:-2em;
border-bottom-left-radius:-2em;
background: white;
left: 2%;
font-weight: bold;
display: inline-block;
box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
transition: all .5s ease-in-out;
}
.headingbox{ /*for other headings */
position:relative;
text-align:left;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 2px;
padding-top: 5px;
border-top-left-radius:2em;
border-top-right-radius:0;
border-bottom-right-radius:2em;
border-bottom-left-radius:-2em;
border-bottom-left-radius:-2em;
background: white;
left: 4%;
font-weight: bold;
display: inline-block;
box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
transition: all .5s ease-in-out;
}
.headbox{ /*for other headings */
position:relative;
text-align:left;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 2px;
padding-top: 5px;
background: white;
left: 4%;
font-weight: bold;
display: inline-block;
box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
transition: all .5s ease-in-out;
}
.poperror {
opacity:0;
visibility: visible;
width: 300px;
background-color: white;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 5;
!top: 100%;
!left: 100%;
margin-left: 10px;
margin-top: -15px;
-moz-box-shadow: 0 0 10px black;
-webkit-box-shadow: 0 0 10px black;
box-shadow: 0 0 10px black;
-webkit-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.poperror::after {
content: "";
position: absolute;
bottom: 100%;
left: 5%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent white transparent;
}
.error{
color:red;
font-size:10px;
text-align:left;
width: 350px;
margin-left:auto;
margin-right:auto;
margin-top:-12px;
margin-bottom:-10px;
font-style: italic;
-webkit-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
transition: opacity 0.4s;
opacity:0;
}
.column{
width:50%;
float:left;
}
*{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
#remove{
width: 30px;
font-size: 20px;
background-color: gray;
color: white;
}
#add{
width: 30px;
font-size: 20px;
background-color: gray;
color: white;
}
.inputBtnSection{
display:inline-block;
vertical-align:top;
font-size:0;
font-family:verdana;
}
.disableInputField{
display:inline-block;
vertical-align:top;
height: 27px;
margin: 0;
font-size:14px;
padding:0 3px;
}
.fileUpload {
position: relative;
overflow: hidden;
display:inline-block;
vertical-align:top;
}
.fileUpload-2 {
position: relative;
overflow: hidden;
display:inline-block;
vertical-align:top;
}
.fileUpload-3 {
position: relative;
overflow: hidden;
display:inline-block;
vertical-align:top;
}
.uploadBtn{
display:inline-block;
vertical-align:top;
background:rgba(0,0,0,0.5);
font-size:14px;
padding:0 10px;
height:25px;
line-height:22px;
color:#fff;
border-radius: 5px;
}
.uploadBtn-2{
display:inline-block;
vertical-align:top;
background:rgba(0,0,0,0.5);
font-size:14px;
padding:0 10px;
height:25px;
line-height:22px;
color:#fff;
border-radius: 5px;
}
.uploadBtn-3{
display:inline-block;
vertical-align:top;
background:rgba(0,0,0,0.5);
font-size:14px;
padding:0 10px;
height:25px;
line-height:22px;
color:#fff;
border-radius: 5px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
table {
align-self: center;
border: 2px solid CadetBlue;
border-radius: 5px;
}
#add_kid(){
width: 50px;
font-size: 10px;
}
.button:hover {
cursor:pointer;
background: -moz-linear-gradient(
top,
#a4b0cb 0%,
#b9c5dd);
background: -webkit-gradient(
linear, left top, left bottom,
from(#a4b0cb),
to(#b9c5dd));
}
.button{
margin-left:30px;
outline:none;
width: 20%;
margin-top: 20px;
padding: 15px 0;
color: #fff;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
text-align: center;
text-decoration: none;
background: -moz-linear-gradient(
top,
#e0e0e0 0%,
#bfbfbf);
width: 150px;
background-color:grey;
border-radius: 5px;
height: 40px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #737b8d;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: -webkit-gradient(
linear, left top, left bottom,
from(#e0e0e0),
to(#bfbfbf));
-moz-box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
-webkit-box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
text-shadow:
0px 1px 3px rgba(000,000,000,0.3),
0px 0px 0px rgba(255,255,255,0);
}
#white-background{
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background-color: #fefefe;
opacity: 0.7;
z-index: 9999;
}
#dlgbox{
/*initially dialog box is hidden*/
display: none;
position: fixed;
width: 480px;
z-index: 9999;
border-radius: 10px;
background-color: #7c7d7e;
}
#dlg-header{
background-color:aliceblue;
color: white;
font-size: 20px;
padding: 10px;
margin: 10px 10px 0px 10px;
}
#dlg-body{
background-color: white;
color: black;
font-size: 14px;
padding: 10px;
margin: 0px 10px 0px 10px;
}
#dlg-footer{
background-color: #f2f2f2;
text-align: right;
padding: 10px;
margin: 0px 10px 10px 10px;
}
#dlg-footer button{
background-color: grey;
color: white;
padding: 5px;
border: 0px;
}
please help to rectify this problem so that i can align the form to the center

form {
width: 980px;
margin: 0 auto;
}
Declare the width. So you can use the value AUTO in margin. margin: 0 auto do the trick

the menu button backgrounds are overridden by page image background, how do i prevent this?

after applying a background image to the body, the menu buttons backgrounds are overridden as seen below. i want the menu buttons to preserve their visibility.
link to image is below
http://s11.postimage.org/4ndla4hxf/111111111.jpg
/********markup********/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>
<nav>
<ul id="menu">
<li >#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
</ul>
</nav>
</header>
<section id="main">
#RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
/*******body***********/
body
{
font-size: .85em;
font-family: "Trebuchet MS" , Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
background-image:url('/Content/bw.jpg');
}
/*******menu**********/
#menu
{
position:relative;
float:left;
clear:left;
margin-right:50px;
}
#menu li
{
list-style-type: none;
padding: 0px;
display: block;
width:150px;
overflow:visible;
}
#menu li a
{
overflow:visible;
background: rgba(0,0,0,0.2);
text-shadow: 0px 0px 1px white;
color: white;
text-decoration: none;
font-size: 13px;
display: block;
font-family: arial;
text-transform: uppercase;
text-shadow: 0px 0px 5px #eee;
padding:10px 20px 10px;
margin: 5px;
font-weight: bold;
letter-spacing: 1px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
-webkit-box-shadow: 2px 3px 3px rgba(0,0,0,0.6);
-moz-box-shadow: 2px 3px 3px rgba(0,0,0,0.6);
box-shadow: 2px 3px 3px rgba(0,0,0,0.6);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#menu li a:hover
{
opacity: 1;
color:White;
background:#FF00D0 ;
text-shadow: 0px 0px 1px #ffffff;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
#menu li a:active {
background: rgba(0,0,0,0.1);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}

Are you sure the buttons don't just look grey when there's no background image as opacity is so low.
When you then apply the background image you cant see the buttons background colour as the the opacity is so low and the background colour so strong.
Temporarily update #menu li a and see if the problem still exists.
background: #FF0000;
Example here: http://benjaminhopkins.co.uk/BGLostExample.html