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 Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

relative positioning issue 1

Status
Not open for further replies.
darryncooke

darryncooke

Technical User
May 6, 2009
308
US

click on about darryn cooke and you will see that i have text that is relative positioned. -230 px for the top.

problem is that it is adding a lot f extra space at the bottom before the footer. i have tried everything but when applying a negative bottom margin it just adds blank space after the footer. how do i get rid of that padding.

Darryn Cooke
| The New Orange County Graphic designer and Marketing and Advertising Consultant
| Marketing and Advertising blog
 
Sort by date Sort by votes
Well, what you are experiencing is what is supposed to happen by design. When you displace (add top/left/right/bottom values) relatively positioned elements, the element is shifted to the new position, however it still holds the space of its original position. This means that you won't be able to defeat this with your current design.

Usually it is much better to use margins to move your non-absolutely positioned elements around, but unfortunately, it does not work in your case.

However, here's something you can think about doing:

1. Absolutely position the element with the graphic (#contentbanner). Since it is not really content and it contains an image of constant size, this seems like a good solution.
2. Then your content will (by default) be over the graphic and you would simply use positive top margin to move it down, either below the graphic or overlapping part of it.
3. You will have to deal with collapsing margins on your #contentholder. I fought that by adding top padding of 1px to the element.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
i got what you are saying - except now the @#$@# text wont overlap. its z index is higher than the banner as well. at least i am seeing the same thing in IE7/8 and FF.

Darryn Cooke
| The New Orange County Graphic designer and Marketing and Advertising Consultant
| Marketing and Advertising blog
 
Upvote 0 Downvote
Z-index only works with positioned elements (absolutely or relatively) and only among siblings. You might want to check my lengthy explanation on z-index in thread215-1548875.

Adding position: relative; to #contentpages should easily fix your problems.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
now that this is solved another problem has come up that i cant get past.

#contentbanner is not displaying in IE6 and 7. I have tried everything except the solution?

why is this happening as it makes no sense to me?

Darryn Cooke
| The New Orange County Graphic designer and Marketing and Advertising Consultant
| Marketing and Advertising blog
 
Upvote 0 Downvote
When using absolute positioning, it is best to accompany it with top/left/right/bottom values. This is because absolutely positioned element without these values is placed at the current position in the code and this position might be a bit different across browsers. In your code, IE is trying to float #contentbanner next to the top of the page and it simply dissappears from the screen.

Removing the margin and adding top: 159px; and left: 0; should clear up your problem.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
nope nothing -- i have tried everything but no luck. either i just accept ie6 and 7 as not working...or i figure something else out.

Darryn Cooke
| The New Orange County Graphic designer and Marketing and Advertising Consultant
| Marketing and Advertising blog
 
Upvote 0 Downvote
i got it to work on IE6 and 7 -- i just moved that DIV to be the first one on the page.

Vragabond - thank you for your help btw, your replies are very helpful.

Darryn Cooke
| The New Orange County Graphic designer and Marketing and Advertising Consultant
| Marketing and Advertising blog
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PSchubert
  • Locked
  • Question
Data in db table cell not displayed in asp table cell -- a CSS issue?
Replies
2
Views
108
vacunita
vacunita
lupidol
  • Locked
  • Question
Positioning elements, how do I do it ?! 2
Replies
2
Views
101
vacunita
vacunita
ggriffit
  • Locked
  • Question
strange div positioning 1
Replies
9
Views
135
ggriffit
ggriffit
Blueie
  • Locked
  • Question
Positioning Twitter box? 1
Replies
7
Views
146
1DMF
1DMF
c0deM0nK424
  • Locked
  • Question
Problem with positioning Logo, Search Box and Language Bar OUTSIDE of the navbar (Bootstrap) 1
Replies
2
Views
85
c0deM0nK424
c0deM0nK424

Part and Inventory Search

Sponsor

Back
Top