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 8 of 8

Thread: Ie 7 & css

  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer Ie 7 & css

    Hi,

    I'm working on a website right now using a template found on the internet. Here is the problem I have : it's working perfectly under FF but with IE that's another story...

    Here are the links to the print screens :
    http://membres.lycos.fr/testwebmkt/klr/IE7.jpg
    http://membres.lycos.fr/testwebmkt/klr/firefox.jpg

    I have a style.css and an ie.css
    style.css is as follow :

    Code:
    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFFFFF;
    text-decoration: none;
    background-color: #bcbcbc;
    margin:0;
    padding:35px 0 0 0;
    background-image: url(../images/bg-body.gif);
    background-repeat: repeat-x;
    background-position: center top;
    }
    #main {
    width:704px;
    margin:auto;
    background-image: url(../images/bg-main-top-bottom.gif);
    background-repeat: no-repeat;
    background-position: center bottom;
    border:0;
    padding:0 0 6px 0;
    }
    #top {
    background-image: url(../images/bg-main-top-bottom.gif);
    background-repeat: no-repeat;
    background-position: center top;
    padding:6px 15px 0 14px
    }
    #logo {
    display:block;
    float:left;
    width:188px;
    border-bottom:1px solid #FFFFFF;
    }
    #slogan {
    display:block;
    float:right;
    width:466px;
    border-bottom:1px solid #FFFFFF;
    }
    #interior {
    
    background-image: url(../images/bg-interior.gif);
    background-repeat: repeat-y;
    background-position: center center;
    width:704px;
    /*height:300px;*/
    }
    #mid {
    padding:0 15px 0 14px
    }
    #left {
    display:block;
    float:left;
    width:188px;
    }
    #right {
    display:block;
    float:right;
    width:466px;
    }
    #maintext {
    display:block;
    float:right;
    width:426px;
    border-top:1px solid #FFFFFF;
    padding:15px 20px 10px 20px;
    line-height:18px;
    }
    div#navbar {
    width: 188px;
    display:block;
    float:left;
    }
    div#navbar ul {
    margin:0;
    padding:0;
    }
    div#navbar li {
    list-style-type:none;
    display:block;
    float:right;
    width:188px;
    height:35px;
    text-align:right;
    border-bottom:1px solid #FFFFFF;
    }
    div#navbar li.button1 {
    background-image: url(../images/bg-button-1.gif);
    background-repeat: no-repeat;
    }
    div#navbar li.button2 {
    background-image: url(../images/bg-button-2.gif);
    background-repeat: no-repeat;
    }
    div#navbar li.button3 {
    background-image: url(../images/bg-button-3.gif);
    background-repeat: no-repeat;
    }
    div#navbar li.button4 {
    background-image: url(../images/bg-button-4.gif);
    background-repeat: no-repeat;
    }
    div#navbar li.buttonlast {
    background-image: url(../images/bg-button-last.gif);
    background-repeat: no-repeat;
    }
    div#navbar li a {
    display:block;
    float:left;
    width:140px;
    height:35px;
    text-decoration: none;
    margin:0;
    padding:0;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight:bold;
    line-height:35px;
    padding-right:45px;
    background-image: url(../images/arrow-button.gif);
    background-repeat: no-repeat;
    }
    div#navbar li a:link {
    color: #FFFFFF;
    }
    div#navbar li a:visited {
    color: #FFFFFF;
    }
    div#navbar li a:hover {
    color: #FFFFFF;
    text-decoration:underline;
    background-image: url(../images/arrow-button-over.gif);
    background-repeat: no-repeat;
    }
    h1, h2, h3, h4, h5, h6 {
    margin: 15px 0;
    }
    h1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    font-weight:bold;
    }
    p {
    margin: 10px 0;
    }
    ul, ol {
    margin: 15px 0 0 15px;
    }
    .clear {
    clear:both;
    }
    a, a:visited {
    color:#FFFFFF;
    text-decoration:underline;
    font-weight:bold;
    }
    a:hover {
    color:#8ac1fa;
    text-decoration:none;
    }
    #footer {
    font-size: 11px;
    color:#747474;
    text-align:center;
    padding:20px;
    line-height:18px;
    }
    #footer a:link, #footer a:visited {
    color:#747474;
    text-decoration:none;
    font-weight:normal;
    }
    #footer a:hover {
    color:#747474;
    text-decoration:underline;
    }

    And then here's the code to one of the HTML page (the pb is on all of them)

    Code:
    <!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=iso-8859-1" />
    <title>About Us</title>
    <meta name="keywords" content="keyword1, keyword2, keyword3, etc..." />
    <meta name="description" content="Description of website here..." />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <!--[if IE ]>
    <link href="css/ie.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    </head>
    <body>
    <div id="main">
    <div id="interior">
    <div id="top">
    <div id="logo"></div>
    <div id="slogan">
    <div align="center"><a href="index.html"><img src="images/logo.png" alt="" width="234" height="107" /></a></div>
    </div>
    </div>
    <div class="clear"></div>
    <div id="mid">
    <div id="left">
    <div id="navbar">
    <ul>
    <li class="button1"><a href="index.html">Accueil</a></li>
    <li class="button2"><a href="partenaires.html">Nos Partenaires</a></li>
    <li class="button3"><a href="clients.html">Nos Clients</a></li>
    <li class="button4"><a href="infos.html">Plaquette</a></li>
    <li class="buttonlast"><a href="formulaire.html">Demande d'informations</a></li>
    </ul>
    </div>
    </div>
    <div id="right"><img src="images/photo-main.jpg" alt="Business Solutions" /></div>
    <div id="maintext">
    <h1>Nos Partenaires</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris est. Donec mollis. </p>
    <p>Morbi purus eros, luctus eget, scelerisque id, lobortis eu, lectus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris est. Donec mollis. Morbi purus eros, luctus eget, scelerisque id, lobortis eu, lectus. </p>
    <p align="right">&nbsp;</p>
    </div>
    </div>
    <div class="clear"></div>
    </div>
    </div>
    <div id="footer"> &copy; Apticap 2008| <a href="mailto:xxx">Contact</a><br />
    <!-- This template is provided free of charge as long as you keep the link to http://webdevelopmentquote.com -->
    <a href="http://webdevelopmentquote.com/" target="_blank" style="text-decoration:none;">Template</a> by WebDevelopmentQuote.com</div>
    </body>
    </html>

    Thanks in advance!
    Last edited by Jfish; 11-23-2008 at 01:19 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Jfish,
    I'm assuming by the caps that the problem is images are not showing up in IE...

    I pieced your code together here locally and really can't spot a problem with your images because I have no images.

    Any chance you can just set up a test url?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    That's exactly the issue

    Here is the test url :
    http://membres.lycos.fr/testwebmkt/test/index.html

    Thanks for helping

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I changed some code to work a little better...
    logo.png was actually a mis-named .jpg
    I consolodated files and got rid of all the .js and Lycos crap...

    And it still won't load the images in IE7


    Have a look here - http://nopeople.com/Jfish/


    I have to leave for a bit... will have another look at this later.
    Last edited by Excavator; 11-22-2008 at 10:31 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I can see the images just fine in IE6, 7, and 8b2.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi

    On the link you gave me it finally seems to work fine!!

    The frame just goes off on the side while clicking on a link but I think I should be able to fix that, don't bother too much

    If you can copy me the code, I'd be glad

    Thanks


    EDIT : that's weird... Now even on my link I am able to see things fine with IE7...
    Last edited by Jfish; 11-22-2008 at 11:25 PM.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Jfish View Post
    Hi

    On the link you gave me it finally seems to work fine!!
    Yeah, it's working here now too. Needed to refresh I think.

    If you want the code just save to a temp dir with
    File/Save As from IE,
    or File/Save Page As from FF.

    Or you could just Page/View Source from IE7,
    orView/Page Source (CTRL U) from FF.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So, I did a few other modifications and uploaded it on another free provider (0catch) and it's working a whole lot better excepting the ads that are everywhere but it was to test anyway...
    http://testapticap.0catch.com/

    So I think the morality here is that lycos sucks

    Thanks for your help!!


  •  

    Posting Permissions

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