Oscommerce Question posted in
The official documentation can be found here

Small issue with <hr> html tag – Oscommerce

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>
Tags:

4

Answers


  1. 0

    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;">
    Login or Signup to reply.
  2. 0

    That’s happening because you have absolute positions in your style… Try blocking all the divs into one div and aligning the hr’s with margins instead of “left” and “right”

    Login or Signup to reply.
  3. 0

    • Your <hr/> has absolute position, so it ok what it’s stay in same place while other elements move.

    • You cannot open <hr/> after <table> tag.

    This is wrong:

    <table width="100%" cellspacing="0" cellpadding="2">

<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: 630px;">

      </div>

    Need to be for example:

    <hr/>
<hr/>

<hr/>
<hr/>
<table width="100%" cellspacing="0" cellpadding="2">
    <tr>
        <td>
           <div>
           </div>
            .....
        </td>
    • Better to use small png images instead of hr and make it background of <td>, or in last case of <table>
    Login or Signup to reply.
  4. 0

    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/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search