5 replies [Last post]
RogueTiger
Offline
newbie
Last seen: 16 years 26 weeks ago
Joined: 2006-03-30
Posts: 3
Points: 0

Well, like many others, I am new to CSS and trying to sort through this. I realize FF is better to design in, yet somehow, I've gotten the layout to work in IE, but wind up with these odd white spaces above and below my floats in FF and Opera.

I came seeking the wisdom you guys can provide! I've posted my code below and the HTML is on the webpage www.nuclearchicken.net.

Any help would be much appreciated! Thank you guys so much (in advance - this has been driving me nuts)

/* CSS Document */
body{
	background-color:#4C5844;
	color:#666666;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	font-size: 100%; 
	text-align: center;
}
/*------------- wrap-------------*/
#wrapper{
	position: relative;
	width: 780px;
	background-color:#FFFFFF;
	margin:0px auto;
	border: 1px solid #666666;
	text-align: left;
	white-space:inherit;
	overflow: hidden;
}
/*------------- header-------------*/
#header{
	height: 140px;
	background-repeat: no-repeat;
	
}
/*------------- placeholder-------------*/
#placeholder {
	height: 6px;
	width: 780px;
	color: #333333;
	background-color: #333333;
	border-bottom: 0px solid;
	border-bottom-color: #FFFFFF;
}
/*------------- navigation-------------*/

#nav ul{
	float: left;
	width: 780px;
	margin-left: 0;
	padding: 0;
	list-style: none;
	text-align: center;
	font-size: 80%;
	background-image:  url("../navbarimages/nav-bar.jpg");
	color: #FFFFFF;
	background-color: #333333;
	}
#nav li {
	float: left;
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline;
	}
#nav ul li a {
	float: left;
	text-decoration: none;
	border-bottom: none;
	color: #FFFFFF;
	margin-left: 10px;
	padding: 8px 10px 8px 10px;
	text-align: center;
	}
#nav ul li a:hover, #nav ul li a:active{
	background-color: #000000;
	background-image:  url("../navbarimages/nav-bar_hover.jpg");
}

#uberlink a:link, #uberlink a:visited,
#uberlink a:hover, #uberlink a:active {
background-color: #000000;
	background-image:  url("../navbarimages/nav-bar_hover.jpg");
background-repeat: no-repeat;

}

/*-------------title-------------*/
#title{
	width: 780 px;
	height: 120px;
	background-repeat: no-repeat;
	background-image: url(../Titles/home.jpg);
	}
/*-------------tabs-------------*/

#tabs ul {
	font-size: 80%;
	margin-top: 98px;
	margin-left: 2px;
	text-align: left;
	
 }

 #tabs ul li {
	display: inline;
	padding: 0px;
	margin: 0px;
	
	
 }
#tabs ul li a {
	display: inline;
	color: #FFFFFF;
	text-decoration: none;
	padding: 2px 10px 5px 10px;
	border-right-color: #FFFFFF;
	border-bottom-color: #666633;
	border-left-color: #FFFFFF;
	border-top-color: #FFFFFF;
	text-align: left;
	background-color: #9F7A55;
	
	}

#tabs ul li a:hover, #tabs ul li a:active{
 	border-bottom: 1px solid #A84637;
	background-color: #A84637;
}

#minilink a:link, #minilink a:visited,
#minilink a:hover, #minilink a:active {
background-color: #A84637;

}

/*-------------Main Content-------------*/
#main-body {
	float: left;
	width: 780px;
	font-size: 80%;
	margin: 0;
	overflow: visible;
	
	}
	
#main-text-block {
	float: left;
	margin-left: 10px;
	padding: 5px;
	width: 66%;
	border: 1px solid #CCCC99;
	color:#000000;
	
	}
	
#right-float1 {
	float: left;
	margin-right: 10px;
	margin-left: 10px;
	padding: 5px;
	width: 25%;
	border: 1px solid #CCCC99;
	color:#000000;
	
	
	}
	
