SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2005
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Complicated Layout - firefox works great, IE is a mess

    Hello hello,

    So I have come here before when in need of major help getting my CSS sites to work. So far I haven't been let down. So here comes my biggest problem to date.

    Of note, I am still pretty new to CSS, so I can't look at something right away and go "oh, that's the IE float 3px jog." So any info or help you have is much appreciated.

    Here's where I am at. I have a mockup of my desired layout.

    I now have converted it over to xhtml transitional along with CSS. All my code validates. You can take a look at my current status. In firefox (and safari) everything is working so far. I have a pretty complex float setup but it is doing everything I want just fine. However, then I jumped off my Mac and tested it on IE 6 on a PC, all hell has broken loose.

    I am able to start * html'ing my way out of things, but in the end I just feel like it's dirty. Not to mention, no matter how far I get using hacks I still seem to run into problems getting my floats to work correctly in IE.

    Any ideas on what I can do to make my design work in IE and firefox?

    edit: forgot to give you guys a look at my CSS

    Code:
    /* Emotionalpunk.com - Version 5.0 - Stylesheet
    	layout.css - Site Layout and Functionality
    	coded by Bruce Clark of Fluidvision.net */ 
    	
    body {
    	margin: 0; 
    	padding: 0; 
    	background: #494A5E url(images/layout/site-tile.gif) repeat-y center; 
    	font: 11px Verdana, sans-serif; 
    	line-height: 16px; 
    	color: #000; 
    }
    
    /* Page Layout */ 
    
    /* #site-content {
    	margin-top: 0; 
    	margin-left: auto; 
    	margin-right: auto; 
    	width: 1007px; 
    } */
    
    #main-content {  
    	margin-top: 0; 
    	margin-left: auto; 
    	margin-right: auto; 
    	width: 806px; 
    }
    
    #flash-navigation { 
    	position: relative; 
    	background: #006; 
    	margin: 0 15px 0 15px; 
    	width: 776px; 
    	height: 138px; 
    }
    
    	/* Search Bar */ 
    	#search-bar { 
    		position: relative; 
    		margin: 0 15px 0 15px; 
    		height: 29px; 
    	}
    
    	#search-left { 
    		float: left;
    		background: url(images/layout/search-tile.gif) repeat-x; 
    		height: 29px; 
    		padding: 5px;  
    	}
    	
    	#search-left-end { 
    		float: left;
    		background: url(images/layout/search-left-end.gif) no-repeat; 
    		height: 29px; 
    		width: 20px; 
    	}
    
    	#search-right-end { 
    		float: right; 
    		background: url(images/layout/search-right-end.gif) no-repeat; 
    		height: 29px; 
    		width: 20px; 
    	}
    
    	#search-right { 
    		float: right;
    		background: url(images/layout/search-tile.gif) repeat-x;
    		padding: 5px;  
    		height: 29px; 
    	}
    	
    #page-content-left { 
    	position: absolute;
    	background: #F00;  
    	margin: 10px 0 0 15px; 
    	width: 178px; 
    }
    
    #page-content-right { 
    	position: relative;  
    	margin: 10px 0 0 203px; 
    	width: 588px; 
    }
    
    	/* Top Page Image */
    	#top-page-image { 
    	
    	} 
    
    	/* Page Headings */ 
    	#page-heading-left { 
    		float: left; 
    		margin: 0 0 10px 0; 
    		background: #ff0; 
    		width: 300px; 
    	}
    
    	#page-heading-right { 
    		float: left;
    		margin: 0 0 10px 0;  
    		background: #fd0; 
    		width: 288px; 
    	}
    	
    	/* Right Nav Bar */ 
    	#right-nav-bar { 
    		margin: 0 0 10px 10px; 
    		background: #fff; 
    		clear: both; 
    		float: right;
    		width: 178px;  
    	}
    
    	/* Footer */ 
    	#footer {  
    		clear: both; 
    		margin: 25px 0 0 203px; 
    		background: #046; 
    		width: 588px;
    	}

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2005
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mrsugar
    Hello hello,

    So I have come here before when in need of major help getting my CSS sites to work. So far I haven't been let down. So here comes my biggest problem to date.
    ...
    After working with my layout and doing a bit more reading on floats I have come up with a solution that is working. I am using two * html hacks to eliminate a few minor spacing and position issues between FF an IE.

    I am sure I will be running into more problems as I move along. Thanks for anyone who has looked into my problem, any input you have is still greatly appreciated.


Bookmarks

Posting Permissions

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