Small issue with <hr> html tag

I have created vertical and horizontal lines with the <hr> html tag, and have them inside a PHP script. The problem I have is that when you zoom on the site, the position of the lines move.

if you zoom (command key +/- on most browsers) the border i've made (with a div) stays in its place, but the horizontal and vertical lines do not.

Another thing I just want to mention is that I was unable to change the CSS script (stylesheet.css) because of the oscommerce 2.2 configuration.. It's a very old version of the oscommerce server and I know it would probably be a better option to upgrade the server and look into templates, but I would like to figure out my problem here.

So let's not talk about CSS since i'm not entitled to use it in this case.

Here is a snippet of the code:

&nbsp;&nbsp;&nbsp;&nbsp;
  <div style="width:680px;height:540px;border-radius: 20px;-webkit-border-radius: 20px;-moz-border-radius: 20px;-o-border-radius: 20px;border:1px solid #a4a4a4;background-color:#FFFFFF;">

      <hr style="width: 0.3px; height: 480px; background: #333; position: absolute; left: 660px; top: 315px;">
      <hr style="width: 0.3px; height: 480px; background: #333; position: absolute; left: 890px; top: 315px;">

      <hr style="width: 610px; height: 0.3px; background: #333; position: absolute; left: 468px; top: 463px;">
      <hr style="width: 610px; height: 0.3px; background: #333; position: absolute; left: 468px; top: 643px;">

     <table width="100%" cellspacing="0" cellpadding="15">
  </div>

Answers


I suggeest to add position:relative to parent DIV and change HR width & height to %

Example:

<div style="width:680px;height:540px;border-radius: 20px;-webkit-border-radius: 20px;-moz-border-radius: 20px;-o-border-radius: 20px;border:1px solid #a4a4a4;background-color:#FFFFFF;position: relative">
    <hr style="width: 0.3px; height: 100%; background: #333; position: absolute; left: 33%; top: -9px;">
    <hr style="width: 0.3px; height: 100%; background: #333; position: absolute; left: 66%; top: -9px;">
    <hr style="width: 100%; height: 0.3px; background: #333; position: absolute; left: 0; top: 33%;">
    <hr style="width: 100%; height: 0.3px; background: #333; position: absolute; left: 0; top: 66%;">
    <table width="100%" cellspacing="0" cellpadding="15"></table>
</div>

Live: http://jsfiddle.net/ybBwT/


ok i got it problem is you use position:absolute and its in browser behaviour and solution is give position:relative to its parent div and rearrange your hr position according to you it works i tried in browser here is your hr code i modified it according to me you modify it according to you and don't forget to give position relative to its parent div

<hr style="width: 0.3px; height: 480px; background: none repeat scroll 0% 0% rgb(51, 51, 51); position: absolute; top: 0px; left: 215px;">
<hr style="height: 480px; background: none repeat scroll 0% 0% rgb(51, 51, 51); position: absolute; width: 0.3px; right: 227px; top: 0px;">
<hr style="width: 610px; height: 0.3px; background: none repeat scroll 0% 0% rgb(51, 51, 51); position: absolute; top: 170px; left: 34px;">
<hr style="width: 610px; height: 0.3px; background: none repeat scroll 0% 0% rgb(51, 51, 51); position: absolute; left: 34px; top: 347px;">

Need Your Help

Android updating marketplace app using a different signing key

android keystore signing marketplace

Developer signed an app with his personal keystore but it should have been the company's keystore.

layout in layout

cakephp view cakephp-2.1

I have a general layout. (default)