html - Extra Box Appears When Browser Ratio is Different -


i'm trying create clickable box sizes , positions relative how browser sizes, box when decrease width of browser , increase length. i'm not sure going on , how rid of it.

here screen captures of going on: - browser @ full size: http://i.imgur.com/mbymoyw.png - browser stretched described above: http://i.imgur.com/kux1tdn.png

css:

img.banner {     width: 100%;     z-index: 0 }  #banner {     width: 100%;     margin-top: 0px;     margin-bottom: auto;     margin-left: 0px;     margin-right: auto;     position: relative }  a.rollover {     display: block;     position: absolute;     top: 15%;     left: 15%;     width: 17%;     height: 8%;     background-color: black; } 

html:

<body> <div id="banner">     <img src="image.png" class="banner"/>     <a href="banner1.png" class="rollover"> </div> </body> 

also, other suggestions improve css , html appreciated, since i'm new this.

thanks.

simple though seems, not closing anchor tag browser generating 2 anchors - 1 inside div, , 1 outside it. these layout on top of each other until browser resized: positions deviate bit , 'split'. fix closing anchor:

<body> <div id="banner">     <img src="image.png" class="banner"/>     <a href="banner1.png" class="rollover"></a>     <--added closing tag here </div> </body> 

you can check out fiddle here. can't believe took me long!


Comments

Popular posts from this blog

html5 - What is breaking my page when printing? -

c# - must be a non-abstract type with a public parameterless constructor in redis -

ajax - PHP/JSON Login script (Twitter style) not setting sessions -