#right-float2 {
	float: right;
	margin-right: 8px;
	margin-top: 10px;
	padding: 5px;
	width: 25%;
	border: 1px solid #CCCC99;
	color: #000000;
	}
	
.h1 {
	font-size: 100%;
	font-weight: strong;
	text-align: center;
	color: #000000;
	}
	
.p {
	font-size: 80%;
	color: #000000;
	}

.p link {
	color: #000000;
	}
	

/*-------------Movie Content-------------*/	
.movie-bite {
	width: 65%;
	margin-left: 10px;
	border: 1px solid #CCCC99;
	}
	
.movie-bite p {
	font-size: 80%;
	}

.movie-bite link a {
	font size: 100%;
	color: #66CCFF
	}

.movie-bite link a:hover {
	font size: 100%;
	color:#6600FF
	}

.movie-bite link a:visited {	
	font size: 100%;
	color: #660099
	}
	
/*-------------Clear-------------*/	
.clearit {
	clear:both;
	}
	
/*-------------Footer-------------*/

#footer1 {
	margin-top: 20px;
	border-top: 1px solid #000000;
	color: #FFFFFF;
	background-color: #000;
	clear:both;
	
	}
	
#footer2 {
	background-color:#000000;
	clear: both;
	}

#footer2 p {
	text-align: center;
	padding: 0;
	color: #FFFFFF;
	font-size: 80%;
	background-color: #000000;
	
	}
	
/*-------------footer nav-------------*/

#footer-nav ul{
	float: left;
	width: 780px;
	margin-left: 0;
	padding: 0;
	list-style: none;
	text-align: center;
	font-size: 80%;
	background-image:  url("../navbarimages/nav-bar.jpg");
	color: #FFFFFF;
	background-color: #333333;
	}
#footer-nav li {
	float: left;
	margin: 0;
	padding: 0;
	}
#footer-nav ul li a {
	float: left;
	text-decoration: none;
	color: #FFFFFF;
	text-align: center;
	padding: 8px 20px 8px 20px;
	}
#footer-nav ul li a:hover {
	text-decoration: underline;	
	}

drhowarddrfine
Offline
Leader
Last seen: 12 years 43 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

[Solved] Display Discrepancies

Quote:
I realize FF is better to design in, yet somehow, I've gotten the layout to work in IE, but wind up with these odd white spaces above and below my floats in FF and Opera.
Endless loop.

xhtml is case sensitive. You should use lower case in your tags.

Which floats. All of them?

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

RogueTiger
Offline
newbie
Last seen: 16 years 26 weeks ago
Joined: 2006-03-30
Posts: 3
Points: 0

[Solved] Display Discrepancies

Good point on xhtml - I will update that, thanks!

The Nav Bar float (the same code witha different name serves as the Nav at the top, and the footer at the bottom).

It looks as if the spaces are below each of the floats:

1 under the header, 1 under the Nav bar....the body of the page seems ok, 1 under the footer Nav bar and 1 under the Copyright footer.

RogueTiger
Offline
newbie
Last seen: 16 years 26 weeks ago
Joined: 2006-03-30
Posts: 3
Points: 0

[Solved] Display Discrepancies

Guys, thanks for your help with this, the problem has been solved!

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 5 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

[Solved] Display Discrepancies

Awesome, thanks for letting us know Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 32 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Re: [Solved] Display Discrepancies

RogueTiger wrote:
Well, like many others, I am new to CSS and trying to sort through this. I realize FF is better to design in, yet somehow, I've gotten the layout to work in IE, but wind up with these odd white spaces above and below my floats in FF and Opera.

I came seeking the wisdom you guys can provide!

Don't test your design in IE until *after* you have it working in FF.

You didn't need to post the CSS. A correct link to the page provides anyone with FF and the Web Developer extension to look and and even edit your CSS.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.