www.webdeveloper.com
Results 1 to 4 of 4

Thread: Another Browser Compatibility Issue

  1. #1
    Join Date
    May 2009
    Posts
    2

    Another Browser Compatibility Issue

    I'm using CSS for my web site (which is currently haphazard) http://www.wanttobevagabond.com The site shows up and functions correctly in Firefox, but is missing images and misaligned in IE (of course). I'm guessing it has to do with a small CSS tweak, but I don't know what that tweak is. I also have some Java script in there that calls a random banner image. Any help would be greatly appreciated.
    You can view the main code at the page. The Stylesheet is below:

    -----------------
    /* CSS Document */

    html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    }
    body{
    background-color:#99CCCC;
    color:#000000;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    }

    /* Layout Divs */

    #wrapper{
    width: 790px;
    background-color:#FFFFFF;
    margin:10px auto;
    border: outset 1px solid #000000;
    text-align:left;
    }

    #banner{
    height: 150px;
    background-repeat: no-repeat;
    }

    #nav{
    border-bottom: 1px solid #000000;
    height: 26px;
    background-color:#FFFFFF;
    text-align: center;

    }


    #content p{
    margin: 10px;
    }

    #footer{
    border-top: 1px solid #000000;
    background-color: #000000;
    margin-top: 0px;

    }


    /* Font Styles */
    .contenttext {font: 12px sans-serif}
    .footertext {font: 10px sans-serif}

    /* Link Styles */
    A:link {color:blue;}
    A:visited {color: #660066;}
    A:hover {text-decoration: none; color:#00FF00;}

    /* Features */
    .feature img.floatright {
    float: right;
    padding: 0px 0px 0px 10px;
    margin: 0 0 5px 5px;
    }

    .feature img.floatleft {
    float: left;
    padding: 0px 0px 0px 10px;
    margin: 5px 5px 0 0 ;
    }

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    down.gif is missing

  3. #3
    Join Date
    May 2009
    Posts
    2
    Ok thanks, that worked, but I still have an error in IE. Every other time I load the page in IE it says, "Internet Explorer cannot load page. Operation Aborted." I've included the CSS menu code below which might be causing it???

    .chromestyle{
    width: 99%;
    font-weight: bold;
    }

    .chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    .chromestyle ul{
    border: 1px solid #BBB;
    width: 100%;
    background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
    padding: 4px 0;
    margin: 0;
    text-align: left; /*set value to "left", "center", or "right"*/
    }

    .chromestyle ul li{
    display: inline;
    }

    .chromestyle ul li a{
    color: #494949;
    padding: 4px 7px;
    margin: 0;
    text-decoration: none;
    border-right: 1px solid #DADADA;
    }

    .chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
    background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
    }

    /* ######### Style for Drop Down Menu ######### */

    .dropmenudiv{
    position:absolute;
    top: 0;
    border: 1px solid #BBB; /*THEME CHANGE HERE*/
    border-bottom-width: 0;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    background-color: white;
    width: 200px;
    visibility: hidden;
    filter: progidXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
    }


    .dropmenudiv a{
    width: auto;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
    padding: 2px 0;
    text-decoration: none;
    font-weight: bold;
    color: black;
    }

    * html .dropmenudiv a{ /*IE only hack*/
    width: 100%;
    }

    .dropmenudiv a:hover{ /*THEME CHANGE HERE*/
    background-color: #F0F0F0;
    }

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    No problems loading in IE6-8

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles