Snowfalls

Archive for the ‘CSS’ Category

For example you have this class:

<div class=”rounded”>… Text Here …</div>

In your CSS code you could add these line to implement the rounded-corner box:

.rounded{

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

}

In which:

moz-border-radius gives you compatibility with older firefox browser

-webkit-border-radius gives you compatibility with older webkit browsers, such as Safari

border-radius is a CSS3 tag that works with modern browsers, such as Safari 5, Firefox 3.5.x, Internet Explorer 9, and Google Chrome 4

But, unfortunately these styles are not working in IE6, 7, and 8

Advertisements

Briefly we could say that

Printed Web Layout is a design when the page is printed or in a print preview

And Print Stylesheet itself is a stylesheet which is used to this special purpose.

To implement this you could just simply put the stylesheet link on the header (like the usual stylesheets), but in addition to that you should set the media parameter to print, for example:

<link href=”/stylesheets/print.css media=”print” rel=”stylesheet” type=”text/css” />

And inside the print stylesheet there are some points to consider, which are:

1. The unwanted elements, you should hide this for good, for example:

#sidebar{

display: none !important;

}

2. The Showing Content, for example you could extend the width and remove margins and the floating elements style:

#main-content{

width: 100%;

margin: 0;

float: none !important;

}

Please see this example:

<h2><a href=”#”>This is a link</a></h2>

And this one:

<a href=”#”><h2>This is a link</h2></a>

If we see the result of those html codes, both of the examples would give same result if you test it on modern browsers.

Unfortunately, if you are still using IE6 as your browser then you will have a problem.

Fox example you have this CSS code:

a{ text-decoration: underline; }

a:hover{ text-decoration: none; }

If you follow the second example (which is the invalid html) the anchor hover state would not working in IE6 because of the headings element.

So to avoid that and make your code valid you should refer to http://validator.w3.org for checking