-1

I'm trying to insert an vertical image 1 pixel wide into my webpage but depending on the browser, zoom level or position of other elements on the page the image is often resized to be 0 pixels and dissapears. How can I stop this? Am I doing this wrong?

My html image (green space is just 1 pixel of green.

 <IMG class="dividerImage dday3" SRC="/SafeSiteLive/images/safesite_documents/icons/greenspace.gif">

My css

.dividerImage {
    float: left;
    margin-top: 50px;
    height: 50vh;
    width: 1px;
}

Some green vertical images not displaying Some green vertical images not displaying

Different zoom level more of the images display Different zoom level more of the images display

OneTwo
  • 2,291
  • 6
  • 33
  • 55
  • 6
    seems weird you are not using a border or bg of an element. But check this post out: http://stackoverflow.com/questions/12547580/borders-disappear-in-chrome-when-i-zoom-in – epascarello Sep 01 '15 at 12:09
  • 4
    I think that what people are going to tell you is that there's no reason to use an image to draw a border. Use `border`. – Robin Sep 01 '15 at 12:11
  • May be she/he has a reason for using an image instead of border and may be she/he is willing to enlighten us... :) – Norman Sep 01 '15 at 12:47
  • Because I don't want the border to be the full length of the div. Should I use a empty div for these instead? Ok yes should have used a border instead works much better thanks! – OneTwo Sep 01 '15 at 12:56

1 Answers1

0

I should have been using an empty div instead, works much better.

 <div class="dividingDiv"> 
     &nbsp;
 </div>

And the css.

.dividingDiv {
    border-left: 1px solid green;
    float: left;
    height: 50vh;
    margin-top: 50px;
    width: 0;
}
OneTwo
  • 2,291
  • 6
  • 33
  • 55
  • No you shouldn't and this is the anti-web. Not able to help with any other solution without knowing the structure of the page. – Rob Sep 01 '15 at 13:16