Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

0

Margin

Started by iPsyko, Nov 27 2005 04:37 PM

You cannot reply to this topic
Go to first unread post

2 replies to this topic

#1 iPsyko

Young Padawan

Members
53 posts

Posted 27 November 2005 - 04:37 PM

Hey,

I have a problem. I am making an image viewer, but the heder for the viewer isn't stretching all the way accross. It seems to have margins, but i have gotten rid of all margins in my CSS stylesheet. Here is the CSS code:

#viewertop {
	background-color: #FFFFFF;
	background-image: url(images/viewer_top.jpg);
	background-repeat: repeat-x;
	color: #FFFFFF;
	font-weight: bold;
	height: 150px;
	margin-left: 0px;
	margin-bottom: 20px;
	position: relative;
	margin-top: 0px;
	width: 100%;
	left: 0px;
	top: 0px;
}

Here is a link to the Viewer. HERE. Thanks.

Back to top

#2 rc69

PHP Master PD

P2L Staff
3,827 posts

Gender:Male
Location:Here
Interests:Web Development

Posted 27 November 2005 - 06:45 PM

You're right, #viewertop has no margins... it's filling 100% of it's little box.
But it's the element above it that has the margins.

<style type="text/css">
html, body { margin:0; }
</style>

Adding that in your <head> area should fix the problem.

p.s. 2 things you need to know.
1. If you want to position an element using the "relative" attribute then top, bottom, left, and right need to be something besides 0, or nothing will happen...

2. Use shorthand...

#viewertop {
   background: #FFFFFF url(images/viewer_top.jpg) repeat-x;
	color: #FFFFFF;
	font-weight: bold;
	height: 150px;
	margin: 0 0 20px;
	width: 100%;
}

Edited by rc69, 27 November 2005 - 06:49 PM.