Solved

CSS Position issue

Posted on 2013-12-30
7
399 Views
Last Modified: 2013-12-30
I have an web page which I  Have converted from frames to div, but I have an issue in positioning them using the CSS, I want to transfer it as per the attached image, but the position attribute is very tricky where I can see the logo (robbin), the username, and (Header-toolbar) are overlapping over each other (I want the header div to have a fixed position so whenever you scroll down you still can see the header,
My main.css file:

html, body {
        width: 100%;
        height: 100%;
         font-family: "Helvetica Neue", Helvetica, sans-serif;
        -webkit-font-smoothing: antialiased;
        color: #444;
        -webkit-font-smoothing: antialiased;
        background: white;

}
        #header {
                position: fixed;
                height:15%;
                width:100%;
                border: none;
                overflow-y:hidden;
                overflow-x:hidden
        }
        #bottom {
                position: fixed;
                height:85%;
                width:100%;
                border: none;
                overflow-y:hidden;
                overflow-x:hidden
        }
        #menu {
                position: fixed;
                height:100%;
                width:20%;
                border: none;
                overflow-y:hidden;
                overflow-x:hidden
        }
        #main {
                position: fixed;
                height:100%;
                width:80%;
                border: none;
                overflow-y:hidden;
                overflow-x:hidden
        }
#upper-login-window {
        position: fixed;
        width: 340px;
        height: 340px;
        top: 50%;
        left: 50%;
        margin-top: -140px;
        margin-left: -170px;
        background: #CEF6F5;
        border-radius: 3px;
        border: 1px solid #ccc;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .1);

}

form {
        margin: 0 auto;
        margin-top: 20px;
}

label {
        color: #555;
        display: inline-block;
        margin-left: 18px;
        padding-top: 10px;
        font-size: 14px;
}

p a {
        font-size: 11px;
        color: #aaa;
        float: right;
        margin-top: -13px;
        margin-right: 20px;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        transition: all .4s ease;
}

p a:hover {
        color: #555;
}

input {
        font-family: "Helvetica Neue", Helvetica, sans-serif;
        font-size: 12px;
        outline: none;
}

input[id=username-login],
input[id=password-login] {
        color: #777;
        padding-left: 10px;
        margin: 10px;
        margin-top: 12px;
        margin-left: 18px;
        width: 290px;
        height: 35px;
        border: 1px solid #c7d0d2;
        border-radius: 2px;
        box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        transition: all .4s ease;
}

input[type=captcha] {
        color: #777;
        padding-left: 10px;
        margin: 10px;
        margin-top: 12px;
        margin-left: 18px;
        width: 200px;
        height: 35px;
        border: 1px solid #c7d0d2;
        background: #FFFFFF;
        border-radius: 2px;
        box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        transition: all .4s ease;
}


input[id=username-login]:hover,
input[id=password-login]:hover,
input[type=captcha]:hover {
        border: 1px solid #b6bfc0;
        box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8;
}

input[id=username-login]:focus,
input[id=password-login]:focus,
input[type=captcha]:focus {
        border: 1px solid #a8c9e4;
        box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;
}

img[id=siimage] {
        padding-left: 10px;
        margin: 10px;
        margin-top: 12px;
        margin-left: 18px;
        border: 1px solid #c7d0d2;
        border-radius: 2px;
        height:  35px;
        width: 200px;
}

p a[id=refresh-captcha] {
        margin-top: 14px;
        margin-right: 40px;
}
#lower-login-window {
        background: #BDBDBD;
        width: 100%;
        height: 69px;
        margin-top: 20px;
        box-shadow: inset 0 1px 1px #fff;
        border-top: 1px solid #ccc;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
}

input[id=keepMe] {
        margin-left: 20px;
        margin-top: 30px;
}

.check {
        margin-left: 3px;
        font-size: 11px;
        color: #444;
        text-shadow: 0 1px 0 #fff;
}

input[id=button-login] {
        float: right;
        margin-right: 20px;
        margin-top: 20px;
        width: 80px;
        height: 30px;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        background-image: url(../images/login.png);
        background-position: right;
}

input[id=button-login]:hover {
        background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8));
        background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
        background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
}

input[id=button-login]:active {
        background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec2e8), to(#b6e2ff));
        background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
        background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
}
#status-block {
   width: 247px;
   position: fixed;
   text-align: center;
   border-radius: 10px;
   font-size: 20px!important;
   background: red;
   background: -webkit-gradient(linear, left top, left bottom, from(#cef6f5), to(#cef6f5));
   background: -webkit-linear-gradient(top, #cef6f5, #cef6f5);
   background: -moz-linear-gradient(top, #cef6f5, #cef6f5);
   background: -ms-linear-gradient(top, #cef6f5, #cef6f5);
   background: -o-linear-gradient(top, #cef6f5, #cef6f5);
   background-image: -ms-linear-gradient(top, #cef6f5 0%, #cef6f5 100%);
   -webkit-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   -moz-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   font-family: 'Helvetica Neue',Helvetica, sans-serif;
   }
#ribbon {
   width: 247px;
   position: absolute;
   text-align: center;
   border-radius: 10px;
   font-size: 20px!important;
   background: #cef6f5;
   background: -webkit-gradient(linear, left top, left bottom, from(#cef6f5), to(#cef6f5));
   background: -webkit-linear-gradient(top, #cef6f5, #cef6f5);
   background: -moz-linear-gradient(top, #cef6f5, #cef6f5);
   background: -ms-linear-gradient(top, #cef6f5, #cef6f5);
   background: -o-linear-gradient(top, #cef6f5, #cef6f5);
   background-image: -ms-linear-gradient(top, #cef6f5 0%, #cef6f5 100%);
   -webkit-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   -moz-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   font-family: 'Helvetica Neue',Helvetica, sans-serif;
   }
#header-toolbar {
   position: fixed;
   padding: 4px;
   background: #CEF6F5;
   display: block;
   }
 /* support: IE7 */
   *+html #header-toolbar {
    display: inline;
   }
  .ui-menu {
     width: 150px;
     background: #FAFAFA;
    }
/* Support for the demo css of the UI */
table {
        font-size: 1em;
}

.demo-description {
        clear: both;
        padding: 12px;
        font-size: 1.3em;
        line-height: 1.4em;
}

.ui-draggable, .ui-droppable {
        background-position: top;
}

Open in new window



And my html code:

<HTML>
<HEAD>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>HASSANS</title>
              <link rel="stylesheet" type="text/css" href="css/main.css">
        <link rel="stylesheet" type="text/css" href="css/jquery.ui.all.css">
        <script src="js/jquery-1.10.1.min.js"></script>
        <script src="js/jquery-ui-1.10.3.custom.min.js"></script>
</HEAD>
<BODY>
 <div class="header-frame" name="header" id="header">
   <div class="ribbon" id="ribbon">
<strong class="ribbon-content" id="ribbon-content"><img src="../images/logo.gif" alt="My Site" width="150" height="75"></strong>
</div>
<div  id="status-block">
username
</div>
<div id="menu"  style="text-align: right">
<div id="header-toolbar" class="ui-widget-header ui-corner-all">
<button id="logout">Logout</button>
<button id="settings">Settings</button>
</div>
  <ul id="menu" >
    <li><a href="#">Open...</a></li>
    <li><a href="#">Save</a></li>
    <li><a href="#">Delete</a></li>
  </ul>
</div>

                <script>
                 $(function() {
                        var $logout = $("#logout").button({ text: false, icons: { primary: "ui-icon-key" } });
                        var $settings = $("#settings").button({ text: false, icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } });
                        var $menu = $("#settings").parent().next().show();

                $(document).click(function() {
                        $menu.hide();
                $settings.removeClass("active");
                });

                $settings.click(function(evt) {
                        evt.stopImmediatePropagation();
                        $(this).toggleClass("active")
                        $menu.css("display", $(this).hasClass("active")?"block":"none");
                        $menu.position({ my: "left top", at: "left bottom", of: this });
                        });

                $settings.parent().buttonset().next().hide().menu();

                $menu.hover(function() {
                $(this).addClass("overme");
                }, function() {
                        if($(this).hasClass("overme")) {
                                $(this).hide();
                                $(this).removeClass("overme");
                                $settings.removeClass("active");
                                }
                        });

                $menu.click(function(evt) {
                        alert($(evt.target).text());
                        });
                $("#header-toolbar").hide();
                });
                </script>
</div>
<div class="bottom-frame" name="bottom" id="bottom">
 <div class="menu-frame" name="menu" id="menu">
   menu
 </div>
 <div class="main-frame" name="main" id="main">
   	<div id="upper-login-window">
		
		<form autocomplete="off" action="check_login.php" method="POST">
		
		<label for="name">Username:</label>
		
		<input type="name" name="username" id="username-login" onclick="this.value=''" />
		
		<label for="username">Password:</label>
		
		<p><a href="#">Forgot your password?</a>
		
		<input type="password" name="password" id="password-login" onclick="this.value=''" />

                <img id="siimage" style="border: 1px solid #000; margin-right: 15px" src="securimage/securimage_show.php?sid=afe4dc656d8505ad548a58b174e51691" alt="CAPTCHA Image" align="center" onclick="this.blur()" />

                <object type="application/x-shockwave-flash" data="securimage/securimage_play.swf?bgcol=#ffffff&amp;icon_file=securimage/images/audio_icon.png&amp;audio_file=securimage/securimage_play.php" width="20" height="20">
                <param name="movie" value="securimage/securimage_play.swf?bgcol=#ffffff&amp;icon_file=securimage/images/audio_icon.png&amp;audio_file=securimage/securimage_play.php" />
                </object>


                <a id="refresh-captcha" href="#" title="Refresh Image" onclick="document.getElementById('siimage').src = 'securimage/securimage_show.php?sid=' + Math.random(); this.blur(); return false"> 
	 
                <img src="images/refresh.png" alt="Reload Image" height="20" width="20" onclick="this.blur()" align="bottom" border="0" />
  
                </a>

		<input type="captcha" name="captcha_code" onclick="this.value=''" placeholder="Enter Code" />
	
		<div id="lower-login-window">
		
		<input type="checkbox" name="keepMe" id="keepMe" value="true" ><label class="check" for="checkbox">Keep me logged in</label>
		
		<input type="submit" id="button-login" value="Login">
		
		</div>
		
		</form>
		
	</div>
	
	<!-- End Page Content -->
<script src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
    $.noConflict();

    function reloadCaptcha()
    {
        jQuery('#siimage').src = 'securimage/securimage_show.php?sid=' + Math.random();
    }

</script>
 </div>
</div>
</BODY>
</HTML>

Open in new window

site-layout.jpg
0
Comment
Question by:Ashraf Hassanein
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39747014
#status-block {}
Remove the position:fixed

#menu {}
Change position:fixed to position:absolute
and add
   right: 0;
    top: 20px;


That should get you on the right track

You really need to give #header {} a fixed height in pixels not %
0
 

Author Comment

by:Ashraf Hassanein
ID: 39747121
Thank you so much that helped a lot I have found as well a type in my index.php file where I was using id=menu for the toolbar so I have changed it.
I also believe you meant for the menu div to add left: 0 to align it to the left of the screen and not right: 0, correct?
I have assigned as well a fixed height to the header, the only issue I have now that the three elements in the header div: the logo (id=ribbon) the status (id=status-block) and the toolbar menu (id=toolbar-block) are overlapping over each other, here is the main.css after I have changed it, what do you think please?
main.css:
html, body {
        width: 100%;
        height: 100%;
         font-family: "Helvetica Neue", Helvetica, sans-serif;
        -webkit-font-smoothing: antialiased;
        color: #444;
        -webkit-font-smoothing: antialiased;
        background: white;

}
        #header {
                position: fixed;
                height:80px;
                width:100%;
                border: none;
                overflow-y:hidden;
                overflow-x:hidden
        }
        #menu {
                position: absolute;
                height:90%;
                width:20%;
                top: 80px;
                : 0;
                border: none;
                overflow-y:hidden;
                overflow-x:hidden
        }
        #main {
                position: fixed;
                height:90%;
                width:80%;
                top: 80px;
                border: none;
                overflow-y:hidden;
                overflow-x:hidden
        }
#upper-login-window {
        position: fixed;
        width: 340px;
        height: 340px;
        top: 50%;
        left: 50%;
        margin-top: -140px;
        margin-left: -170px;
        background: #CEF6F5;
        border-radius: 3px;
        border: 1px solid #ccc;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .1);

}

form {
        margin: 0 auto;
        margin-top: 20px;
}

label {
        color: #555;
        display: inline-block;
        margin-left: 18px;
        padding-top: 10px;
        font-size: 14px;
}

p a {
        font-size: 11px;
        color: #aaa;
        float: right;
        margin-top: -13px;
        margin-right: 20px;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        transition: all .4s ease;
}

p a:hover {
        color: #555;
}

input {
        font-family: "Helvetica Neue", Helvetica, sans-serif;
        font-size: 12px;
        outline: none;
}

input[id=username-login],
input[id=password-login] {
        color: #777;
        padding-left: 10px;
        margin: 10px;
        margin-top: 12px;
        margin-left: 18px;
        width: 290px;
        height: 35px;
        border: 1px solid #c7d0d2;
        border-radius: 2px;
        box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        transition: all .4s ease;
}

input[type=captcha] {
        color: #777;
        padding-left: 10px;
        margin: 10px;
        margin-top: 12px;
        margin-left: 18px;
        width: 200px;
        height: 35px;
        border: 1px solid #c7d0d2;
        background: #FFFFFF;
        border-radius: 2px;
        box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
        -webkit-transition: all .4s ease;
        -moz-transition: all .4s ease;
        transition: all .4s ease;
}


input[id=username-login]:hover,
input[id=password-login]:hover,
input[type=captcha]:hover {
        border: 1px solid #b6bfc0;
        box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8;
}

input[id=username-login]:focus,
input[id=password-login]:focus,
input[type=captcha]:focus {
        border: 1px solid #a8c9e4;
        box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;
}

img[id=siimage] {
        padding-left: 10px;
        margin: 10px;
        margin-top: 12px;
        margin-left: 18px;
        border: 1px solid #c7d0d2;
        border-radius: 2px;
        height:  35px;
        width: 200px;
}

p a[id=refresh-captcha] {
        margin-top: 14px;
        margin-right: 40px;
}
#lower-login-window {
        background: #BDBDBD;
        width: 100%;
        height: 69px;
        margin-top: 20px;
        box-shadow: inset 0 1px 1px #fff;
        border-top: 1px solid #ccc;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
}

input[id=keepMe] {
        margin-left: 20px;
        margin-top: 30px;
}

.check {
        margin-left: 3px;
        font-size: 11px;
        color: #444;
        text-shadow: 0 1px 0 #fff;
}

input[id=button-login] {
        float: right;
        margin-right: 20px;
        margin-top: 20px;
        width: 80px;
        height: 30px;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        background-image: url(../images/login.png);
        background-position: right;
}

input[id=button-login]:hover {
        background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8));
        background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
        background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
}

input[id=button-login]:active {
        background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec2e8), to(#b6e2ff));
        background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
        background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
}
#status-block {
   width: 247px;
   text-align: center;
   border-radius: 10px;
   font-size: 20px!important;
   background: red;
   background: -webkit-gradient(linear, left top, left bottom, from(#cef6f5), to(#cef6f5));
   background: -webkit-linear-gradient(top, #cef6f5, #cef6f5);
   background: -moz-linear-gradient(top, #cef6f5, #cef6f5);
   background: -ms-linear-gradient(top, #cef6f5, #cef6f5);
   background: -o-linear-gradient(top, #cef6f5, #cef6f5);
   background-image: -ms-linear-gradient(top, #cef6f5 0%, #cef6f5 100%);
   -webkit-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   -moz-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   font-family: 'Helvetica Neue',Helvetica, sans-serif;
   }
#ribbon {
   width: 247px;
   position: absolute;
   text-align: center;
   border-radius: 10px;
   font-size: 20px!important;
   background: #cef6f5;
   background: -webkit-gradient(linear, left top, left bottom, from(#cef6f5), to(#cef6f5));
   background: -webkit-linear-gradient(top, #cef6f5, #cef6f5);
   background: -moz-linear-gradient(top, #cef6f5, #cef6f5);
   background: -ms-linear-gradient(top, #cef6f5, #cef6f5);
   background: -o-linear-gradient(top, #cef6f5, #cef6f5);
   background-image: -ms-linear-gradient(top, #cef6f5 0%, #cef6f5 100%);
   -webkit-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   -moz-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   font-family: 'Helvetica Neue',Helvetica, sans-serif;
   }
#toolbar-block {
   right: 0;
   padding: 4px;
   background: #CEF6F5;
   display: block;
   }
#header-toolbar {
   padding: 4px;
   background: #CEF6F5;
   display: inline-block;
   }
 /* support: IE7 */
   *+html #header-toolbar {
    display: inline;
   }
  .ui-menu {
     width: 150px;
     background: #FAFAFA;
    }
/* Support for the demo css of the UI */
table {
        font-size: 1em;
}

.demo-description {
        clear: both;
        padding: 12px;
        font-size: 1.3em;
        line-height: 1.4em;
}

.ui-draggable, .ui-droppable {
        background-position: top;
}

Open in new window


header div:
<div class="ribbon" id="ribbon">
<strong class="ribbon-content" id="ribbon-content"><img src="../images/hassans.gif" alt="Hassans" width="150" height="75"></strong>
</div>
<div  id="status-block">
username
</div>
<div id="toolbar-block">
<div id="header-toolbar" class="ui-widget-header ui-corner-all">
<button id="logout">Logout</button>
<button id="settings">Settings</button>
</div>
  <ul id="toolbar-menu" >
    <li><a href="#">Open...</a></li>
    <li><a href="#">Save</a></li>
    <li><a href="#">Delete</a></li>
  </ul>
</div>

                <script>
                 $(function() {
                        var $logout = $("#logout").button({ text: false, icons: { primary: "ui-icon-key" } });
                        var $settings = $("#settings").button({ text: false, icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } });
                        var $menu = $("#settings").parent().next().show();

                $(document).click(function() {
                        $menu.hide();
                $settings.removeClass("active");
                });

                $settings.click(function(evt) {
                        evt.stopImmediatePropagation();
                        $(this).toggleClass("active")
                        $menu.css("display", $(this).hasClass("active")?"block":"none");
                        $menu.position({ my: "left top", at: "left bottom", of: this });
                        });

                $settings.parent().buttonset().next().hide().menu();

                $menu.hover(function() {
                $(this).addClass("overme");
                }, function() {
                        if($(this).hasClass("overme")) {
                                $(this).hide();
                                $(this).removeClass("overme");
                                $settings.removeClass("active");
                                }
                        });

                $menu.click(function(evt) {
                        alert($(evt.target).text());
                        });
                $("#header-toolbar").hide();
                });
                </script>

Open in new window

0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39747145
You're code keeps changing so I've made a mockup based on your image.  All you need to do is fill in the 'blanks'

http://jsfiddle.net/GaryC123/W73pU/4/
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Ashraf Hassanein
ID: 39747266
Thank you so much that is really working , and it solved my problem.
I have one more small issue not related to the positioning but to my main.css, where I can see that
  input[id=button-login] {
        float: right;
        margin-right: 20px;
        margin-top: 20px;
        width: 80px;
        height: 30px;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8));
        background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
        background-position: right;

Open in new window


  Is only working in chrome and IE11, can you help me in that or you prefer to open a new question not to mix the subjects?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39747282
Best to open a new question, as I have to go shortly and you haven't said what the problem is.

But...
input[id=button-login] // this will work
should be written as
#button-login // this is how you should write it

This is native shorthand in css when you reference the ID, if you need to reference an element by its class name then you use the period e.g.
.element-classname
0
 

Author Comment

by:Ashraf Hassanein
ID: 39747299
Thanks I have changed but still not working I am doubts regarding :
 
 background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8));
        background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);

Open in new window

I believe they are different in IE, but I will open another question, thanks for your help.
0
 

Author Closing Comment

by:Ashraf Hassanein
ID: 39747300
Very helpful and great support
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

756 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question