Home/ Questions/Q 995709
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T06:45:46+00:00

For creating rounded buttons, I am using three images a left image, a right

  • 0

For creating rounded buttons, I am using three images a left image, a right image and a strip of image. Every where its working fine but in safari and chrome the right image comes in next line, and I am not able to understand why this is happening. So some one please help me ,
Here is the html markup and its css.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
        body{width: 980px;margin: 0 auto}
        .light_button a {background:url("images/center.png") repeat-x scroll 0 0 transparent;color:#000000;display:inline-block;font-size:16px;font-weight:bold;height:34px;line-height:29px;position:relative;text-align:center;text-decoration:none;}
            .light_button .lout {background:url("images/left.png") no-repeat scroll 0 0 transparent;float:left;height:31px;left:-8px;position:absolute;width:8px;}
            .light_button .rout {background:url("images/right.png") no-repeat scroll 0 0 transparent;float:right;height:31px;position:absolute;width:26px;}


            .light_button a.light_right_nav_first {background:url("images/center.png") repeat-x scroll 0 0 transparent;color:#000;display:inline-block;font-size:16px;font-weight:bold;height:31px;line-height:29px;position:relative;text-align:center;text-decoration:none;}
            .light_button a.light_right_nav_first .lout {background:url("images/p_left.png") no-repeat scroll 0 0 transparent;float:left;height:31px;left:-24px;position:absolute;width:24px;}
            .light_button a.light_right_nav_first .rout {background:url("images/r_right.png") no-repeat scroll 0 0 transparent;float:right;height:31px;position:absolute;width:26px;}




    </style>
  </head>
  <body>

      <div class="light_button">
          <div class="left">
              <a class="nav_first" href="#">
                  <span class="lout"></span>
                    home
                  <span class="rout"></span>
              </a>


          </div>


          <div class="right">
              <a class="light_right_nav_first" href="#">
                  <span class="lout"></span>
                    home
                  <span class="rout"></span>
              </a>


          </div>
      </div>



  </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Don’t combine float and absolute positioning. In your case, you probably want to remove the float and retain position:absolute. You already have left:-8px;width:8px for .lout, you can do something similar for .rout by using the right property: right:-26px;width:26px.

    Also, since your left and right images will be outside the actual link, you should consider adding margins to the link so that the images don’t overlap.

    • 0