Having an issue with CSS formatting on Internet Explorer and Firefox. I am trying to create a navigation bar with several images displayed in a column, using a background image. I positioned the background image on the page and then created a div inside it to hold each image link, formatting them with CSS. While this works perfectly in Safari, in IE and Firefox, the images do not scale to fit the background image.
Below is the relevant CSS from my page:
.nav_background_home{
width:17%;
position:absolute;
left:56%;
top:31%;
z-index:100;}
.nav_background_home .nav_items{
position:absolute;
top:8%;
z-index:150;}
img.nav_item{
margin-bottom:3.75%;
height:4.4%;
margin-left:7%;}
I included everything in the HTML:
<div class="nav_background_home"><img src="nav_background.png" width=100% />
<div class="nav_items">
<img src="nav_items/set_design.png" class="nav_item" height=100% />
<img src="nav_items/company_report.png" class="nav_item" height=100% style="height:4.1%;"/>
<img src="nav_items/prompt_pages.png" class="nav_item" height=100% />
<img src="nav_items/characters.png" class="nav_item" height=100% />
<img src="nav_items/costumes.png" height=100% class="nav_item" style="margin-bottom:2%;" />
<img src="nav_items/video.png" height=100% class="nav_item" style="height:4.1%;" />
</div>
While Safari displays this perfectly, Firefox and IE are not scaling the images. I tried removing "height=100%" from the HTML, but it did not solve the issue. You can see the site here: .
Thank you!