• I have two problems with my pages rendering in IE, and I can’t seem to figure them out:

    They concern this page:
    https://theimaginaryboy.com/

    1. (The easy one?) In IE, the content area/page heading is way closer to the website title than in Firefox. Does anyone know a hack to make the page render the same in each browser?

    2. You might have noticed that IE does not display my menu, but Firefox does. I have no idea why this is happening. Ideas?

    Here is the contents of my 2c-l.css:

    /*
    LAYOUT: Two-Column (Left)
    DESCRIPTION: Two-column fluid layout with one sidebars left of content
    */
    div#container {
    float:right;
    margin:0 0 0 -200px;
    width:100%;
    height:100%;
    }
    
    div#content {
    margin:75px 0px 0px 215px;
    width: 465px;
    }
    
    div.sidebar {
    position:absolute;
    top:100px;
    left:55px;
    overflow:hidden;
    width:180px;
    }
    
    div#secondary {
    clear:left;
    }
    
    div#footer {
    clear:both;
    width:100%;
    }

    Here is the contents of my style.css:

    /*
    THEME NAME: Sandbox
    THEME URI: https://www.plaintxt.org/themes/sandbox/
    DESCRIPTION: Rich with powerful and dynamic semantic class selectors, Sandbox is a canvas for CSS artists
    VERSION: 1.6.1
    AUTHOR: <a href="https://andy.wordpress.com/">Andy Skelton</a> & <a href="https://www.plaintxt.org/">Scott Allan Wallick</a>
    AUTHOR URI:
    TAGS: white, microformats, fixed-width, flexible-width, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar
    */
    
    /* Two-column with sidebar on left from the /examples/ folder  */
    @import url('examples/2c-l.css');
    
    /* Just some example content */
    
    body
    {
    background-image:url(/good-version.jpg);
    margin:0;
    padding:0;
    }
    
    div.skip-link {
    position:absolute;
    right:1em;
    top:1em;
    }
    
    div#teststyle {
    list-style-type:none;
    }
    
    A:link {
    text-decoration: none;
    color: #7F7400;
    	}
    A:visited {
    text-decoration: none;
    color: #7F7400;
    }
    A:active {
    text-decoration: none;
    color: #348A00;
    	}
    A:hover {
    text-decoration: none;
    color: #348A00;
    
    	}
    
    div#menu ul,div#menu ul ul {
    line-height:1;
    list-style:none;
    margin:0;
    padding:0;
    }
    
    div#menu ul a {
    display:block;
    margin-right:1em;
    padding:0.2em 0.5em;
    text-decoration:none;
    }
    
    div#menu ul ul ul a {
    font-style:italic;
    }
    
    div#menu ul li ul {
    left:-999em;
    position:absolute;
    }
    
    div#menu ul li:hover ul {
    left:auto;
    }
    
    .entry-title,.entry-meta {
    clear:both;
    }
    
    div#container,div#primary {
    margin-top:2em;
    }
    
    form#commentform .form-label {
    margin:1em 0 0;
    }
    
    form#commentform span.required {
    background:#fff;
    color:#c30;
    }
    
    form#commentform,form#commentform p {
    padding:0;
    }
    
    input#author,input#email,input#url,textarea#comment {
    padding:0.2em;
    }
    
    div.comments ol li {
    margin:0 0 3.5em;
    }
    
    textarea#comment {
    height:13em;
    margin:0 0 0.5em;
    overflow:auto;
    width:66%;
    }
    
    .alignright,img.alignright{
    float:right;
    margin:1em 0 0 1em;
    }
    
    .alignleft,img.alignleft{
    float:left;
    margin:1em 1em 0 0;
    }
    
    .aligncenter,img.aligncenter{
    display:block;
    margin:1em auto;
    text-align:center;
    }
    
    div.gallery {
    clear:both;
    height:180px;
    margin:1em 0;
    width:100%;
    }
    
    p.wp-caption-text{
    font-style:italic;
    }
    
    div.gallery dl{
    margin:1em auto;
    overflow:hidden;
    text-align:center;
    }
    
    div.gallery dl.gallery-columns-1 {
    width:100%;
    }
    
    div.gallery dl.gallery-columns-2 {
    width:49%;
    }
    
    div.gallery dl.gallery-columns-3 {
    width:33%;
    }
    
    div.gallery dl.gallery-columns-4 {
    width:24%;
    }
    
    div.gallery dl.gallery-columns-5 {
    width:19%;
    }
    
    div#nav-above {
    margin-bottom:1em;
    }
    
    div#nav-below {
    margin-top:1em;
    }
    
    div#nav-images {
    height:150px;
    margin:1em 0;
    }
    
    div.navigation {
    height:1.25em;
    }
    
    div.navigation div.nav-next {
    float:right;
    text-align:right;
    }
    
    div.sidebar h3 {
    font-size:1.2em;
    }
    
    div.sidebar input#s {
    width:7em;
    }
    
    div.sidebar li {
    list-style:none;
    margin:0 0 2em;
    line-height:25px;
    }
    
    div.sidebar li form {
    margin:0.2em 0 0;
    padding:0;
    }
    
    div.sidebar ul ul {
    margin:0 0 0 1em;
    }
    
    div.sidebar ul ul li {
    list-style:none;
    margin:0;
    }
    
    div.sidebar ul ul ul {
    margin:0 0 0 0.5em;
    }
    
    div.sidebar ul ul ul li {
    list-style:circle;
    }
    
    div#menu ul li,div.gallery dl,div.navigation div.nav-previous {
    float:left;
    }
    
    div#header,div#footer {
    text-align:left;
    }
    
    input#author,input#email,input#url,div.navigation div {
    width:50%;
    }
    
    div.gallery *,div.sidebar div,div.sidebar h3,div.sidebar ul {
    margin:0;
    padding:0;
    }

    Many thanks in advance.

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘IE display issues’ is closed to new replies.