Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Absolute Positioning Pushing Content

Status
Not open for further replies.
braves07

braves07

Technical User
Apr 24, 2007
40
US
I'm trying to absolute position a background image inside a #div redcircle. The problem I'm having is when I position it at top: 0 left 0 it is pushing the background image in my #div top down about 30px; (In Firefox, IE7 displays correct) Here is my code, any help would be appreciated.

Code: 
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color:#333333;
margin: 0px;
padding: 0px;
}

#container {
width: 720px;
height: auto;
margin: 0px auto;
background-color: #FFFFFF;
color: #000000;
overflow: hidden;
position: relative;
}

#top {
width: 720px;
height: 185px;
background-image: url(images/black_bg1.gif);
background-repeat: repeat;
margin: 0px;
padding: 0px;
}

#redcircle {
position: absolute; top: 0px; left: 0px;
height: 185px;
width: 359px;
background-image: url(images/red_circle.png);
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}

h1 {
color: #FFFFFF;
text-align: right;
margin-right: 20px;
}

h2 {
color: #FFFFFF;
margin: 20px 5px 10px 5px;
font-size: 22px;
}

Code: 
<body>
	
	<div id="container">
	
		<div id="top">
			<h1>Company Name</h1>
		</div>
		
		<div id="redcircle">
			<h2>Point 1</h2>
			<h2>Point 2</h2>
			<h2>Point 3</h2>
		</div>
	
	</div>
	
</body>

Thanks again for your time.

braves07
 
Sort by date Sort by votes
Just a guess, but using the following should sort this out...

Code: 
#top {
width: 720px;
height: 185px;
[s]background-image: url(images/black_bg1.gif);
background-repeat: repeat;[/s]
[!]background: url(images/black_bg1.gif) top left repeat;[/!]
margin: 0px;
padding: 0px;
}

#redcircle {
position: absolute; top: 0px; left: 0px;
height: 185px;
width: 359px;
[s]background-image: url(images/red_circle.png);
background-repeat: no-repeat;[/s]
[!]background: url(images/red_circle.png) top left no-repeat;[/!]
margin: 0px;
padding: 0px;
}

Let us know how you go!

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Upvote 0 Downvote
Try it without headings inside the divs. It might be that default margins working together with collapsing margins could be what is troubling you.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
I had tried changing margins on my h1 earlier w/o any luck, however I added additional information, went back and tried 1 more time to change margins and padding in my h1 and it worked perfect. Thanks for your replies I'm definately going to take your thoughts into consideration with further development.

thanks

braves07
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Krus1972
  • Locked
  • Question
Centering Content Within a Fixed Navigation Menu
Replies
10
Views
164
ChrisHirst
ChrisHirst
lupidol
  • Locked
  • Question
Positioning elements, how do I do it ?! 2
Replies
2
Views
80
vacunita
vacunita
ggriffit
  • Locked
  • Question
strange div positioning 1
Replies
9
Views
98
ggriffit
ggriffit
dvannoy
  • Locked
  • Question
Center a div within an asp.net content placeholder 1
Replies
1
Views
260
vacunita
vacunita
Blueie
  • Locked
  • Question
Positioning Twitter box? 1
Replies
7
Views
103
1DMF
1DMF

Part and Inventory Search

Sponsor

Back
Top