Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE/Firefox display problems

    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>

  • #2
    New Coder
    Join Date
    May 2012
    Posts
    17
    Thanks
    0
    Thanked 1 Time in 1 Post
    1. the "content" youre referring to is the images? make sure your path references are correct. try using relative paths such as

    Code:
    <img src="MINExpo 2012/Mining Landing Page/grid.jpg" />
    instead of

    Code:
    <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
    Code:
    <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.
    Freelance Web Developer | Web Hosting
    Web Development, Hosting, Graphic Design, SEO

  • #3
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #5
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •