I am getting error from VS only when I open the CSS file:
'expression(-this.clientWidth/2 + ' is not a valid value for the 'margin-left' property.
I am using this CSS Expression to center a DIV Box within a parent element. I know this error is coming because I am using CSS feature specific to IE. As a matter of fact, it took me quite a lot of time searching and effort (tiral/error) until I made it
work.
My question is :
1. How I can get exactly the same effect above without using IE Specific features,
or,
2. How I can disable this error reporting from VS 2005?
How I can get exactly the same effect above without using IE Specific features
Hello,
I would use javascripts or jQuery to achive the same thing. It's never been a good idea to do caculations in CSS. You can easily do this with javascripts/jQuery.
tarekahf
How I can disable this error reporting from VS 2005?
You can still run the project I guess. So do not turn that feature off. Just ignore it if you already know what's going on.
Yes, I think your code will work, but I decided to look for jQuery solution, and I found it, the only minor thing is that I had to do a small fix for the CSS after using the jQuery Center Plugin.
tarekahf
Member
143 Points
272 Posts
CSS Error: is not a valid value for the 'margin-left' property.
Apr 22, 2012 01:16 PM|LINK
I am using VS 2005 and this CSS code:
.Confirmation { border: solid 1; width:450px; left:50%; margin-left:expression(-this.clientWidth/2 + "px"); margin-top:10px; text-align:center; position:relative; }I am getting error from VS only when I open the CSS file:
'expression(-this.clientWidth/2 + ' is not a valid value for the 'margin-left' property.
I am using this CSS Expression to center a DIV Box within a parent element. I know this error is coming because I am using CSS feature specific to IE. As a matter of fact, it took me quite a lot of time searching and effort (tiral/error) until I made it work.
My question is :
1. How I can get exactly the same effect above without using IE Specific features,
or,
2. How I can disable this error reporting from VS 2005?
Tarek
Ruchira
All-Star
43018 Points
7031 Posts
MVP
Re: CSS Error: is not a valid value for the 'margin-left' property.
Apr 22, 2012 01:23 PM|LINK
Hello,
I would use javascripts or jQuery to achive the same thing. It's never been a good idea to do caculations in CSS. You can easily do this with javascripts/jQuery.
You can still run the project I guess. So do not turn that feature off. Just ignore it if you already know what's going on.
My Tech blog | My YouTube ChannelPlease 'Mark as Answer' if this post helps you.tarekahf
Member
143 Points
272 Posts
Re: CSS Error: is not a valid value for the 'margin-left' property.
Apr 22, 2012 09:24 PM|LINK
Thanks Ruchira,
Yes, everything is working fine, it is just the error is annoying.
Could you point me to the jQuery command I can use to achieve similar effect? I just need to center a DIV box within the container element.
I jus implemened my first line of code Yesterday to reset "Radio Button List" ASP.NET control using jQuery.
Appreciate your help.
Tarek.
Ruchira
All-Star
43018 Points
7031 Posts
MVP
Re: CSS Error: is not a valid value for the 'margin-left' property.
Apr 23, 2012 07:17 AM|LINK
Hi,
Try this
document.getElementById('yourelementIdhere').style.marginLeft = (-parseInt(document.body.clientWidth)/2)+"px";
My Tech blog | My YouTube ChannelPlease 'Mark as Answer' if this post helps you.tarekahf
Member
143 Points
272 Posts
Re: CSS Error: is not a valid value for the 'margin-left' property.
Apr 23, 2012 07:38 AM|LINK
Thanks Ruchira,
Yes, I think your code will work, but I decided to look for jQuery solution, and I found it, the only minor thing is that I had to do a small fix for the CSS after using the jQuery Center Plugin.
I user this center plugin:
http://archive.plugins.jquery.com/project/elementcenter
Ths script tag in <head> section:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" onloadDone="true" onload="function(){ddscript.onloadDone=true;dd_load_js();}"></script> <script src="js/jquery.center.js" type="text/javascript"></script>HTML and client-side script:
<script> $(document).ready(function() { var theDivID = "#<%= divConfirmation.clientID %>"; $(theDivID).center({ vertical: false, horizontal: true }); $(theDivID).css("position", "relative"); // <---- this is the CSS fix }); </script> <div runat="server" id="divConfirmation" class="Confirmation"> <img src="http://img2.b8cdn.com/images/icons/status-success.png"/><h1>Thank you for using<br />SPMS System</h1> with the compliments of HR Staff Performance Management and<br /> ITD, Systems Development and Maintenance Division .<hr /> If you require any technical assistance, please contact Br. Tarek , ext: 1234, email: <a href="mailto:email@compa.org">email@comp.org</a><hr/> <div><asp:Label ID="lblConfMsg" runat="server"></asp:Label></div> <div class="close" onclick="closeSPMSFormProcess();"><button class="close"> </button>Close</div> </div>and this is the CSS File:
.Confirmation { border: solid 1; width:450px; /*left:50%; margin-left:expression(-this.clientWidth/2 + "px");*/ margin-top:10px; text-align:center; position:relative; }Result:
So, I had to remove the CSS "Position=absolute" set by the center plugin, becuase it was messing up the rest of the elements on the screen.
Finally, I am using jQuery.
Tarek.