• Locked
3 replies [Last post]
Fri, 2008-11-28 14:56
turco
turco's picture
Offline
Regular
Hungary
Last seen: 9 years 32 weeks ago
Hungary
Timezone: GMT+2
Joined: 2008-11-17
Posts: 28
Points: 14

Hi,

There is a small space between my header and navbar. Firefox doesnt show it but IE shows. I dont know why i have this problem, can you please advise?

styles.css

* {	margin: 0;
	padding: 0;
}
 
html {
	height: 100%;
	margin-bottom: 1px;
}
 
body { 
	font: 75% georgia, sans-serif;
	line-height: 1.88889;
	color: #555753; 
	background: #fff url(blossoms.jpg) no-repeat bottom right; 
	margin: 0; 
	padding: 0;
	text-align: center;
}
 
p { 
	margin-top: 0; 
}
 
h3 { 
	font: italic normal 1.4em georgia, sans-serif;
	letter-spacing: 1px;
	margin-bottom: 0; 
	color: #7D775C;
 
}
 
a:link { 
	font-weight: bold; 
	text-decoration: none; 
	color: white;
}
 
a:visited { 
	font-weight: bold; 
	text-decoration: none; 
	color: white;
}
 
a:hover, a:active { 
	text-decoration: underline; 
	color: Black;
}
 
acronym {
	border-bottom: none;
}
 
 
 
#container { 
	padding: 0;
	text-align: left;
	margin: 30px auto;
	width: 850px;
 
}
 
#intro { 
 
}
 
#pageHeader {
	background-color: #FFFFFF;
	height: 150px;
}
 
#navbar {
	background-color: #FF9900;
	margin-bottom: 10px;
	padding-left: 5px;
}
 
#preamble {
	position: relative;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 10px;
}
 
#image {
	margin: 20px;
	height: 240px;
	width: 320px;
	padding: 0px;
}
 
#supportingText {	
	padding-left: 10px;
	padding-right: 10px; 
	margin-bottom: 40px;
	height: 800px;
}
 
#explanation {
	margin-bottom: 5px;
	height: 125px;
}
 
#participation {
	margin-bottom: 5px;
	height: 125px;
}
 
#footer { 
	text-align: center;
	background-color: #FF9900;
 
}
#footer a:link, #footer a:visited { 
 
	}
 
 
#extraDiv1 {
	background: transparent url(cr2.gif) top left no-repeat; 
	position: absolute; 
	top: 40px; 
	right: 0; 
	width: 148px; 
	height: 110px;
}

index.html

<!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" xml:lang="en" >
<head>
	<title>Studentlife.hu</title>
 
	<script type="text/javascript"></script>
 
	<style type="text/css" media="all">
		@import "styles.css";
	</style>
 
</head>
 
 
<body>
 
<div id="container">
	<div id="intro">
		<div id="pageHeader">
			<img src="http://www.studentlife.hu/images/banner_850x150.jpg" width="850" height="150" alt="text"/>
		</div>
 
		<div id="navbar">
			<a href="http://www.studentlife.hu">Home</a> &nbsp;
			<a href="http://forum.studentlife.hu">Forum</a> &nbsp;
			<a href="http://www.studentlife.hu/reviews.html">Reviews</a> &nbsp;
			<a href="http://www.studentlife.hu/links.html">Links</a> &nbsp;
			<a href="http://www.studentlife.hu/info.html">Useful Info</a> &nbsp;
			<a href="http://www.studentlife.hu/contact.html">Contact</a> &nbsp;
 
		</div>
 
		<div id="preamble">
 
			<img src="http://www.studentlife.hu/images/hungary.small.jpg" width="850" height="150" align="left" alt="text" id="image"/>
			<h3><span>Welcome to Studentlife.hu</span></h3>
			<p class="p1"><span>Hard to be a student, right? Especially in a foreign country where people often don't speak English. It will be hard to find your way, buy your food/beverage and etc. Creation of the site came out from this idea that amount of foreign students, who are willing to spend their 1-2 semesters or even their 4 years in this country, are alot. I will try to give as much as usefull information to ease your life while you are in Hungary.</span></p>
			<p class="p2"><span>Each section you see above in the site's navigation bar will have a specific purpose. In forum, you will have the oppurtunity to find quick answers to your question. As well as discuss anything you like under each topic.</span></p>
			<p class="p3"><span>In reviews section, when i have time, i will review restaurants, fitness centers, coffee/tea houses, hotels, swimming pools and etc. where you will information like; photos, menus, prices and location.</span></p>
		</div>
	</div>
 
	<div id="supportingText">
		<div id="explanation">
			<h3></h3>
			<p class="p1"><span></span></p>
			<p class="p2"><span></span></p>
		</div>
 
		<div id="participation">
			<h3><span></span></h3>
			<p class="p1"><span></span></p>
			<p class="p2"><span></span></p>
			<p class="p3"><span></span></p>
		</div>
 
		<div id="benefits">
			<h3><span></span></h3>
			<p class="p1"><span></span></p>
		</div>
 
		<div id="footer">
			<p>Designed by akrep. Site illustrations by Eralp Ilhan</p>
 
 
		</div>
 
	</div>
 
 
</div>
 
<!-- These extra divs/spans may be used as catch-alls to add extra imagery. -->
<!-- Add a background image to each and use width and height to control sizing, place with absolute positioning -->
<div id="extraDiv1"><span></span></div><div id="extraDiv2"><span></span></div><div id="extraDiv3"><span></span></div>
<div id="extraDiv4"><span></span></div><div id="extraDiv5"><span></span></div><div id="extraDiv6"><span></span></div>
 
</body>
</html>

Top
Tags:
Fri, 2008-11-28 15:19
#1
CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 years 38 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

umm,

I changed your CSS to reflect the following:

#pageHeader {
	background: url(<a href="http://www.studentlife.hu/images/banner_850x150.jpg" rel="nofollow">http://www.studentlife.hu/images/banner_850x150.jpg</a>) no-repeat top left;
	height: 150px;
}

Then I took out the header image from the XHTML. Now the image is the background image for that div. Not sure why this fixed it, but it did on my end. Your problem was with IE6, right? It looked fine in IE7.

Top
Sat, 2008-11-29 21:12
#2
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 13 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Not tested. You might try

Not tested.

You might try img {vertical-align: bottom;}. See that mysterious gap under images for an explanation.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
Sun, 2008-11-30 02:05
#3
CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 years 38 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

parents

i changed the parent div background to green to see if the gap came from the parent. The gap the parent. {vertical-align: bottom;} might get rid of the bottom gap, but will create a gap on top since the gap is the parent.

Top
  • Locked