xfezz Posted August 10, 2006 Share Posted August 10, 2006 Hello all I am having a bit of a problem with div and float placement that I have been messing around with trying to get to work for quite some time. Its gotten to a point where it has frustrated me enough to ask for help. I pretty much made a simple layout and spiced it up a bit. I dont have it on a live site, just a local server that I have set up so the best I can offer is an explaination with screenshots and code. Firefox displays my layout how I wish it to display seen here:[url=http://img.photobucket.com/albums/v487/xfezz/firefox.jpg]http://img.photobucket.com/albums/v487/xfezz/firefox.jpg[/url]But when viewed in IE WIN 6 this is what is displayed:[url=http://img.photobucket.com/albums/v487/xfezz/ie.jpg]http://img.photobucket.com/albums/v487/xfezz/ie.jpg[/url]The first thing you notice is the top half of my content and all of my nav section is being blocked. I presume IE doesnt like the way I have my float and margins set up. The top 250px of my layout is infact a background image that can be viewed here:[url=http://img.photobucket.com/albums/v487/xfezz/main_bg.gif]http://img.photobucket.com/albums/v487/xfezz/main_bg.gif[/url]The reason why I went this route is because of IE's poor support of png images. (mostly had problems with how the overlap of drop shadow and the top header looked with the background) So I made my main content and nav div have a negative margin value to push it up to the top of the page. And the container background image repeat-y when the content flows down.Second, in IE you notice that my footer is pushed down further than in firefox. And this is something that I dont wish to happen. <<html code>>[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Portfolio X</title><style type="text/css"><!----></style><link href="files/structure.css" rel="stylesheet" type="text/css"/></head><body><div id="top"> <p id="header">home link here <span>web & graphic design portfolio</span></p></div><div id="container"> <div id="content"> <p>*****SAMPLE TEXT****TYRE, Lebanon....</p> </div> <div id="nav"> <ul> <li id="one"><a href="#">about</a></li> <li id="two"><a href="#">portfolio</a></li> <li id="three"><a href="#">forums</a></li> <li id="four"><a href="#">contact</a></li> </ul> </div> <div id="footer"> <p>footer</p> </div></div></body></html>[/code]<< css >>[code]/*BEGIN BODY STRUCTURE*/html { margin: 0; padding: 0;}body { margin: 0; padding: 0; font-size: 12px; font-family: Tahoma, Arial, Helvetica, sans-serif; background: #e3e3e3 url('../images/main_bg.gif') no-repeat;}a:link,a:active,a:visited { color: #000; text-decoration: none;}a:hover { color: #444242;}p { margin: 0; padding: 0 10px;}/*END BODY STRUCTURE*//*BEGIN HEADER*/#top { height:54px; width:598px; margin: 50px 0 0 168px; color: #FFF;}#header { font-weight: bold; margin: 0; padding: 19px 20px; }#header span { border-left: #FFF solid 1px; font-weight:normal; margin: 15px; padding: 12px 15px;}/*END HEADER*//*BEGIN CONTAINER FOR MAIN CONTENT*/#container { width: 620px; margin: 135px 0 0 157px; padding: 10px 0 0 0; background:url('../images/contain_bg.gif') repeat-y;}/*END CONTAINER FOR MAIN CONTENT*//*BEGIN CONTENT*/#content { float:left; margin-top: -135px; width: 465px; padding-left: 10px; border-right: #000 1px solid;}/*END CONTENT*//*BEGIN NAV*/#nav { float:right; margin-top: -125px; width: 130px;}#nav ul { margin: 0; padding: 0; list-style:none;}#nav ul li { margin-top:3px; padding: 0; text-align: left;}#nav ul li a { margin: 0;}/*BEGIN FOOTER*/#footer { clear:both; margin: 0; padding: 10px 10px; color: #FFF; background: transparent url('../images/footer_bg.gif') bottom left no-repeat;}#footer p { margin: 0; padding: 17px 20px; background: #454545; border: #FFF 1px solid;}/*END FOOTER*/[/code]I would like to get this issue resolved or at least have someone point me in the right direction. Who knows maybe my css or the way my layout is set up isnt up to standards. I would presume how I have my div's positioned isnt how it should be done but I thought it was the easiest way to go about it. Quote Link to comment https://forums.phpfreaks.com/topic/17098-div-position-float-problems-in-ie/ Share on other sites More sharing options...
killerb Posted August 10, 2006 Share Posted August 10, 2006 Why the big bg image? It looks like a perfect candidate for CSS styling.Might I suggest that you make a repeat-x loop of the top bar only (the diagonal lines), and slice it carefully so it is recurring. Like this:[code]body{background:#e3e3e3 url('../images/main_bg.gif') repeat-x top left;}[/code]then <div id="main">. This should be the container for everything, by the look of this design:[code]#main{border:solid 1px white; background:#FFFFFF;color:#333333;padding:0;margin:60px 180px;}[/code]You now nest the other divs inside it. Notice I dont use padding until the actual text elements? because margins are easier to use, and more specific.[code]#header,#footer{background:#333344;height:60px;}[/code]Now, to lay out the page:[code]<div id="main"> <div id="header"> <div class="left third">home link here</div> <div class="two_thirds">web and graphic design portfolio</div> </div> <div id="rightCol"><p>Right Col</p></div> <div id="mainContent"><p>Main Content</p></div> <div id="footer">Footer</div></div>[/code]And to style the page:[code].third{width:33.33%}.two_thirds{width:66.66%}.left{float:left}.clear{clear:both;}#header .left{border-right:solid 1px white;margin:8px;}#header .two_thirds{margin:8px;}#right-col{width:80px;position:absolute;margin:0;right:0;}#mainContent{margin-right:80px;}p{padding:8px;}[/code]See my .left, .third, .clear classes? There is an example of how you can define styles and use them in your HTML. You might have classes like .w80, .w120, .w180, .w220 for example, then when doing a form, you can use them to style as you go:[code]<form><fieldset><legend>Welcome! - Please Log In</legend> <input type=text name=email class=w220><br / <input type=text name=pass class=w120><br / <input type=submit value="Go >>" class=w60><br /</fieldset></form>[/code]There is a tidy system, and being a system, you can apply the same SS to any new site as you develop, then tweak it later.Mainly, I want to say dont use padding until the very last element, it limits control of positioning. Reduce your image use, there is no point mucking round with images, the bandwidth, load delay, and the restrictions it places. Especially in a case like this when the styling can be done perfectly well with simple CSS.I notice your drop-shadow on the main. You will want to use [url=http://freewebs.com/good-code]Custom borders with CSS[/url] Quote Link to comment https://forums.phpfreaks.com/topic/17098-div-position-float-problems-in-ie/#findComment-72326 Share on other sites More sharing options...
xfezz Posted August 10, 2006 Author Share Posted August 10, 2006 hmm thanks for the info ill work with this and see how it goes Quote Link to comment https://forums.phpfreaks.com/topic/17098-div-position-float-problems-in-ie/#findComment-72733 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.