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 6 of 6
  1. #1
    New Coder
    Join Date
    Oct 2011
    Location
    Essex, England
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Help for Newbie with alignment of divs across all browers

    Hi

    I'm used to coding in HTML but I've just created a new website on WordPress (I've attempted to make my own theme!!) and am having a little alignment issue with the CSS across different browsers.

    It views perfectly on FireFox on the Mac, but when viewed in IE on Windows the main content box and the sidebar box overlap in the middle. On Firefox for Windows the boxes are miles apart, and on an OS device they majorly overlap. Isn't there something else I can do to make it look at least remotely similar across all browsers?

    Web page is http://jamieflynnbase.com/blog/

    CSS I currently have is as follows:
    Code:
    a/*
    Theme Name: sandboxkid
    Theme URI: http://www.plaintxt.org/themes/sandbox
    Description: Child Theme for Sandbox
    Author: JoJoField
    Author URI: http://www.jojofield.com
    Template: sandbox
    Version: 0.1
    */
     
    @import url("/sandbox/style.css");
    
    html, body {
    
            background: url(/images/background.jpg) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
    
    height: 100%;
        font-family: "Trebuchet MS", Helvetica, sans-serif;
        font-size: 13px;
        color: #FFCC33; 
        line-height:1.4em; /* 16*1.4=18 */
    }
    
    h1, h2, h3 {
    	font-weight: normal;
    	color: #FFCC33;
    }
    
    a:link {
    	color: #FFCC33;
    }
    
    a:hover {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    
    a:visited {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    
    div#container {
    float:left;
    margin:0 -490px 0 0;
    width:100%;
    }
    
    div#content {
    float: left;
    width: 490px;
    min-height: 100%;
    background-color:rgba(0,45,80,0.8);
    margin: 0 0 0 170px;
    border: 30px solid rgb(0,45,80);
        border: 30px solid rgba(0,45,80,0.8);
        -webkit-background-clip: padding-box; /* for Safari */
        background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
    border-radius:25px;
    }
    * html #container {
    height: 100%;
    }
    
    div#containernosidebar {
    float:left;
    margin:0 -490px 0 0;
    width:100%;
    }
    
    div#contentnosidebar {
    float: left;
    width: 860px;
    min-height: 100%;
    background-color:rgba(0,45,80,0.8);
    margin: 0 0 0 170px;
    border: 30px solid rgb(0,45,80);
        border: 30px solid rgba(0,45,80,0.8);
        -webkit-background-clip: padding-box; /* for Safari */
        background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
    border-radius:25px;
    }
    * html #container {
    height: 100%;
    }
    
    div.sidebar {
    float:right;
    overflow:hidden;
    width:225px;
    min-height: 100%;
    background-color:rgba(0,45,80,0.8);
    margin: 0 175px 0 30px;
    text-align: center;
    border: 30px solid rgb(0,45,80);
        border: 30px solid rgba(0,45,80,0.8);
        -webkit-background-clip: padding-box; /* for Safari */
        background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
    border-radius:25px;
    }
    * html #container {
    height: 100%;
    }
    
    
    div#footer {
    clear:both;
    width:100%;
    height:100%
    font-size: 12px;
    color: #FFFFFF; 
    }

  • #2
    New Coder
    Join Date
    Aug 2012
    Location
    Kalamazoo, MI
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It views perfectly in IE for me. What version of IE are you using?
    EDIT: Works in Firefox too.

    And are your links on the right supposed to be very un-aligned?

    Sorry for the size, I just did it real quick.

    Last edited by TylerB; 08-01-2012 at 01:41 AM.

  • #3
    New Coder
    Join Date
    Oct 2011
    Location
    Essex, England
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi TylerB
    It was IE9 I was looking at it in and the main content box and the sidebar are overlapping, and it's even worse on my iPhone

  • #4
    New Coder
    Join Date
    Aug 2012
    Location
    Kalamazoo, MI
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Very weird, I too was viewing it in IE9. Try using percentages for the widths and margins.

  • #5
    New Coder
    Join Date
    Oct 2011
    Location
    Essex, England
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    How very strange! Okay I'll try giving percentages a go and see what happens! Thanks TylerB!

    Also, can you see on the screengrab you took that below the top menu bar and left aligned there is a transparent box that has a slight border to it? This only displays in IE and not in FireFox and I cannot work out what it is to get rid of it It then seems to prevent selection of the items at the bottom of the longer dropdown items from the menu.

    Do you have any idea what this is and how I can remove it please?

    Thanks

  • #6
    New Coder
    Join Date
    Oct 2011
    Location
    Essex, England
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok I've managed to remove the weird header and have sorted some of the alignment issues I was having but am now trying to get to grips with using percentages instead of padding so that I don't have the overlapping issues in some versions of IE and on OS devices.

    I've been doing a lot of googling and just wanted to check I'm on the right wavelength here:

    To have two floating boxes as I do currently I will need to set up 5 columns in my page. Columns 1, 3 an 5 just containing empty space or a transparent gif or something similar and columns 2 and 4 containing my content. Would that be correct or is there a far simpler way that I'm missing?

    Many thanks


  •  

    Tags for this Thread

    Posting Permissions

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