This is an odd one and actually stumped me for a bit, in order to solve I used f12 developer tools to uncheck specific css attributes and tested the print function again. It ended up being a font-family attribute in the all css style.
Once removed the page printed all of the content on all browsers once again. I also tried adding a second font but that also did not solve the problem. It seems that the font was not being imported correctly or was corrupt. Replacing the font using the @media print solves the issue.
For example:
Many methods for this are workarounds or hacks that break other elements or don't work on some browsers. However, you can do this quite simply using flex.
For example:
html
<body>
<div id="menubox">
<ul id="menu">
<li>menu item 1</li>
<li>menu item 2</li>
<li>menu item 3</li>
</ul>
</div>
</body>
css
#menubox {
position:absolute;
display:flex;
flex-direction: column;
width:15rem;
height:100%;
}
#menu {
list-style:none;
margin: auto 0;
}
This method allows you to show/hide a form element without making another request against the server. It also works when the show/hide element is required by the asp.net code behind.
You can use any type of sub element under a dropdown with this script. You will need to use a CDN or download and host your own jquery-1.3.2.min.js file.
SCRIPT
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(function() { $('#<%= Dropdown1.ClientID %>').change(function() { if (this.value=="My Value") { $('#<%= Element1.ClientID %> ').css({ visibility: 'visible' }); } else { $('#<%= Element1.ClientID %> ').css({ visibility: 'hidden' }); }}); }); </script>
HTML
<asp:DropDownList runat="server" ID="Dropdown1" class="required" >
<asp:ListItem Value=""> none</asp:ListItem>
<asp:ListItem Value="My Value">Some Text Here</asp:ListItem>
</asp:DropDownList>
<!-- place any element here with id="Element1" -->
You would first need to target the operating system which can be best accomplished by using javascript such as:
if(navigator.userAgent.indexOf('Mac') > 0) {
//code
}
Now in order to target the browser version you can use things such as if ie triggers for internet explorer
<!--[if (gt IE 6)&(lte IE 7)]>
<link href="/css/IE.css" rel="stylesheet" type="text/css">
<![endif]-->
or webkit for mozila or safari
@media screen and (-webkit-min-device-pixel-ratio:0) {
your css here
}
final code to target internet explorer on mac would look something like this:
if(navigator.userAgent.indexOf('Mac') > 0) {
<!--[if (gt IE 6)&(lte IE 7)]>
<link href="/css/IE.css" rel="stylesheet" type="text/css">
<![endif]-->
}
Here is a neat little trick you can use to target Safari and make it behave while fixing cross browser layouts. This method will allow you to keep a page valid and it will allow you to only target Safari.
First thing you want to do is use javascript to inject a css file for all browsers that support webkit with this code:
Now, like I stated above this will target all browsers that currently support webkit and add support for it in the future so you cannot rely on only this. So now you need to create the css file and add some code that is Safari specific by using the double # method. Some people will ask, why not just include the double # to begin with? And the simple answer is that it will cause your CSS not to validate.
Here is the example css code that will target only Safari
Enjoy!