Despite making most of this page responsive, I'm having trouble getting the two buttons to scale appropriately. They are utilizing javascript for a mouseover effect, and I suspect that might be causing some issues. Ideally, I would like the images to resize along with the rest of the page when viewed on different screen resolutions.
http://74.117.156.152/~pr0digy/
This is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>US Legal Support - CapEx</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<meta name="viewport" content="width-device-width, initial-scale-1.0">
<script type="text/javascript">
if (document.images) {
new1 = new Image;
new2 = new Image;
existing1 = new Image;
existing2 = new Image;
new1.src = "images/new1.png";
new2.src = "images/new2.png";
existing1.src = "images/existing1.png";
existing2.src = "images/existing2.png";
}
function swapImage(thisImage,newImage) {
if (document.images) {
document[thisImage].src = eval(newImage + ".src");
}
}
</script>
</head>
<body class="body">
<header class="mainHeader">
<img src="images/uslegalbox.png" alt="usls box" >
</header>
<div class="textBox">
<div class="text">
<h1>Capital</h1>
<h2>Expenditures</h2>
</div>
<div class="buttonsBox">
<div class="newcapex">
<a href="#" onMouseOver="swapImage('new','new2')" onMouseOut="swapImage('new','new1')"><img src="images/new1.png" class="ri" name="new" alt="new capex"></a>
</div>
<div class="capexstatus">
<a href="#" onMouseOver="swapImage('existing','existing2')" onMouseOut="swapImage('existing','existing1')"><img src="images/existing1.png" class="ri" name="existing" alt="check status" width="310px" height=$
</div>
</div>
</div>
</body>
And here's the CSS:
body {
background: url('images/bg.jpg');
background-size: 100%;
background-repeat:no-repeat;
color: #000305;
font-size: 87.5%;
font-family: Arial, 'Lucida Sans Unicode';
text-align: left;
width: 100%;
margin: 0;
padding: 0;
height: 100%;
}
.mainHeader {
width: 30%
height: auto;
margin: 2% 0 0 -1%;
}
.mainHeader img {
width: 35%;
height: 100%;
}
.textBox {
height: 275px;
margin-top: 3%;
background-image: url('images/buttonsbox.png');
background-repeat: repeat-x;
}
.text {
width: 40%;
margin-left: 5%;
float: left;
margin-top: -1%;
}
.buttonsBox {
width: 55%;
float: right;
margin-top: 50px;
}
.newcapex {
float: left;
border: 0;
margin-top: 45px;
}
.capexstatus {
margin-left: 50%;
border: 0;
margin-top: 45px;
}
.newcapex img {
width: 100%;
}
/* Text Styles */
h1 {
color: #ffffff;
font-size: 5.0em;
margin-top: 60px;
}
h2 {
color: #ffffff;
font-size: 5.0em;
margin-top:-30px;
}