CSS Absolute Positioning

  • CXLink
  • Expert
  • Expert
  • User avatar
  • Posts: 685
  • Loc: ATL-GA

Post 3+ Months Ago

I have a problem with the logo in the top right hand corner not extending all the way to the edge of the page because the page scrolls. I still have a little more styling to do but I have it set to 0 on the right. Any suggestions? This is only the second time I have played with absolute so I am not exactly sure how to fix it.

http://www.push-here.com/

Thanks in advance.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

I believe the problem is occuring from the padding on "#navcontainer li" and "#navcontainer a".

Because of the way the box-model works, even though you've specified a width, the padding is creating space around the elements. Your logo is positioning itself as if the page didn't have this extra space.

In my test, removing the padding from these elements also eliminated the horizontal scroll bar.

Of course, you'll want that negative space in those elements back. Unfortunately, I don't have a suggestion at the moment - I have to go read bedtime stories.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Okay, here's my quick solution...
Code: [ Select ]
#navcontainer{}
#navcontainer ul{margin:0;padding:0;list-style-type:none;font:Verdana, Arial, Helvetica, sans-serif;font-size:12px;}
#navcontainer li{width:130px;padding:0;margin:8px 0 0 0;}
#navcontainer a{display:block;padding:3px;background-color:#444;}
  1. #navcontainer{}
  2. #navcontainer ul{margin:0;padding:0;list-style-type:none;font:Verdana, Arial, Helvetica, sans-serif;font-size:12px;}
  3. #navcontainer li{width:130px;padding:0;margin:8px 0 0 0;}
  4. #navcontainer a{display:block;padding:3px;background-color:#444;}


You won't like the mouse interaction in IE6 and I don't have a Mac to test on either.
  • CXLink
  • Expert
  • Expert
  • User avatar
  • Posts: 685
  • Loc: ATL-GA

Post 3+ Months Ago

Yup yup the li were too long. That was driving me a bit crazy. Thanks.

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: expedien_123 and 42 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.