Gap Between Image and Div

Syody · #1 (**permalink**) Aug 18th, 2005, 21:45

My website is located at http://myrrh.namelessface.net

Note the tiny gap between the header and the content?
I cannot get rid of it. I've tried everything I can think of.

The css is remote-linked from http://myrrh.namelessface.net/style.css
The only PHP on the page is to add the CuteNews stuff.
Here's the code for the index.php page:

Code: Select all

<HTML>

<head>
<title>Rachelle's Trip Over the Pond</title>
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<link REL="stylesheet" TYPE="text/css" href="style.css">
</head>

<body>
<center>[img]pizza.gif[/img]

<div id="cn">
<?php 
$number = "5";
include('./cutenews/show_news.php'); 
?>
</div id="cn">

</center>

</body>

</HTML>

RaptorRex · #2 (**permalink**) Aug 19th, 2005, 03:00

Your code works in FireFox. The problem is actually with IE. Here is what I did:

move <div id=cn> to the top just under the body tag. That removes the break that IE puts in.

<body>
<div id="cn">
<center>[img]pizza.jpg[/img]

Now that you did this you have to re-center your page.
So then do a couple style sheet changes:

In your body style add: text-align: center;

body { font-size: 10px; font-family: verdana; padding: 0px; margin: 0px;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-arrow-color: #000000;
scrollbar-base-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #777777;
scrollbar-shadow-color: #777777;
scrollbar-track-color: #FFFFFF;
font-family: verdana; font-size: 10px;
background-color: #333333;
text-align: center;
}

In #cn {
change your margin to margin: auto;

#cn { width: 500px; border-left: 1px solid #000000; border-right: 1px solid #000000; padding: 0px; margin: auto; background-color: #FFFFFF; text-align: justify; }

You could get rid of your main <center> tag too. And you should try not to use a table for formatting but just rely on <div> tags and styles. They take a while to learn though. I still use tables too if I'm in a hurry.

Syody · #3 (**permalink**) Aug 19th, 2005, 16:49

I knew the problem was with IE. I don't have FireFox, but I've used it in the past.

The problem with placing the header image in the div is the div's borders.
The image will have double-width borders on each side.

I'll try placing both the image and CuteNews into two seperate divs.

CuteNews came all ready coded in tables. It's difficult to break them out.

Thank you for your help, Raptor.

Tim356 · #4 (**permalink**) Aug 20th, 2005, 06:07

I actually find it easier to read with that tiny space - other wise the text is way too close to the edge (even though the text is still right on the edge, having the header that little bit further away makes it seem like it's not).

RaptorRex · #5 (**permalink**) Aug 20th, 2005, 09:12

Try putting the image up top into its own div tag. I remember now that DIVs are not supposed to have vertical breaks between them, so this makes them flush.

<center><div style="background-color: #333333">

</div>

Syody · #6 (**permalink**) Aug 20th, 2005, 18:11

I tried putting the header image in its own DIV. The result was disastrouous. The DIV took over the whole page, spawning white space and spewing mis-aligned text.
I'm pretty sure I had my code right, but whatever, the site looks fine now.

Thank you, everyone, for your help.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Treating an image with <div> tags like a normal image	mikeym	Web Page Design	2	Mar 1st, 2008 15:28
[SOLVED] multiple image rollover not restoring image	snappy	JavaScript Forum	4	Nov 5th, 2007 14:38
Image gallery not displaying enlarged image	AdRock	PHP Forum	15	Sep 1st, 2006 11:31
Background image overlaping footer image at bottom of div	lw_d	Web Page Design	4	Mar 21st, 2006 00:27
how can i create a wireframe image from a solid image of som	benbacardi	Graphics and 3D	5	May 22nd, 2004 11:05

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Gap Between Image and Div