|
CSS - Cool Font Type Preview Tool
http://typetester.maratz.com/
I am not the author, but this is sweet! Similar Tutorialsi have 2 columns contained in a holder. the rite hand column comes below the left in iE...and looks fine in firefox, sorry i cant upload it...i have no hosting for a bit heres the html, and css: http://www.meyerweb.com/eric/css/ed...ral/glassy.html Doesn't work in IE (surprise surprise) but apart from that it is an extremely cool effect! I was recently working on something in JQuery where on click I was fading out a div and then fading it back in. To learn more about CSS transitions, I wondered whether I could do the same thing with transitions. So I set up a simple bit of JQuery that toggles a class on and off to trigger the transition. It seems that it's not possible to fade out to 0 in a transition and then fade back in. Unless I'm missing something, you can't set a midpoint of opacity 0. You can use a CSS animation to do that, but it's not clear to me how you play the animation again when I remove the class. Am I missing something? Am I just using the wrong tool for the job and should stick with JQuery's fadeOut() and fadeIn() functions? basically i want them to hover over the image and the tool tip pops up.. it works awesome in firefox(of course) but does nothing in IE. also for testing i made a link tool tip and it works in IE but its cropped horribly. you can check it out by looking he http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendID=9726504 heres the style classes: Code:
a span
{
display: none;
}
a:hover span
{
position: absolute;
display: block;
background: grey;
border: 1px solid black;
}
a:hover
{
color: 000000;
background-color: grey;
text-decoration: none;
font-size:16;
}
heres the div placement: Code: <div class="aim"> <a> <img border="0" class="" src="http://mattwild.com/media/graphic/aim.gif"> <span>allaimnamesRused</span></a> </div> by the way they are the two buttons "add my aim" and "add my msn" and the link underneath them Hi I want to make a tool where my users can select an area in an image, via resizing a select rectangle. Do you guys know if this tool is available somewhere? Thought that it's stupid to re-invent the wheel.... Regards, Chrille I don't want a browser plugin. I want a tool to open a CSS file and show me samples of the styles. I would like to edit the styles and see the effects of my edits. Any suggestions? I want to display text when I hover over certain areas of an image, so I am using an image map, no href, and assigning the text using ALT=. As a result, the text shows up as a tooltip. It works great except that the background color in the tooltip box is a very dated yellow color that looks inconsistent with the rest of my page. Is there any way to change the background color? (I am trying to avoid scripts because I've never used them and don't really have time to learn how, at this point) Thanks, Beth Hi all I'm working with Firefox and Firebug plugin. I want to check if the CSS I use is valid *the way browsers interpret it*. Example: Code: /* Valid: */
div.my {
position: relative;
z-index: 10;
}
/* Invalid: */
div.my {
z-index: 10; /* The attribute is not applied to the div, because it's not positioned! These sort of errors I want to get to know somehow! */
}
/* Valid: */
div.my {
z-index: 10; /* At this point the CSS isn't valid yet... */
}
div.my {
position: relative; /* Now it is valid (I guess, because I guess the browser first parses all CSS available and only after this it assigns the attributes?) */
}
I hope you see what I mean. I came upon this because I had some problems with z-indexes and then remembered that every z-positioned element needs to be positioned. If I had a cool Firefox plugin that would have checked the CSS every time before it were applied to the document and warned me this wouldn't have been a big problem. ;-) Thanks a lot for help Josh Hi All, Is there a site where I can simply type in a URL and have it give me screenshots in multiple browsers for FREE please? Thanks in advance, Ziffa27 Hi Guys, we are currently working on printing a webpage with only printing the body of the page (or the content that we only need) but when it comes to its print preview it's not kinda align or rather it doesn't look good - in its presentation in the print preview screen or on the paper when it's printing time! - so my question is is it possible to use a css code to a print preview? I am developing a help manual and I'd love to include screenshots in the CSS section that shows the page with an opaque type overlay with a description of each CSS rule. Something like the Developer tools in IE or FF when you use the "select element by click" function, except that I'm after all elements selected by default (together with the CSS ID). Is there such a thing? I have two items (text) floated left. But when I hit print preview the second text label "wraps" under the first so the are both aligned left. I would like to keep positions fixed when viewing and printing. Happens in both FF and IE. Thanks, Doug I noticed that in IE6 when I go to print, or even look in print preview, it cuts off the right side of my page. Is there any code to avoid that? Or even any tips? I have a page that is laid out with in a table. It has a header and a footer area. Ive defined a stylesheet for printing, and my content shows up correctly when printing (or print preview) with the header and footer items left out. What is not right though, is the 1st page is blank when i do a print preview. Help ? to add: This is an asp.net web page, that has a form with several images that render inside a div element and this form is within the main table. When I preview my page in firefox on my Mac, (via Dreamweaver's Preview function), I can see the main logo image fine. However, when I uploaded the page and image correctly, I only get a blank area. I think this is a css issue, but I can't figure it out. http://alpineec.com/TEST/index.php Any thoughts? CSS Code:
*
{
padding: 0em;
margin: 0em;
}
body
{
background-color:#999999;
padding: 35px 0px 35px 0px;
}
body,input
{
font-size: 10pt;
font-family: "georgia", "times new roman", serif;
color: #333333;
}
p
{
line-height: 1.5em;
margin-bottom: 1.0em;
text-align: justify;
}
a
{
color: #B96D00;
text-decoration: underline;
}
a:hover
{
text-decoration: none;
}
h3 span
{
font-weight: normal;
}
h3,h4
{
display: inline;
font-weight: bold;
background-repeat: no-repeat;
background-position: right;
}
h3
{
font-size: 1.7em;
padding-right: 34px;
background-image: url('images2/db1.gif');
}
h4
{
font-size: 1.2em;
padding-right: 28px;
background-image: url('images2/db2.gif');
}
.contentarea
{
padding-top: 1.3em;
}
img.left
{
position: relative;
float: left;
margin: 0em 1.8em 1.4em 0em;
}
img.right
{
position: relative;
float: right;
margin: 0em 0em 1.8em 1.8em;
}
.post .details
{
position: relative;
top: -1.5em;
font-size: 0.8em;
color: #787878;
}
.post ul.controls
{
clear: both;
}
.post ul.controls li
{
display: inline;
font-size: 0.8em;
}
.post ul.controls li a
{
background-repeat: no-repeat;
background-position: left;
padding: 0em 1.0em 0em 20px;
}
.post ul.controls li a.printerfriendly
{
background-image: url('images2/icon-printerfriendly.gif');
}
.post ul.controls li a.comments
{
background-image: url('images2/icon-comments.gif');
}
.post ul.controls li a.more
{
background-image: url('images2/icon-more.gif');
}
.box
{
position: relative;
background: #FDFCF6 url('images2/boxbg.gif') repeat-x;
left: -1.5em;
top: -1.5em;
padding: 1.5em;
border-bottom: solid 1px #E1D2BD;
margin-bottom: 1.0em;
}
ul.linklist
{
list-style: none;
}
ul.linklist li
{
line-height: 2.0em;
}
#upbg
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 275px;
background-color:#999999;
z-index: 1;
}
#outer
{
z-index: 2;
position: relative;
/*
The width value below controls the overall width of the design. By default it's set to 82%
(so it'll take up 82% of the browser window's width). You can set it to a different percentage
value (70%, 90%, etc.) or even a pixel value (760px, 800px, etc.) to enforce a fixed width.
*/
width: 700px;
border: solid 1px #fff;
background-color: #fff;
margin: 0 auto;
}
#header
{
position: relative;
width: 100%;
background: #5a5a5a;
}
#headercontent
{
position: absolute;
bottom: -56px;
padding: 0em 2.0em 1.3em 2.0em;
left: 274px;
}
#headercontent h1
{
font-weight: normal;
color: #fff;
font-size: 2.5em;
}
#headercontent h1 sup
{
color: #777;
}
#headercontent h2
{
font-size: 1.0em;
font-weight: normal;
color: #aaa;
}
#menu
{
position: relative;
background: url('images2/menubg.jpg') repeat-x top left;
height: 20px;
padding: 0em 1.0em 0em 1.0em;
}
#menu ul
{
position: absolute;
top: 2px;
}
#menu ul li
{
position: relative;
display: inline;
}
#menu ul li a
{
padding: .5em 1.0em 0.9em 1.0em;
color: black;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}
#menu ul li a:hover
{
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color: #FE3D00;
}
#menu ul li a.active
{
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color: #FE3D00;
}
#content
{
padding: 0em 2.0em 0em 2.0em;
}
#primarycontainer
{
float: left;
margin-right: -18.0em;
width: 100%;
}
#primarycontent
{
margin: 1.5em 22.0em 0em 0em;
}
#secondarycontent
{
margin-top: 1.5em;
float: right;
width: 18.0em;
}
#footer
{
position: relative;
height: 2.0em;
clear: both;
padding-top: 5.0em;
background: #fff url('images2/border2.gif') repeat-x 0em 2.5em;
font-size: 0.8em;
}
#footer .left
{
position: absolute;
left: 191px;
bottom: 1.2em;
z-index: 10;
}
#footer .right
{
position: absolute;
right: 2.0em;
bottom: 1.2em;
}
pre {
padding:10px;
border: 1px dotted #eee;
background-color:#f9f9f9;
}
#photodiv {
background-repeat: no-repeat;
}
#aboutBLOCK{padding-left:40px;}
/* PHOTO GALLERY */
#pg {
border:2px dotted #666;
padding:5px;
padding-top:15px;
}
#pg ul {
list-style:none;
left: 10px;
padding:0;
margin:0;
position:relative;
float:left;
}
#pg ul li {
display:inline;
float:left;
margin:0 0 8px 8px;
}
#pg ul li a {
display:block;
width:90px;
height:90px;
text-decoration:none;
border:1px solid #000;
}
#pg ul li a img {
display:block;
width:90px;
height:90px;
border:0;
}
#pg ul li a:hover {
white-space:normal;
border-color:#336600;
background-color:#323E20;
}
#pg ul li a:hover img {
position:absolute;
left: 290px;
top:110px;
width:300px;
height: 300px;
border:1px solid #000;
}
#pg ul li a span {display:none}
#pg ul li a:hover span {
display:block;
position:absolute;
left:9px;
top:110px;
width:270px;
height:auto;
font-size:12px;color: black;
}
Hi all, Simple issue - got a form with textboxes whose screen width will be less than the max width (for design and spacing purposes). However, I'd like the print stylesheet to make the entire contents of the textbox visible when they print. A year or two ago, setting input{width: auto;} in the print stylesheet worked fine, but it seems the newer browsers (IE 6+. latest FF) do not support this method. Any thoughts on how to do this? Thanks, AJ This is a very interesting bug and I have been trying to do a little bit of hacking but with no success here. So, thought anyone of you would know what I'm missing.. The problem here is that it showed up just fine on the webpage but not in Print Preview or Print-Out for IE. Code:
<style type="text/css">
divBlackBox1
{
margin: 50px auto;
padding: 0px;
width: 400px;
height: 4px;
display: block; /* for IE stupidity (to make height work correctly with the correct pixels)... */
font-size: 1pt; /* for IE stupidity (to make the smaller height work due to default font-size)... */
overflow: hidden; /* Problem is that it doesn't work for print preview or print-out in IE... */
background-color: #000000;
}
</style>
<div class="divBlackBox1"></div>
Thanks, FletchSOD My logo is defined as a background image in my .css. It appears in IE when I print/print preview, but in FF it does not. This is the .css code for the logo div: #logo { float: left; margin-left:1px; width: 200px; background:url(../images/mm-logo.jpg) no-repeat; height:50px;} Any ideas or suggestions? I have pages the when viewed for print in Firefox, show the page going below the page margin and not continuing to the next logical printed page. This image below, shows better than I can explain. Has anyone ever seen this before?...Any ideas how to make it preview and print correctly? While previewing my project I'm working on in Opera, I can't see the ' Background Color ' . I can see it fine in IE and Firefox, but darn if that Opera isn't giving me a hard time. I had checked my code twice to see if it's correct, it's seems fine. by the way, I am using Dreamweaver as my editor. Can anyone help me out on this issue? Thank you I am using XAMPP, my project is not online. Here is the following code >>>>> Code: <body>
<div id="mainBody-wrap" class="clearfix" >
<div id="social-container">
<div id="social">
<div id="socialNav">
<ul id="socialList">
<li class="rss" title="Subscribe by RSS"><a href="#" target="_self"></a></li>
<li class="delicious" title="Bookmark us using Delicious"><a href="#" target="_blank"></a></li>
<li class="facebook" title="Join us on Facebook"><a href="#" target="_blank"></a></li>
<li class="twitter" title="Follow us on Twitter"><a href="#" target="_blank"></a></li>
</ul>
</div>
<div id="googlePlus">
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="small" annotation="none"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div id="infoNav">
<ul id="infoList">
<li><a href="#" target="_self">Message Board</a></li>
<li><a href="#" target="_self">Help FAQ</a></li>
<li><span>[ </span><a href="#" target="_self">Rules</a><span> ]</span></li>
<li><a href="#" target="_self">Contact Us</a></li>
</ul>
</div>
</div>
</div><br style="clear:both" />
<div id="hdr-container">
<div id="hdr">
<div id="searchBox">
</div>
</div>
</div>
</div>
</body>
Code: html, body {
height: auto;
width: 100%;
}
body {
background-color: #161616;
font-family: " Lucida Grande ", " Verdana ", sans-serif;
font-size: 12px;
color: #FFFFFF;
text-align: center;
}
/* Begin #mainBody-Wrap */
#mainBody-wrap {
width: 100%;
}
/* begin #social-container */
#social-container {
width: 100%;
background-color: #0F0F0F;
border-bottom: 1px solid #000000;
}
/* end #social-container */
/* begin #social */
#social {
width: 810px;
height: 27px;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
/* end #social */
/* begin #socialNav */
#socialNav {
width: 95px;
height: 27px;
float: left;
}
/* end #socialNav */
/* begin #socialList */
#socialList {
width: 95px;
height: 16px;
position: relative;
top: 5px;
}
#socialList li {
position: absolute;
top: 0;
}
#socialList li, #socialList a {
height: 16px;
display: block;
}
.rss {
background: url(../images/sprite-ln1.png) no-repeat scroll 0 0 transparent;
width: 16px;
left: 0;
}
.delicious {
background: url(../images/sprite-ln1.png) no-repeat scroll -16px 0 transparent;
width: 16px;
left: 27px;
}
.facebook {
background: url(../images/sprite-ln1.png) no-repeat scroll -32px 0 transparent;
width: 16px;
left: 52px;
}
.twitter {
background: url(../images/sprite-ln1.png) no-repeat scroll -48px 0 transparent;
width: 16px;
left: 78px;
}
#googlePlus {
float:left;
margin: 6px 0 0 8px;
}
/* end #socialList */
/* begin #infoNav */
#infoNav {
width: 370px;
height: 27px;
float: right;
}
/* end #infoNav */
/* begin #infoList */
#infoList {
margin: 5px 0 0 0;
text-align: right;
}
#infoList li {
display: inline;
margin: 0 0 0 18px;
}
#infoList li a {
color: #FFFFFF;
}
#infoList li a:hover {
color: #DDDDDD;
}
#infoList li span {
font-weight: bold;
color: #990000;
}
/* end infoList */
/* begin #hdr-container */
#hdr-container {
width: 810px;
margin: 0 auto;
}
/* end #hdr-container */
/* begin #hdr */
#hdr {
width: 100%;
height: 155px;
}
/* end #hdr */
/* begin #searchBox */
#searchBox {
width: 421px;
height: 37px;
margin: 5px 0 0 0;
display: block;
float: right;
}
/* end #searchBox */
/* End #MainBody-Wrap */
/* Begin ClearFix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix {
display: inline-table;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */
|
|||||||