TalkPHP
 
 
Account Login
Latest Articles
» The basic usage of PHPTAL, a XML/XHTML template library for PHP
» Vulnerable methods and the areas they are commonly trusted in.
» Simple way to protect a form from bot
» The Basics On: How Session Stealing Works
» How to keep your forms from double posting data
IRC Channel
IRC Speech Bubble Join the friendly bunch on IRC...
(#TalkPHP on Freenode)

...Also available via a web interface.

See this thread for information on the TalkPHP Free Hugs Initiative™. Subject to availability.
Associates
Associates
CSS Tutorials
Reply
 
LinkBack Thread Tools Search this Thread Display Modes
Old 04-28-2009, 09:22 PM   #1 (permalink)
The Contributor
 
Join Date: Oct 2008
Posts: 75
Thanks: 4
9three is on a distinguished road
Default 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? :)
9three is offline  
Reply With Quote
Old 04-28-2009, 09:32 PM   #2 (permalink)
La Vida es Sueño
Advanced Programmer Top Contributor 
 
Wildhoney's Avatar
 
Join Date: Sep 2007
Location: Oldham
Posts: 2,280
Thanks: 90
Wildhoney is on a distinguished road
Default

Any chance you could bundle all the images, CSS and HTML into an archive so that we can have a play?
__________________
The man who comes back through the Door in the Wall will never be quite the same as the man who went out.
Send a message via AIM to Wildhoney Send a message via MSN to Wildhoney Send a message via Yahoo to Wildhoney
Wildhoney is offline  
Reply With Quote
Old 04-28-2009, 09:41 PM   #3 (permalink)
The Contributor
 
Join Date: Oct 2008
Posts: 75
Thanks: 4
9three is on a distinguished road
Default

Sure

I forgot to put the images in a folder 'images' oopsy
Attached Files
File Type: rar test.rar (3.5 KB, 18 views)
9three is offline  
Reply With Quote
Old 04-28-2009, 11:26 PM   #4 (permalink)
The Gregarious
 
allworknoplay's Avatar
 
Join Date: Feb 2009
Location: New York
Posts: 645
Thanks: 64
allworknoplay is on a distinguished road
Default

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;
}
allworknoplay is offline  
Reply With Quote
Old 04-29-2009, 12:05 AM   #5 (permalink)
The Addict
 
CoryMathews's Avatar
 
Join Date: Nov 2007
Location: USA
Posts: 256
Thanks: 7
CoryMathews is on a distinguished road
Default

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.
CoryMathews is offline  
Reply With Quote
Old 04-29-2009, 12:10 AM   #6 (permalink)
The Gregarious
 
allworknoplay's Avatar
 
Join Date: Feb 2009
Location: New York
Posts: 645
Thanks: 64
allworknoplay is on a distinguished road
Default

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!!!?
allworknoplay is offline  
Reply With Quote
Old 04-29-2009, 12:11 AM   #7 (permalink)
The Gregarious
 
allworknoplay's Avatar
 
Join Date: Feb 2009
Location: New York
Posts: 645
Thanks: 64
allworknoplay is on a distinguished road
Default

Quote:
Originally Posted by CoryMathews View Post
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!!
allworknoplay is offline  
Reply With Quote
Old 04-29-2009, 01:12 AM   #8 (permalink)
The Contributor
 
Join Date: Oct 2008
Posts: 75
Thanks: 4
9three is on a distinguished road
Default

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
9three is offline  
Reply With Quote
Old 04-29-2009, 01:17 AM   #9 (permalink)
The Gregarious
 
allworknoplay's Avatar
 
Join Date: Feb 2009
Location: New York
Posts: 645
Thanks: 64
allworknoplay is on a distinguished road
Default

Quote:
Originally Posted by 9three View Post
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....
allworknoplay is offline  
Reply With Quote
Old 04-29-2009, 07:26 AM   #10 (permalink)
FSX
The Wanderer
 
FSX's Avatar
 
Join Date: Oct 2008
Posts: 15
Thanks: 0
FSX is on a distinguished road
Default

And what if you do "position: absolute" to the div that contains the image for the bottom corners and stick it to the bottom.
__________________
61924
FSX is offline  
Reply With Quote
Old 04-29-2009, 11:43 AM   #11 (permalink)
La Vida es Sueño
Advanced Programmer Top Contributor 
 
Wildhoney's Avatar
 
Join Date: Sep 2007
Location: Oldham
Posts: 2,280
Thanks: 90
Wildhoney is on a distinguished road
Default

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!
Attached Files
File Type: rar Poll.rar (3.5 KB, 28 views)
__________________
The man who comes back through the Door in the Wall will never be quite the same as the man who went out.
Send a message via AIM to Wildhoney Send a message via MSN to Wildhoney Send a message via Yahoo to Wildhoney
Wildhoney is offline  
Reply With Quote
Old 04-29-2009, 02:10 PM   #12 (permalink)
The Gregarious
 
allworknoplay's Avatar
 
Join Date: Feb 2009
Location: New York
Posts: 645
Thanks: 64
allworknoplay is on a distinguished road
Default

Quote:
Originally Posted by Wildhoney View Post
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?
allworknoplay is offline  
Reply With Quote
Old 04-29-2009, 02:58 PM   #13 (permalink)
Moderateur
RegEx Guru PHP Guru Top Contributor Advanced Programmer 
 
Salathe's Avatar
 
Join Date: Apr 2007
Posts: 1,393
Thanks: 5
Salathe is on a distinguished road
Default


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").
Salathe is offline  
Reply With Quote
Old 04-29-2009, 03:13 PM   #14 (permalink)
The Gregarious
 
allworknoplay's Avatar
 
Join Date: Feb 2009
Location: New York
Posts: 645
Thanks: 64
allworknoplay is on a distinguished road
Default

Quote:
Originally Posted by Salathe View Post

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").
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?
allworknoplay is offline  
Reply With Quote
Old 04-29-2009, 06:13 PM   #15 (permalink)
The Contributor
 
Join Date: Oct 2008
Posts: 75
Thanks: 4
9three is on a distinguished road
Default

works great wild honey thanks
9three is offline  
Reply With Quote
Old 05-27-2009, 08:53 AM   #16 (permalink)
The Contributor
 
Join Date: Nov 2008
Location: Sweden
Posts: 36
Thanks: 1
hjalmar is on a distinguished road
Default

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... :/

Last edited by hjalmar : 05-28-2009 at 02:03 PM.
hjalmar is offline  
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Checking bandwidth and hard drive space of a server Orc General 9 04-20-2009 02:21 PM
White space appearing either sie of image in firefox - displays correctly in IE almac007 XHTML, HTML, CSS 6 12-05-2008 04:07 AM
How to add blank lines satimis Absolute Beginners 3 03-14-2008 04:25 AM
Blank Page =( obolus Absolute Beginners 7 03-09-2008 12:17 AM
A space or not? Karl Absolute Beginners 12 01-07-2008 04:58 AM


All times are GMT. The time now is 05:16 PM.

 
     

Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0
Inactive Reminders By Icora Web Design