1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

Customization Help with website that looks good in FireFox but not in IE

Discussion in 'General' started by sthompson, Feb 25, 2007.

Thread Status:
Not open for further replies.
  1. sthompson

    sthompson New Member

    Hello all, I have downloaded the callofduty2.zip website and modified it pretty heavily. My website looks great in Firefox, Netscape, Opera, Galeon and Epiphany. however it looks terrible in IE. I have no clue on how to get it to view properly in IE.

    My website is at www.creativewebnet.com.
    Here is the .zip file of my site for someone to look like at to give me some help. I'm very desperate at this point and I don't know how to fix it.:mad:

    Can anyone help me out on this? Any help at all would be greatly appreciated.

    Thanks,

    Steve
     
  2. Scoooooty

    Scoooooty Member

    Hi Steve.

    Your site looked fine for me using IE 6.0
     
  3. sthompson

    sthompson New Member

    I looked at it via IE7 and a frien looked at via IE6 and the home page views fine, however, after looking at the other pages, you have to scroll down to actually see the content with the exception of the home page. Did you look at all of the pages, like the screenshots, about me, contact and any of the pages in the index located at the bottom of the home page? :confused:

    Thanks in advance,

    Steve
     
  4. lmfrench

    lmfrench New Member

    In the HTML on the secondary pages you have the following:

    **<div id="middle-template">
    <div class="post">
    <div class="postheader-template menuheader">
    <h3 style="text-align: left;">screenshots</h3>
    </div>
    <div class="postcontent-template">
    <div style="text-align: center;"></div>** (minus the stars of course)

    What it should have is:

    **<div id="middle">
    <div class="post">
    <div class="postheader">
    <h1>Screenshots</h1>
    </div>
    <div class="postcontent">**

    If you changed the html and the css to match, you should do a simple copy and paste to from the 'middle' to the 'middle-template' in order to get things to line up correctly.

    I hope this helps. :)
     
  5. sthompson

    sthompson New Member

    The HTML code that you gave me certainly moved it to the top like i wanted it to. However, the width should be 655 as in the CSS section (#middle-template) and so on. I'm new to CSS and HTML so I need a bit of hand holding here. :mad: Thanks for your help.

    Below is the CSS file for my site:


    body { margin: 0px;
    padding: 0px;
    background-image: url(images/background.gif);
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 12px;
    background-repeat: repeat-x;
    background-color: rgb(0, 0, 0);
    }

    * { margin: 0px;
    padding: 0px;
    }

    p { padding: 10px 10px 10px 20px;
    display: block;
    color: rgb(82, 87, 87);
    font-family: Arial,Helvetica,sans-serif;
    font-size: 11px;
    font-weight: bold;
    }

    a { color: rgb(107, 114, 114);
    font-family: Arial,Helvetica,sans-serif;
    font-size: 11px;
    font-weight: bold;
    }

    #container { margin: 0px auto;
    text-align: left;
    width: 860px;
    }

    #header { height: 304px;
    width: 777px;
    background-image: url(images/header.jpg);
    background-repeat: no-repeat;
    }

    #content { }

    #left { width: 192px;
    float: left;
    }

    #middle { margin-left: 206px;
    margin-right: 196px;
    width: 450px;
    }

    #right { width: 192px;
    float: right;
    }

    #middle-template { margin-left: 206px;
    margin-right: 196px;
    width: 655px;
    }

    .menuheader { width: 192px;
    height: 37px;
    background-image: url(images/menutop.gif);
    display: block;
    }

    .menucontent { width: 192px;
    background-image: url(images/menumiddle.gif);
    padding-top: 10px;
    background-repeat: repeat-y;
    }

    .menuheader h3 { padding: 10px 0px 0px 20px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 18px;
    font-weight: bold;
    }

    .menufooter { width: 192px;
    height: 15px;
    background-image: url(images/menubottom.gif);
    display: block;
    }

    .postheader, .postheader-template, .menuheader { color: rgb(204, 204, 204);
    text-transform: uppercase;
    }

    .postheader-template { background-image: url(images/posttop-template.gif);
    display: block;
    width: 655px;
    height: 31px;
    }

    .postcontent-template { padding: 20px 0px;
    background-image: url(images/postmiddle-template.gif);
    background-repeat: repeat-y;
    }

    .postfooter-template { background-image: url(images/postbottom-template.gif);
    background-repeat: no-repeat;
    display: block;
    width: 655px;
    height: 15px;
    }

    .post { margin-bottom: 15px;
    }

    .postheader { background-image: url(images/posttop.gif);
    display: block;
    width: 450px;
    height: 33px;
    }

    .postheader h1 { padding: 7px 0px 0px 20px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 18px;
    font-weight: bold;
    }

    .postcontent { padding: 20px 0px;
    background-image: url(images/postmiddle.gif);
    background-repeat: repeat-y;
    }

    .postfooter { background-image: url(images/postbottom.gif);
    background-repeat: no-repeat;
    display: block;
    width: 450px;
    height: 15px;
    }

    #header { position: relative;
    }

    #header ul { position: absolute;
    top: 250px;
    display: block;
    left: 190px;
    }

    #header ul li { border-right: 1px solid rgb(107, 114, 114);
    margin: auto;
    display: inline;
    text-align: center;
    width: auto;
    }

    .last { border-right: 0px none rgb(107, 114, 114) ! important;
    }

    #header ul li a { padding: 0px 10px;
    display: inline;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    }

    #header ul li a:hover { text-decoration: underline;
    }

    #footer { width: 850px;
    }

    #footer ul { display: block;
    margin-left: 190px;
    }

    #footer ul li { border-right: 1px solid rgb(107, 114, 114);
    margin: auto;
    display: inline;
    text-align: center;
    width: auto;
    }

    #footer ul li a { padding: 0px 10px;
    display: inline;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    }

    #footer ul li a:hover { text-decoration: underline;
    }

    #footer span { padding: 15px 0px;
    color: rgb(82, 87, 87);
    font-family: Arial,Helvetica,sans-serif;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    width: 850px;
    display: block;
    }

    .menu ul { padding: 0px 0px 0px 20px;
    list-style-position: inside;
    list-style-type: disc;
    color: rgb(102, 102, 102);
    }

    .menu ul li { padding-top: 5px;
    color: rgb(102, 102, 102);
    }

    .menu ul li a { padding: 0px;
    text-decoration: none;
    text-transform: uppercase;
    }

    .menu ul li a:hover { text-decoration: underline;
    text-transform: uppercase;
    }

    .member { display: inline;
    float: left;
    margin-left: 10px;
    }

    .member span { padding: 2px 0px 13px;
    display: block;
    text-align: center;
    text-transform: uppercase;
    }

    .member img { border: 2px solid rgb(153, 153, 153);
    width: 75px;
    height: 70px;
    }

    .clear { clear: both;
    }
     
  6. lmfrench

    lmfrench New Member

    body { margin: 0px;
    padding: 0px;
    background-image: url(images/background.gif);
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 12px;
    background-repeat: repeat-x;
    background-color: rgb(0, 0, 0);
    }

    * { margin: 0px;
    padding: 0px;
    }

    p { padding: 10px 10px 10px 20px;
    display: block;
    color: rgb(82, 87, 87);
    font-family: Arial,Helvetica,sans-serif;
    font-size: 11px;
    font-weight: bold;
    }

    a { color: rgb(107, 114, 114);
    font-family: Arial,Helvetica,sans-serif;
    font-size: 11px;
    font-weight: bold;
    }

    #container { margin: 0px auto;
    text-align: left;
    width: 860px;
    }

    #header { height: 304px;
    width: 777px;
    background-image: url(images/header.jpg);
    background-repeat: no-repeat;
    }

    #content { }

    #left { width: 192px;
    float: left;
    }

    #middle { margin-left: 206px;
    margin-right: 196px;
    width: 655px;
    }

    #right { width: 192px;
    float: right;
    }

    #middle-template { margin-left: 206px;
    margin-right: 196px;
    width: 655px;
    }

    .menuheader { width: 192px;
    height: 37px;
    background-image: url(images/menutop.gif);
    display: block;
    }

    .menucontent { width: 192px;
    background-image: url(images/menumiddle.gif);
    padding-top: 10px;
    background-repeat: repeat-y;
    }

    .menuheader h3 { padding: 10px 0px 0px 20px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 18px;
    font-weight: bold;
    }

    .menufooter { width: 192px;
    height: 15px;
    background-image: url(images/menubottom.gif);
    display: block;
    }

    .postheader, .postheader-template, .menuheader { color: rgb(204, 204, 204);
    text-transform: uppercase;
    }

    .postheader-template { background-image: url(images/posttop-template.gif);
    display: block;
    width: 655px;
    height: 31px;
    }

    .postcontent-template { padding: 20px 0px;
    background-image: url(images/postmiddle-template.gif);
    background-repeat: repeat-y;
    }

    .postfooter-template { background-image: url(images/postbottom-template.gif);
    background-repeat: no-repeat;
    display: block;
    width: 655px;
    height: 15px;
    }

    .post { margin-bottom: 15px;
    }

    .postheader { background-image: url(images/posttop.gif);
    display: block;
    width: 450px;
    height: 33px;
    }

    .postheader h1 { padding: 7px 0px 0px 20px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 18px;
    font-weight: bold;
    }

    .postcontent { padding: 20px 0px;
    background-image: url(images/postmiddle.gif);
    background-repeat: repeat-y;
    }

    .postfooter { background-image: url(images/postbottom.gif);
    background-repeat: no-repeat;
    display: block;
    width: 450px;
    height: 15px;
    }

    #header { position: relative;
    }

    #header ul { position: absolute;
    top: 250px;
    display: block;
    left: 190px;
    }

    #header ul li { border-right: 1px solid rgb(107, 114, 114);
    margin: auto;
    display: inline;
    text-align: center;
    width: auto;
    }

    .last { border-right: 0px none rgb(107, 114, 114) ! important;
    }

    #header ul li a { padding: 0px 10px;
    display: inline;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    }

    #header ul li a:hover { text-decoration: underline;
    }

    #footer { width: 850px;
    }

    #footer ul { display: block;
    margin-left: 190px;
    }

    #footer ul li { border-right: 1px solid rgb(107, 114, 114);
    margin: auto;
    display: inline;
    text-align: center;
    width: auto;
    }

    #footer ul li a { padding: 0px 10px;
    display: inline;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    }

    #footer ul li a:hover { text-decoration: underline;
    }

    #footer span { padding: 15px 0px;
    color: rgb(82, 87, 87);
    font-family: Arial,Helvetica,sans-serif;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    width: 850px;
    display: block;
    }

    .menu ul { padding: 0px 0px 0px 20px;
    list-style-position: inside;
    list-style-type: disc;
    color: rgb(102, 102, 102);
    }

    .menu ul li { padding-top: 5px;
    color: rgb(102, 102, 102);
    }

    .menu ul li a { padding: 0px;
    text-decoration: none;
    text-transform: uppercase;
    }

    .menu ul li a:hover { text-decoration: underline;
    text-transform: uppercase;
    }

    .member { display: inline;
    float: left;
    margin-left: 10px;
    }

    .member span { padding: 2px 0px 13px;
    display: block;
    text-align: center;
    text-transform: uppercase;
    }

    .member img { border: 2px solid rgb(153, 153, 153);
    width: 75px;
    height: 70px;
    }

    .clear { clear: both;
    }



    Just copy and paste this into your CSS and it should correct the problem... And you are very welcome. Let me know if you need anything else. :)
     
  7. sthompson

    sthompson New Member

    OK, I tried what you suggested by replacing the style.css and things really got scewed up. I'm at a complete loss here. Why is it that IE is scewed up but I can see it perfectly in Firefox, Opera, Epiphany and Galeon?

    I'm, using KompoZer and Bluefish on Linux but I have Windows running in a virtual Machine.

    There is a version of Kompozer for Windows and it still looks fine. I also tried to open it in Dreamweaver with no luck there either. Note that I'm not too familiar with Dreamweaver.

    I'm afraid I need more help but I don't knooow where to post the website. I tried uploading the .ZIP file in one of my posts but I can't see it.

    Is there any other help that you or someone else could offer. I could try once again to upload my website as a .ZIP file if you think it would help.

    Thank you again,

    Steve

    PS. http://www.creativewebnet.com/creative.zip
     
  8. lmfrench

    lmfrench New Member

    I am going to take a look at the zip file you sent and see if I can figure out what is going on. Once I do figure it out, I will post it here as a zip file.
     
  9. lmfrench

    lmfrench New Member

    Ok, I see exactly what the problem is...you have inserted a bunch of tables and stuff that should be done via CSS into the HTML, this is a tabless design. Everything must be put into it's place using the CSS, I will see if I can fix the problem for you on one of the pages so that you can use it as an example, but I can't fix all of them as I am on a very tight schedule today...
     
  10. lmfrench

    lmfrench New Member

    OK, I have fixed the "screenshots" page by adding some new CSS code and taking out all of the tables. I would be willing to do all of the pages for a small fee...but I cannot do them for free. I hope that from what I have done with the screenshots page though, you are able to correct the problems you were having...(it should be very simple, just add the <div id=content2> and remove all the 'middle-template' stuff as I have done in the screenshot page, and it should line up beautifully...)
     
  11. sthompson

    sthompson New Member

    Thanks lmfrench,

    But how do I download the zip file you posted? Or haven't you posted it yet?


    Thank you so much for all of your help. I can't thank you enough.

    Steve
     
  12. lmfrench

    lmfrench New Member

  13. sthompson

    sthompson New Member

    OK, I'm having way too many problems with getting the site so that it looks good in IE. If you could tell me what the fee would be to fix my site I would greatly appreciate it.

    Thanks again,

    Steve
     
  14. lmfrench

    lmfrench New Member

    Well seeing as how all of the design is done as well as most of the CSS I could do it for $100. That would get your priority as well. It would only take me about 2 full days and your site would run in both FireFox and IE7...if you decide this is something you would like to do, just PM me and I will give you my PayPal information...
     
Thread Status:
Not open for further replies.