Kompx.com or Compmiscellanea.com

CSS centering <hr />

Windows : Internet Explorer 4.01 and 8.0+, Firefox 1.0+, Google Chrome, Opera 3.5 - 4.0 and 7.0+, Safari 3.1+, SeaMonkey 1.0+ [ 1 ].

Linux : Firefox 1.0+, Google Chrome / Chromium, Opera 7.0+, SeaMonkey 1.0+ [ 2 ], NetSurf 3.0+, Hv3.

CSS centering <hr />, if its width is less than 100%. Horizontal centering. Example:


HTML / XHTML. Code:

<hr />

CSS. Code:

hr {width: 50%; margin: 0 25% 0 25%;}

/* Extra CSS, just styling the look: */

hr {height: 1px; float: left; border: 0px; color: #f00; background: #f00;}

Note: mostly it works both with float: left and float: none. But float: left makes it for sure.


[ 1 ]

As well as Netscape 4.04+, Mozilla 0.6+.

[ 2 ]

As well as Netscape 4.04+, Mozilla 0.6+.


Aliosque subditos et thema

 

JavaScript + CSS centering

 

Centering content of a web page by means of JavaScript and CSS. A block containing the content of a page is JavaScript + CSS centered horizontally and vertically. Two cases: 1. A block is centered, if screen resolution is equal to or greater than 1024x768 - [ Open demo page ] 2. A block is centered, if screen resolution is equal to or greater than 1024x768 + mouse cursor is moved over a link in an element of the page content - [ Open demo page ] JavaScript and CSS horizontal and vertical centering. The first case. Step by step. 1. A web page, the part of which is going to be the element the JavaScript + CSS horizontal and vertical centering is to be applied to: HTML / XHTML. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>JavaScript + CSS horizontal and vertical centering. The first case. Step 1</title> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" /> <link rel="stylesheet" type="text/css" href="1.css" /> </head> <body>   </body> </html> CSS. Code: html {height: 100%; margin: 0px;} body {background-color: #fff; margin: 0px; height: 100%;} 2. A block element A (grey color) with dimensions declared explicitly, for instance 800 by 500 pixels and with relative positioning is created in the document's body. [ Open demo page ] HTML / XHTML. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>JavaScript + CSS horizontal and vertical centering. The first case. Step 2</title> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" /> <link rel="stylesheet" type="text/css" href="2.css" /> </head> <body> <div class="element_A">&nbsp;</div> </body> </html> CSS.

CSS. Target Opera only

 

CSS targeting Opera web browser only: This text is red in Opera HTML / XHTML. Code: <p>This text is red in Opera</p> CSS. Code: doesnotexist:-o-prefocus, p {color: #f00;} The -o-prefocus pseudo-class allows styling elements for Opera browser only. The code is placed in the common CSS file, not in a separate one as it is in case of Internet Explorer conditional comments. Source: http://www.opera.com/docs/specs/presto2.12/css/o-vendor/ [ 1 ] Opera 3.5 - 5.0 ignores "doesnotexist:-o-prefocus" and reads code as p {color: #f00;}. Opera 6.0 - 9.4 ignores the whole code starting "doesnotexist". [ 2 ] Internet Explorer 5.5+, Firefox 1.0+, Google Chrome, Safari 3.1+, SeaMonkey 1.0+, Netscape 7.2+, Mozilla 1.5+ ignore the whole code starting "doesnotexist". Older browsers like Internet Explorer before 5.5 or Netscape before 7.2 or Mozilla before 1.5 seem to ignore the uncommon, Opera 9.5+ specific code ("doesnotexist:-o-prefocus") and apply styles to what they understand - here it is the p tag; making the text in it red. [ 3 ] The text is red in Dillo 3.0.1 as well.