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 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Firefox to IE CSS and Div bakground issues

    Ok, so here's my problem. I have a nice little background for my left div. However, the picture itself is about 147 pixels wide, and a logo that is also in the left div is about 500 pixels across. Now, in Firefox, the website looks great. The logo flows nice into the other div, and I have no problems. However, in IE, the background tiles horizontally to match the width of my logo. So, in essence, in FF, it looks like:

    ....
    |LOGO|
    ....
    ....
    ....
    ....

    However, in IE, it looks like:
    .... .....
    |LOGO|
    .... .....
    .... .....
    .... .....
    .... .....

    I need the smaller background, otherwise all of the info I need to fit won't fit, which is a problem. Here's my CSS:

    Code:
    body {
    background: #E8E8E8;
    font: 16px Verdana, sans-serif;
    }
    
    #left {
    width: 147px;
    height: 100%;
    background: url(../Pictures/crackback.gif);
    float: left;
    margin-right: 20px;
    }
    #right {
    width: 75%;
    float: right;
    }
    a:link {color: #104E8B;
    text-decoration: none;
    background-color: transparent }
    a:visited { color: #4169E1;
    text-decoration: none;
    background-color: transparent }
    a:hover { color: #00066;
    text-decoration: underline; 
    background-color: transparent }
    a:active { color: #A9ACB6; 
    text-decoration: underline; 
    background-color: transparent }
    .title { text-align: center}
    .floaty {
    float: right;
    }
    #navlist
    {
    padding: 0 1px 1px;
    font: bold 12px Verdana, sans-serif;
    background: gray;
    width: 13em;
    }
    
    #navlist li
    {
    list-style: none;
    margin: 0;
    border-top: 1px solid gray;
    text-align: left;
    }
    
    #navlist li a
    {
    display: block;
    padding: 0.25em 0.5em 0.25em 0.8em;
    border-left: 1em solid #AAB;
    background: #CCD;
    text-decoration: none;
    }
    
    #navlist li a:link { color: #448; }
    #navlist li a:visited { color: #667; }
    #navlist li a:hover
    {
    border-color: #000066;
    color: #FFF;
    background: #4169e1;
    }
    #good {
    text-align:center;
    }
    Thanks for the help!

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Markup?

    It would help a lot if you'd supply the markup as well; a link to the page in question would be even better.
    The only background image I saw was on the element (?) with id "left"; since no repeat options were specified I see no reason why FF would not tile it in the same way IE does, but anyway. If you want to prevent the background image from tiling horizontally, add:
    Code:
    background-repeat: repeat-y;
    to your styles.

    If this does not solve your problem, supply the markup for more insight.

    Edit:
    On second thought, the reason for IE not playing nice is because it interprets "width" as "min-width"; where FF forces your left element to 147px, having the logo spill out across the right, IE stretches it up until the logo fits.
    You might want to reconsider that approach.
    Last edited by ronaldb66; 02-23-2005 at 09:28 AM.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, the website itself isn't posted yet... As soon as I can get some of this "little" stuff taken care of, then I will post it.

    So, by the markup, I assume you mean the page in question? Well, here's the code for it.

    Code:
    <html>
    <title> Marcon Inc.</title>
    <LINK TYPE="text/css" HREF="styles/Marcon.css" REL="stylesheet">
    
    <body>
    <div id="left">
    <background height= 1200px>
    <br>
    <br>
    <img src="pictures/marconLogo.gif">
    <br><br>
    <!--** START NAVSTUDIO MENU TAGS (479422) **-->
    <div id="vqp_about" style="position:absolute;visibility:hidden;">****JavaScript based drop down DHTML menu generated by NavStudio. (OpenCube Inc. - http://www.opencube.com)****</div>
    <script language="JavaScript" vqptag="doc_level_settings" vqp_datafile0="MarconMenu.js" vqp_uid0=479422>cdd__codebase = "";cdd__codebase479422 = "";</script>
    <script language="JavaScript" vqptag="datafile" src="MarconMenu.js"></script><script vqptag="placement" vqp_menuid="479422" language="JavaScript">create_menu(479422)</script>
    <!--** END NAVSTUDIO MENU TAGS **-->
    </div>
    </div>
    <div id ="content">
    <br><br>
    <br><br>
    <br><br>
    <br>
    <h1><center>Welcome to MarCon, Inc.</center></h1>
    <center>
    <img src = "pictures/index.jpg">
    </div>
    </div>
    </body>
    </html>
    I hope that helps... Please tell me if there's any other way I can help you help me. Thanks!

  • #4
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh, is there something like a "max-width" or something like that I could put in? if so, I think that could solve my problem...


  •  

    Posting Permissions

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