The perils of table-less layouts

    Date: 11/15/05 (Web Development)    Keywords: browser, css, html, technology

    It has been decided that the site I'm working on should take up the entire browser window instead of a fixed width of 750px. As such, I've been trying to convert the thing to use percentages instead of pixel values, and I'm having some trouble getting things to line up. I would be eternally grateful if someone could help me out, details


    The small image shows the problem I'm having. The top grey bar should line up with the blue part, but I cannot get it to do so. Note that the problem is present in both IE6\win and FF\win, which leads me to believe the problem lies with my code, not with a weird browser thing. So here's the css:

    body
    {
    	font-family: arial, sans-serif;
    	font-size:.8em;
    }
    a
    {
    	font-size:1em;
    	font-weight:bold;
    }
    ul
    {
    	padding: 0px 0px 0px 0px;
    	margin: 0px 0px 0px 35px;
    }
    li
    {
    	margin-bottom: 5px;
    }
    img
    {
    	padding: 0px 0px 0px 0px;
    	margin: 0px 0px 0px 0px;
    	border:none;
    }
    div.left
    {
    	float:left;
    	width:161px;
    	
    }
    #content
    {
    	background-color:#E8EAF7;	
    	border-left:5px solid white;
    	padding:3px 0px 0px 3px;
    	line-height:130%;
    	position:absolute;
    	left:162px;
    }
    
    div#navmenu
    {
    	background:#E8EAF7 url(ncorner.gif) no-repeat bottom right;
    	list-style-type:none;
    	padding:2px 0px 5px 5px;
    	margin-bottom:5px;
    	
    
    }
    
    ul#nav
    {
    	list-style-type:none;
    	margin-left:0px;
    }
    
    ul.nodec
    {
    	list-style-type:none;
    	margin-left:20px;
    }
    
    .description
    {
    	line-height:110%;
    	font-size:1em;
    	color: #222;
    	position:relative;
    	left:5px;
    	width:90%;
    }
    .nomargin
    {
    	margin:0px 0px 0px 0px;
    }
    
    h1
    {
    	font-size:1em;
    	margin: 0px 0px 0px 0px;
    }
    h2
    {
    	font-size:.85em;
    	margin: 0px 0px 0px 0px;
    	font-weight:bold;
    }
    h3
    {
    	font-size:1em;
    	font-weight:bold;
    	margin:0px 0px 0px 0px;
    	padding:0px 0px 0px 0px;
    }
    
    #floatbreaker
    {
    	height:75px;
    	border-top: 2px solid white;
    	margin-top:3px;
    	padding:0px 0px 0px 5px;
    }
    #container
    {
    	width:100%;
    }
    .imgbottom
    {
    	position:relative;
    	margin-top:0px;
    	padding:0px 10px 0px 0px;
    	bottom:-10px;
    }
    
    div#head
    {
    	color:#fff;
    	background:#525252 url(corner.gif) no-repeat top right;
    	font-size:2em;
    	padding-left:3px;
    }
    p
    {
    	margin-top:0px;
    	margin-left:5px;
    	line-height: 130%
    }
    acronym
    {
    	border-bottom:1px dotted black;
    }
    



    And now the html

    
    
    
    
    
    	The IP Phone Services Bake-Off
    
    
    
    
    
    IP Phone Services Bakeoff

    Overview

    The IP Phone Services Bake-Off is a competition open to all ASU students interested in emerging VOIP technology. The goal of the competition is to come up with an innovative application for Cisco IP Phone technology. Your idea is totally up to you, but it should add some functionality beyond what IP Phones can already do. You may also want to read the official rules.

    Independent Study Credit

    In addition to the prizes listed below, students will be able to get independent study credit for this project. Individual professors will determine the exact requirements, so interested students should contact the appropriate professors as soon as possible.


    Prizes

    • First prize: Six week internship with Cistera Networks in Dallas, Texas
    • Second Prize: Sony Playstation Portable and $500
    • Third Prize: Sony Playstation Portable and $150

    What's Next?

    Sponsored by:

    _ W.P. Carey School of Business_ Center for Advancing Business through Information Technology_ CISCO Systems_ Cistera Networks


    Source: http://www.livejournal.com/community/webdev/269989.html

« sites opened with... || Fluid Layouts - CSS »


antivirus | apache | asp | blogging | browser | bugtracking | cms | crm | css | database | ebay | ecommerce | google | hosting | html | java | jsp | linux | microsoft | mysql | offshore | offshoring | oscommerce | php | postgresql | programming | rss | security | seo | shopping | software | spam | spyware | sql | technology | templates | tracker | virus | web | xml | yahoo | home