Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Cross browser problem lining up div elements

Options
  • 25-04-2007 9:05pm
    #1
    Registered Users Posts: 360 ✭✭


    Hi,

    I am developing a website and as a test browser I was (stupidly?) just using firefox to make sure everything looked ok when rendered, unfortunately I have run into a little problem , on firefox my elements all line up great, on safari and opera (and probably also IE) they do not ,

    Here is the code that seems to be the problem, its a pillar with a pattern on it running down the page that is suppose to attach to a footer with the same pattern, '#bottom' is the footer pattern div, and '#bottom_mid' is just a small section of pattern that lines up with the bottom of the pillar.

    Is there a way to fix this so it renders consistently in all browsers?
    #pillar {
    	height: 578px;
    	width: 50px;
    	background-image: url(../images/pillar2.jpg);
    	background-repeat: repeat-y;
    }
    
    #bottom {
    	clear: both;
    	height: 30px;
    	background:  url(../images/bottomofpage3.jpg) repeat-x ;
    }
    
    #bottom_mid {
    	margin: 0px 0 0px 128px;
    	width:33px;
    	height: 30px;
    	background-image: url(../images/bottomofpagemid.jpg);
    	background-repeat: repeat-x;
    }
    

    Attached are grabs of the rendered page section in firefox, opera and safari
    Thanks


Comments

  • Registered Users Posts: 2,031 ✭✭✭colm_c


    Developing in FireFox - good.

    Only relying on those 3 browsers - bad.

    You need to be testing on a windows machine either a test machine or a virtual one, as IE has some 'issues' that need to be seen to be understood and solved.

    As for the lining up - The issue is to do with how different browsers interpret slightly different font sizes, and so adjusting the bottom.

    It also looks like you're still thinking in tables, you need to think outside the box (literally).

    Easiest way to do this is to use a 'faux' column instead of a real one, to do this add a background image to the background of the div surrounding those 2 columns, and the image should allow tiling vertically.

    So something like:

    HTML:
    [HTML]
    <div id="surround">
    <div id="column-a">column a content</div>
    <div id="column-b">column b content</div>
    </div>
    [/HTML]

    CSS:
    [HTML]
    #surround {
    width: 200px;
    float: left;
    background: url(my_tile.gif) repeat-x top left;
    }

    #column-a {
    width: 190px;
    float: left;
    }

    #column-b {
    width: 190px;
    float: right;
    }

    [/HTML]

    That should do it...


Advertisement