...
PDA

IE/Firefox display problems

CSquared
08-06-2012, 08:22 PM
I apologize in advance for the lack of a website to load to. I am creating this website for the company I work for and I am creating it locally only and once it's complete we will send to IT in order for them to upload to the website. I do not have access to the server in order to push files so I can't test on a site level. At any rate...

I have a single CSS that basically just houses a background image. Very simple website with 4 sections. The background is showing up on both IE and FF but the content is not displaying on IE, just the background. Also, I need the page to minimize correctly when window is resized as well (i.e., still show both black vertical sections when window is resized). The resizing is also working on FF but not IE. I've ran the browser compatibility on DW and removed all of the issues that it said IE would have a problem with. Cleared cache, etc, etc and I'm stumped.

Below is the CSS code and the HTML. Do I need to add anything to make it work for IE?

CSS

@charset "utf-8";

body {
color: #000;
background-image: url(../../mk065294/My%20Documents/Mining%20Landing%20page-d.jpg);
position: absolute;
top: 0px;
left: 0;
background-repeat: repeat-x;
font-family: Tahoma, Geneva, sans-serif;
margin-left: 150px;
margin-right: 35px;
margin-bottom: 900px;
overflow: auto;
}


a:visited {
color: #4E5869;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}

/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
width: 627px;
background: white;
margin-left: 150px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
z-index: 2;
}

.content {
padding: 0;
width: 100%;
}


HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2012 Mine Expo</title>
<link href="MineExpo.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
margin-left: 0px;
margin-right: 0px;
}
</style>
</head>

<body background="file:///D|/Documents and Settings/mk065294/My Documents/Mining Landing page-d.jpg">

<div style="top: 206px; left: 196px; position: absolute; width: 749px; height: 630px; z-index:-1;">
<img src="file:///K|/Marketing_Private/DESK TOP PUBLISHING - ( MK04 Creative)/MINExpo 2012/Mining Landing Page/grid.jpg" width="722" height="630" hspace="0" vspace="0" align="top"/>
</a>
</div>
<div style="top: 251px; left: 289px; position: absolute; width: 215px; height: 31px; font-size: 16px; font-family: Tahoma, Geneva, sans-serif;"><b>Mining Industry Support</b>
</div>
<div style="top: 305px; left: 290px; position: absolute; width: 204px; height: 179px;">
<a href="MiningIndustrySupport.html"><img src="file:///K|/Marketing_Private/DESK TOP PUBLISHING - ( MK04 Creative)/MINExpo 2012/Mining Landing Page/product grid.jpg" alt="Mining Industry Support" width="199" height="177" hspace="0" vspace="0" longdesc="MiningIndustrySupport.html" /></a>

</div>
<div style="top: 251px; left: 603px; position: absolute; width: 229px; height: 31px; font-size: 16px; font-family: Tahoma, Geneva, sans-serif;"><b>Strategic Branch Locations</b>
</div>
<div style="top: 302px; left: 610px; position: absolute; width: 203px; height: 191px;">
<a href="BranchLocations.html">
<img src="file:///K|/Marketing_Private/DESK TOP PUBLISHING - ( MK04 Creative)/MINExpo 2012/Mining Landing Page/Grey map.jpg" width="199" height="185" alt="Grey Map" /></a>
</div>
</div>
<div style="top: 550px; left: 322px; position: absolute; width: 140px; height: 31px; font-size: 16px; font-family: Tahoma, Geneva, sans-serif;"><b>Motion Services</b>
</div>
<div style="top: 593px; left: 301px; position: absolute; width: 186px; height: 170px;">
<a href="http://www.motionindustries.com/motion3/jsp/mii/en/services/index.html" target="_new"><img src="file:///K|/Marketing_Private/DESK TOP PUBLISHING - ( MK04 Creative)/MINExpo 2012/Mining Landing Page/Motion Services.jpg" alt="Motion Services" width="179" height="166" /></a>
</div>

<div style="top: 550px; left: 576px; position: absolute; width: 272px; height: 31px; font-size: 16px; font-family: Tahoma, Geneva, sans-serif;"><b>Cost Savings and Success Stories</b>
</div>
<div style="top: 593px; left: 612px; position: absolute; width: 185px; height: 173px;">
<a href="SuccessStories.html"><img src="file:///K|/Marketing_Private/DESK TOP PUBLISHING - ( MK04 Creative)/MINExpo 2012/Mining Landing Page/Cost Savings.jpg" alt="Success Stories" width="179" height="166" hspace="0" vspace="0" longdesc="SuccessStories.html" /></a>
</div>

</body>
</html>
BuildMyWeb
08-06-2012, 08:37 PM
1. the "content" youre referring to is the images? make sure your path references are correct. try using relative paths such as

<img src="MINExpo 2012/Mining Landing Page/grid.jpg" />

instead of

<img src="file:///K|/Marketing_Private/DESK TOP PUBLISHING - ( MK04 Creative)/MINExpo 2012/Mining Landing Page/grid.jpg" />

2. clean up your CSS. looks like you are using an external CSS sheet. make sure the <link href="MineExpo.css" rel="stylesheet" type="text/css" /> is pathed correctly. and then put all of your CSS there. relocate all of your inline and the head CSS to this sheet.
CSquared
08-06-2012, 09:06 PM
Yes, the "content" I refer to is the images which correctly link and go to the respective child pages. The paths are correct as when I preview in the browser via DW, it shows up correctly in Firefox. When I preview in IE, only the background image shows up (from the CSS) though, none of the HTML code is coming through.
CSquared
08-06-2012, 09:23 PM
I think I got it corrected. In the CSS, I had the line

Overflow: Auto;

I removed that and the content is showing up in both FF and IE.

Now for the resizing window issue in IE. If I downsize the browser window to half-size, I need the page to downsize as well. It is automatically doing so in FF but in IE, it is cutting off half of the page. It displays correct if the window is full size. How do I get the page and it's contents to shift when the the window is downsized?
CSquared
08-08-2012, 03:23 PM
Bump to first page. I still am not able to figure out the resizing issue in IE 8.

Does anyone know of a fix? When I resize my window in IE, the page content isn't resizing with the window and as a result, I can't see most of my page content. It's working fine on Firefox though.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum