Google
HTML Tutorial


 Forum HomeForum Home   FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
RegisterRegister - Not registered yet? Got something to say? Join HTML Code Tutorial!
Blank space below image header in IE
Post new topic   Reply to topic    HTML Help Forum Index -> CSS
View previous topic :: View next topic  
Author Message
Jezzabel



Joined: 25 Apr 2008
Posts: 4
PostPosted: Fri Apr 25, 2008 8:20 pm     Blank space below image header in IE Reply with quote
Hey

I having a very strange problem where there is a white space apearing below my header when I view it in internet explorer, it works just fine when viewed in Firefox.

I have been over and over the code and have found no problems, I have also Validated it with out any issue.

Does anyone have an idea why it might be doing this and how I might stop it?

The code I have used is below:

In css file:

#container{
width:800px;
overflow:visible;
margin:0 auto;
background-color:#fcfcfc;
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#000000;
font-size:1em;
}

In HTML file:

<div id="banner">
<img src="images/banner.png" width="800" height="130" alt="Property specialists (qld)" />
</div>

Thanks in advance for anyone who can help me.. I am really starting to pull my hair out over this.
sticks464



Joined: 31 Dec 2006
Posts: 993
PostPosted: Fri Apr 25, 2008 9:13 pm     Reply with quote
The container style has nothing to do with the banner div and what it displays. Without seeing all your code or a live link I am just guessing, but give this a try.
Change;
Code:
<div id="banner">
<img src="images/banner.png" alt="Property specialists (qld)" />
</div>


Add to styles
Code:
* {
margin:0;
padding:0;
}
#banner {
width:100%;
height::130px;
overflow:hidden;
}


The * style sets the browser defaults to 0 and is much better than using margin and padding 0 in the body style. It may also mess up some of the code that does not have margin and padding applied that should have.
Jezzabel



Joined: 25 Apr 2008
Posts: 4
PostPosted: Fri Apr 25, 2008 9:33 pm     Reply with quote
ooops I meant to post Embarassed

#banner{
height:auto;
padding:0 0 0 0;
border:none;
}

for the css part...

Thanks for the quick reply sticks but that didn't solve the promlem either.. would it help if I posted the whole code for both pages?
sticks464



Joined: 31 Dec 2006
Posts: 993
PostPosted: Fri Apr 25, 2008 10:14 pm     Reply with quote
Only need code for 1 page and the css
Jezzabel



Joined: 25 Apr 2008
Posts: 4
PostPosted: Fri Apr 25, 2008 10:36 pm     Reply with quote
Ok here is the css page

Code:
/* CSS Document */

/*text formatting*/

p{
    margin: 8px 0 6px 0;
}

u{
   margin-left:220px;
   font-size:0.9em;
   text-align:center;
   text-decoration:none;
}

u.two{
   margin-left:267px;
   font-size:0.9em;
   text-align:center;
   text-decoration:none;
}

u.three{
   margin-left:267px;
   font-size:0.9em;
   text-align:center;
   text-decoration:none;
}

u.four{
   margin-left:157px;
   font-size:0.9em;
   text-align:center;
   text-decoration:none;
}

u.five{
   margin-left:203px;
   font-size:0.9em;
   text-align:center;
   text-decoration:none;
}

u.six{
   margin-left:230px;
   font-size:0.9em;
   text-align:center;
   text-decoration:none;
}

/*page layout*/

body{
   background:#e4e4e4;
   border:none;
   padding:0;
   margin:0 0 0 0;
}

#container{
   width:800px;
   overflow:visible;
   margin:0 auto;
   background-color:#fcfcfc;
   font-family:Geneva, Arial, Helvetica, sans-serif;
   color:#000000;
   font-size:1em;
}

#banner{
   display:block;
   bottom:0px;
   height:auto;
   padding:0 0 0 0;
   border:none;
}
   
#filler{
   height:auto;
   padding:0 0 0 0;
   float:left;
   border:none;

}
   
#filler2{
   height:auto;
   padding:0 0 0 0;
   float:left;
   border:none;
}

#side{
   height:auto;
   padding:0 0 0 0;
   float:right;
   border:none;
}

/* home button*/
#home a{
   float:left;
   display:block;
   color:#FFFFFF;
   text-decoration: none;
   text-align:center;
   background:url(images/test.jpg) 0 0 repeat;
   width: 60px;
   height:41px;
   padding: 0 3px 0 0;
}
#home a:hover {
   color:#99cc33;
   text-decoration:none
}
#home a:active {
   color:#99cc33;
   text-decoration:none
}
/* company profile button*/
#company a{
   float:left;
   display:block;
   color:#FFFFFF;
   text-decoration: none;
   text-align:center;
   background:url(images/test.jpg) 0 0 repeat;
   width: 130px;
   height:41px;
   padding: 0 3px 0 0;
}
#company a:hover {
   color:#99cc33;
   text-decoration:none
}
#company a:active {
   color:#99cc33;
   text-decoration:none
}

/* selling your development site button*/
#selling a{
   float:left;
   display:block;
   color:#FFFFFF;
   text-decoration: none;
   text-align:center;
   background:url(images/test.jpg) 0 0 repeat;
   width: 235px;
   height:41px;
   padding: 0 3px 0 0;
}
#selling a:hover {
   color:#99cc33;
   text-decoration:none
}
#selling a:active {
   color:#99cc33;
   text-decoration:none
}
   
/* homesites for sale button*/
#homesites a{
   float:left;
   display:block;
   color:#FFFFFF;
   text-decoration: none;
   text-align:center;
   background:url(images/test.jpg) 0 0 repeat;
   width: 135px;
   height:41px;
   padding: 0 3px 0 0;
}
#homesites a:hover {
   color:#99cc33;
   text-decoration:none
}
#homesites a:active {
   color:#99cc33;
   text-decoration:none
}

#curve{
   height:auto;
   padding:0;
   float:left;
}
   
/* contact us button*/
#contact a{
   float:left;
   display:block;
   color:#FFFFFF;
   text-decoration: none;
   text-align:center;
   background:url(images/blue.jpg) 0 0 repeat;
   width: 81px;
   height:41px;
   padding: 0 3px 0 0;
}
#contact a:hover {
   color:#99cc33;
   text-decoration:none
}
#contact a:active {
   color:#99cc33;
   text-decoration:none
}

/*links button*/
#links a{
   float:left;
   display:block;
   color:#FFFFFF;
   text-decoration: none;
   text-align:center;
   background:url(images/blue.jpg) 0 0 repeat;
   width: 53px;
   height:41px;
   padding: 0 3px 0 6px;
}
#links a:hover {
   color:#99cc33;
   text-decoration:none
}
#links a:active {
   color:#99cc33;
   text-decoration:none
}

#text{
   display:block;
   float:right;
   width:605px;
   padding:10px 0 0 5px;
   color:#000000;
   font-size:0.8em;
   }

#details{
   float:left;
   width:600px;
   padding:20px 0 0 5px;
   color:#000000;
   font-size:0.9em;
}
   
#line{
   float:left;
   width:auto;
   padding:5px 0 5px 0;
}

#line2{
   float:left;
   width:auto;
   padding:5px 0 5px 0;
}

#line3{
   float:left;
   width:auto;
   padding:5px 0 5px 0;
}

#line4{
   float:left;
   width:auto;
   padding:5px 0 5px 0;
}

#line5{
   float:left;
   width:auto;
   padding:5px 0 5px 0;
}

#line6{
   float:left;
   width:auto;
   padding:5px 0 5px 0;
}

#image{
   float:left;
   width:auto;
   border:none;
   padding:5px 0 0 75px;
}

#footer {
   clear:both;
   text-align:center;
   height:16px;
   margin:0 0 0 0;
   font-size:0.6em;
}


And here is one page

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="Property Specialists (Qld), Property, Specialists, Brisbane land, estates, selling land, selling your development,"/>
<meta name="description" content="Property Specialist (Qld)" />
<meta name="Aurthor" content="Simone Castan for East Coast Web Design" />
<title>Property Specialist (qld)</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
   
   <div id="banner">
   <img src="images/banner.png" alt="Property specialists (qld)" />   
   </div>
   
<div id="filler">
<img src="images/filler.jpg" width="41" height="41" alt="curve" />
</div>
   
<div id="home">
<a href="index.html">Home</a>
</div>

   <div id="company">
   <a href="company.html">Company Profile</a>
   </div>
   
<div id="selling">
<a href="selling.html">Selling Your Development Site</a>
</div>
   
   <div id="homesites">
   <a href="homesites.html">Homesites for Sale</a>
   </div>
   
<div id="curve">
<img src="images/curve.jpg" alt="filler" width="12" height="41" />
</div>   
   
   <div id="contact">
   <a href="contact.html">Contact Us</a>
   </div>

<div id="links">
<a href="links.html">Links</a>
</div>

   <div id="filler2">
   <img src="images/blue.jpg" width="29" height="41" alt="filler" />
   </div>
   
<div id="side">
<img src="images/sidebar.gif" width="184" height="427" alt="Phone 3396 5800" />
</div>

   <div id="image">
   <img src="images/image.png" width="480" height="427" alt="Property Specialists (qld)" />
   </div>

<div id="footer">
<p>Designed and created by Simone Castan, For East Coast Web Design.</p>
</div>

</div>
</body>
</html>
Straystudio



Joined: 14 Apr 2008
Posts: 238
Location: Nord Italy
PostPosted: Fri Apr 25, 2008 10:53 pm     Reply with quote
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


And also, this :

<div id="banner"><img
src="images/banner.png" alt="Property specialists (qld)" />
</div>

in place of :

<div id="banner">
<img src="images/banner.png" alt="Property specialists (qld)" />
</div>
 
Jezzabel



Joined: 25 Apr 2008
Posts: 4
PostPosted: Sat Apr 26, 2008 1:17 am     Reply with quote
I just solved the problem... I don't know why it did this as this is the same method I use with all my code but instead of this

Code:
<div id="banner">
   <img src="images/banner.png"  width="800" height="130" alt="Property specialists (qld)" />   
   </div>


I used
Code:
<div id="banner">
   <img src="images/banner.png"  width="800" height="130" alt="Property specialists (qld)" /></div>


so just having the end div tag on the same line as everything thing else has fixed my problem..

Thanks to everyone who helped!
Display posts from previous:   
Post new topic   Reply to topic    HTML Help Forum Index -> CSS All times are GMT - 8 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group
HTML Help topic RSS feed 
 
HOSTING / DESIGN
$1.99 Domain Registration
Cheap Web Hosting
Website Templates
MAKE MONEY
Sell Domain Names
Sell Website Templates

Home   |   Tutorials   |   Forum   |   Quick List   |   Link Directory   |   About
Copyright ©1997-2002 Idocs and ©2002-2007 HTML Code Tutorial