TalkPHP - Mysterious blank space?

TalkPHP (http://www.talkphp.com/forums.php)

- XHTML, HTML, CSS (http://www.talkphp.com/xhtml-html-css/)

- - Mysterious blank space? (http://www.talkphp.com/xhtml-html-css/4200-mysterious-blank-space.html)

Mysterious blank space?

Hey,

I'm having an issue where extra space is added to my background image.

http://i261.photobucket.com/albums/i...05/example.jpg

I don't know why, I did not set a margin or padding to the lower part.

HTML:

Code:

<div class="pollframe">

      <img src="images/pollTop.jpg" width="225" height="19" />

        <div class="content">

        Poll

        </div>

        <img src="images/pollBottom.jpg" width="225" height="3" />

      </div>

CSS

Code:

#misc .pollframe

{

  width: 225px;

  margin: 0px;

  padding: 0px;

  background: url(../images/pollFrame.jpg) repeat-y;

}



#misc .content

{

  width: 215px;

  height: 100px;

  margin: 0px 0px 0px 2px;

  padding: 20px;

  color: #5e5e5e;

  background: url(../images/pollBG.jpg) no-repeat;

}

Also, if you notice the background of pollframe continues a little further down by about 2 pixels. I don't know why as there is no space for it to continue, the DIV ends where the image is.

I removed the height in .content and this was the out come:

http://i261.photobucket.com/albums/i...andez305/2.jpg
Anyone, please? :)

Any chance you could bundle all the images, CSS and HTML into an archive so that we can have a play?

Sure

I forgot to put the images in a folder 'images' oopsy

Here, I fixed it for you:

Code:

#misc

{

  float: left;

  padding: 0px;

  margin: 0px 0px 0px 0px;

}



#misc .pollframe

{

  width: 225px;

  height: 200px;

  margin: 0px 0px 0px 0px;

  padding: 0px;

  background: url(pollFrame.jpg);

}



#misc .content

{

  width: 215px;

  margin: 0px 0px -25px 2px;

  padding: 20px;

  color: #5e5e5e;

  background: url(pollBG.jpg) no-repeat;

}

small thing..

margin: 0px 0px 0px 0px;

can just be margin:0;

and 0 is zero in any units so you don't need the px anywhere its just 0.

I just realized this looks good in FF but not IE.

In IE, if you adjust it from -25 to -14 it looks good, but then it breaks in FF....

Can the browser wars be over with already!!!?

Quote:

Originally Posted by CoryMathews (Post 23515)

small thing..

margin: 0px 0px 0px 0px;

can just be margin:0;

and 0 is zero in any units so you don't need the px anywhere its just 0.

Good tips, especially the last part!!

Thanks guys. I'm still having a small issue with the frame image. It passes over the bottom part of the image by about 2-4px. Not sure why

Quote:

Originally Posted by 9three (Post 23518)

Thanks guys. I'm still having a small issue with the frame image. It passes over the bottom part of the image by about 2-4px. Not sure why

It's the positioning. This is a mysterious issue. I spent at least an hour on it, should be more like 1 minute, but it's just one of those odd issues...

You may want to redo your CSS and DIV tags unless you need to do it exactly the way you zipped it up for us.

I'll try to show you what I mean....

And what if you do "position: absolute" to the div that contains the image for the bottom corners and stick it to the bottom.

I decided to give it a re-write as I figured it'd be quicker to do that than to try and rectify the problem. I hope this looks beautiful in all browsers!

Quote:

Originally Posted by Wildhoney (Post 23526)

I decided to give it a re-write as I figured it'd be quicker to do that than to try and rectify the problem. I hope this looks beautiful in all browsers!

Good job WH,

That looks great in both IE and FF...

EDIT: I see that you went with giving all the DIV tags ID's instead of using "class=", is there any real difference between the two?

Now that I know a little more JS, I know you can do things now with the ID attribute, but is that the only difference?

Offtopic:
The id and class attributes are two entirely different things. The former gives the element a unique identifier (it ain't an id if there are more than one of it!). The latter denotes that the element belongs to one or more classification groups. An element can have multiple classes (eg. it can be both 'fat' and 'round', to give a useless example, using class="fat round").

Quote:

Originally Posted by Salathe (Post 23528)

Thanks Salathe,

But you can give the DIV ID's all the things that you can with a class in one shot right? It's kinda like double dipping?

And I suppose if you then want to give it more properties from other classes then you can use "class="..?

Would you say that's correct?

works great wild honey thanks

I know i'm a bit late here heh but anyways thought i should add some lines. Preview images doesn't work so hopefully i'm on the right issue :D

Anyways images are inline elements, and they also take note from line-height therefore resetting the line-height would have sorted it out.

I personaly are against using images in building the design so i would go with a markup more like this, if you have to wrap it in a wrapper/container instead(depending on images) make use of the block elements that already is there, like the form tag!

Code:

<!DOCTYPE html>



<html>

<head>

        <meta http-equiv="Content-type" content="text/html; charset=utf-8">

        <title>poll</title>

        <style type="text/css" media="screen">

                @import url(default.css);

        </style>

</head>



<body>

<div id="poll">

        <h2>Poll</h2>

        <div id="innerWrapper">

                <form action="" method="post">

                        <p>What do you think to this?</p>

                        <p><input type="radio" id="entry-1" /><label for="entry-1">Is good</label></p>

                        <p><input type="radio" id="entry-2" /><label for="entry-2">Is ok</label></p>

                        <p><input type="radio" id="entry-3" /><label for="entry-3">Is bad</label></p>

                </form>

        </div>

</div>        



</body>

</html>

Before i get a reply, jupp that is the html 5 doctype, you can bitch all day but it still puts IE in standards mode :D

Edit:
Must of had a blackout :)

Code:

<!DOCTYPE html>



<html>

<head>

        <meta http-equiv="Content-type" content="text/html; charset=utf-8">

        <title>poll</title>

        <style type="text/css" media="screen">

                @import url(default.css);

        </style>

</head>



<body>

<div id="poll">

        <h2>Poll</h2>

        <form action="" method="post">

                <fieldset>

                        <p>What do you think to this?</p>

                        <p><input type="radio" id="entry-1" /><label for="entry-1">Is good</label></p>

                        <p><input type="radio" id="entry-2" /><label for="entry-2">Is ok</label></p>

                        <p><input type="radio" id="entry-3" /><label for="entry-3">Is bad</label></p>

                </fieldset>

        </form>

</div>        



</body>

</html>

There no extra wrapper... :/