SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question ( support Mozila / chrome / safari ).not support IE / Opera ????????

    mozila / chrome / safari
    firefox.jpg


    IE / Opera
    ie2.jpg


    <!DOCTYPE html>
    <html>
    <head>
    <title> my page</title>
    <style>

    hr.style-eight
    {
    padding: 0;
    border: none;
    border-top:1px dashed black;
    color: #333;
    text-align: center;
    width:50%;

    }
    hr.style-eight:after
    {
    content: "Moon";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
    }

    </style>
    </head>
    <body>
    <br><br>
    <hr class="style-eight">

    </body>
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    IE9+ can easily be fixed by adding overflow:visible and margin:auto to the hr but opera doesn't seem to want to play ball.

    You can do it like this for opera (and others) with a little more css though:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>my page</title>
    <style>
    hr.style-eight {
    	padding: 0;
    	border: none;
    	text-align: center;
    	width:50%;
    	margin:auto;
    	overflow:visible;
    	line-height:1.5em;
    	height:1.5em;
    	position:relative;
    }
    hr.style-eight:before {
    	content:" ";
    	border-bottom:1px dashed black;
    	position:absolute;
    	left:0;
    	right:0;
    	top:50%;
    	z-index:2;
    }
    hr.style-eight:after {
    	content: "Moon";
    	display:inline-block;
    	position:relative;
    	text-align:center;
    	font-size: 1.5em;
    	padding: 0 0.25em;
    	background: white;
    	color: #333;
    	z-index:3;
    }
    </style>
    </head>
    <body>
    <br>
    <br>
    <hr class="style-eight">
    </body>
    </html>

    Won't work in ie8 and under though.

  3. #3
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks buddy

  4. #4
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Maybe it doesn't fit into your system, but as an alternative you can forget the hr, and style a text-element:
    HTML Code:
    ...
    <h2><span>Moon</span><b></b></h2>
    ...
    The <b> tag (a span with a separate class is semantically better, but needs more code ) is used to place the dashed background line.
    The <span> is used to overlay the dashed line, with some padding left and right.
    Code:
    h2 {
    	text-align: center;
    	position: relative;
    	}
    h2 span {
    	padding: 0 10px;
    	background: white;
    	position: relative;
    	z-index: 2;
    	}
    h2 b {
    	border-bottom: 1px dashed black;
    	position: absolute;
    	left: 0;
    	right: 0;
    	top: 50%;
    	z-index: 1;
    	line-height: 1px; /* for IE7 */
    	}
    • Test: hr-alternative.htm

    • Tested and o.k. in: Firefox, Chrome, Opera, Safari, IE7.
    • According to Netrenderer.com also playing in IE8-9-10.
    • Font scaling resistant.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •