Member Avatar for kevwood

hi people back again :(

i am having an issue with my div elements lining up all nicely in ie but in chrome they second row of divs are slightly moved to the right. It is really confusing me as to why this is happening, i am not sure if it is the css or the html why this is happening.

I will post the code for both my css and the html hopefully someone has come across this before and can point me in the direction of a tutorial or something that will help me understand why this is happening.

html code

<body bgcolor="#08a2c0">
    <div id="container">
        <div id="body">
            <div id="header">
                <h4>sonic hydro</h4>
            </div>
            <div id="nav">
                <ul id="navigation">
                    <li><a href="index.html">home</a></li>
                    <li><a href="page1.html">Link1</a></li>
                    <li><a href="page2.html">Link2</a></li>
                    <li><a href="page3.html">Link3</a></li>
                    <li><a href="page4.html">Link4</a></li>
                    <li><a href="page5.html">Link5</a></li>
                    <li><a href="page6.html">Link6</a></li>
                </ul>
            </div>
            <div id="body_main">
                <div class="body_panel">
                    <h4>main body</h4>
                </div>
                <div class="body_panel">
                    <h4>main body 2</h4>
                </div>
                <div class="body_panel">
                    <h4>main body 3</h4>
                </div>
                <br />
                <div class="body_panel">
                    <h4>main body 4</h4>
                </div>
                <div class="body_panel">
                    <h4>main body 5</h4>
                </div>
                <div class="body_panel">
                    <h4>main body 6</h4>
                </div>
                <div class="clear"></div>                
            </div>
            <div id="footer">
                <h4>address</h4>
            </div>
       </div>
    </div>
</body>
</html>

css layout code

#container{
    width : 100%;
    margin-left : auto;
    margin-right : auto;
    margin-bottom : auto;
    background-color : #08a2c0;
    vertical-align : middle;
}

#body{
    width : 75%;
    margin-left : auto;
    margin-right : auto;
    background-color : #08a2c0;
    padding-top : 0;
    padding-left:0;
}

#header{
    width : 100%;
    margin-left : auto;
    margin-right : auto;
    background-color : #0F0;
    padding : 0;
    border-bottom : solid #FFF;

}

#nav{
    width : 100%;
    background-color : #60F;
    border-bottom : solid #FFF;
    text-align : center;
}

#body_main{
    width : 95%;
    margin : auto;
    background-color : #96C;
    border-left : solid #FFF;
    border-right : solid #FFF;
    text-align : center;
}

.body_panel{
    width : 25%;
    border : solid #FFF;
    margin : .1em;
    padding : .1em;
    display : inline-block;
}

.clear{
    clear : both;
}

#footer{
    width : 100%;
    background-color : #fff;
    text-align : center;
}

css styles code

#header h4{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:1em;
}

#nav h4{
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:1.5em;
}

.body_panel h4{
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size:1.25em;
}

#footer h4{
    font-family:"Lucida Console", Monaco, monospace;
    font-size:.75em;
}

                                                                                    /* NAVIGATION STYLING */

#navigation ul{
    list-style : none;
}

#navigation li{
    display : inline;
    font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size : 1.5em;
}

#navigation li a{
    display : inline-block;
    padding : .2em;
    text-decoration : none;
    font-weight : bold;
    color : #FFF;
}

#navigation a:link{
    color : #F60;
}

#navigation a:visited{
    color : #FFF;
}

#navigation a:hover{
    color : #F0C;
}

#navigation a:active{
    color:#F00;
}
  • 2 Contributors
  • 5 Replies
  • 392 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by kevwood
Member Avatar for kevwood

so i have done some reading and apparently everyone is saying that if my divs are lining up correctly in ie and not in chrome then i have done something wrong with my css. which i fnid amusing with ie being the most widely used browser you thinnk they would use the web code standards like chrome and safari do (based on my reading so far).

what i havent found amusing is that fact that i cannot come across why it is not working and how to fix the problem. I dont want to continue building the site incase i need to change the html to fix it then have to repeat the change on numerous pages.

if anyone has come across this problem before could you please point me in the direction of how you solved the problem.

Member Avatar for Violet_82

Why don't you start by removing that awful <br/> in the HTML file between the two lines?

 <div class="body_panel">
                    <h4>main body 3</h4>
                </div>
                <br />
                <div class="body_panel">
                    <h4>main body 4</h4>
                </div>

That should sort you out. Try and post back.

Edited by Violet_82
Member Avatar for kevwood

i dont even know why that was there and it has fixed it, thank you so much i have been looking at that all weekend haha.

well at least now i have learnt a little bit more about i subject i dont like to much and my pages all validate to web code standards including my css which is always nice to know.

Member Avatar for Violet_82

that's OK. I am assuming you have properly structured HTML (the one you posted is probably just an excerpt and doesn't have the opening <html> tag, no <head> etc), also make sure you have a proper doctype.

Edited by Violet_82
Member Avatar for kevwood

yeah what was posted was just the part of the code that was need. i uploaded the files to the w3c validator and they passed with flying colours. i like coding i just hate css i was never any good at that php and other scripting languages was always my thing but not done any of it for the last few years, got my own business now and decided to build a new web site for it. once i have the html site up running i can than begin to build my backend which i am much more comfortable doing (well at least i use to be anyway we will see how that goes once i get there haha).

thanks for the help with this i will surely be back with more styling issues before i am done building this part.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.