Absolute positioning problem

theniteowl · Jan 24, 2006

Hi All,
I am trying to create an outer container with a gray background that will contain text and will grow in width and size accomodating the size/style of the text.
Inside this container I am trying to absolutely position single pixels of a different color.

I have a border around the outer container. I want the colored pixel to sit on top of the border to the left and right of the container so I created two elements, one with the setting left: -1px; top: -1px; the other with right: -1px; top: -1px;

The -1 is to position the element on top of the border rather than inside it.
There seem to be two problems with this. First, I cannot get a single pixel, it always seems to insist on a minimum of two. The second is that depending on the total width in pixels the container ends up being the right placed pixel can be off by one pixel in it's placement. If the size in pixels of the container is an odd number the pixel is sitting inside the border and if it is an even number it sits on the border as it should.

Is this an IE thing? Is there a better approach?
I can accomodate two pixel height by tweaking the rest of the css but having the placement shift by one pixel is a problem.

Stamp out, eliminate and abolish redundancy!

kaht · Jan 24, 2006

Maybe try relative positioning instead of absolute? It seems to be the better tool for what you're trying to accomplish.

-kaht

How much you wanna make a bet I can throw a football over them mountains?

theniteowl · Jan 24, 2006

I have tried so many different things it's insane.
This again is my attempt at pure CSS tabs with curved edges.

The goal is to have positioned elements in the left and right corners that create the effect of curved edges and have these sitting above, inside or beside the element that will contain the text. The problem is in getting the whole group to size appropriately dependent upon the text inside rather than having fixed width or height settings.
It has turned out to be a far more difficult task than I thought it would be. I am just fumbling through the CSS though. I read up on it as I go but have not found an approach that will work 100%.
The latest approach works well except for the right positioning going wonky depending on the odd/even length of the container.

Stamp out, eliminate and abolish redundancy!

BillyRayPreachersSon · Jan 24, 2006

How odd - I've had the same issue (with the odd/even thing) in IE on two separate occasions now (with different code) and never managed to find a solution. It'd be good to find one, as it drives me crazy whenever it happens!

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

theniteowl · Jan 24, 2006

Well, here is my latest try. I have approached this SOOO many different ways and this is the closest I have come so far but this still has the pixel offset problem.
It is cobbled together from bits of what I have tried elsewhere so it is possible that there issome setting I have put in that is creating the problem but I just do not have enough CSS experience.
Going to test in FF now and see what it does.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Tabs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
body {
 margin : 10px;
 font: Verdana, Helvetica, Arial;
 padding: 0px;
 background: #008080;
}


.tab1  {
  position: relative;
  background : #fff;
  color: #000;
  border-top: 1px solid #fff;
  border-right: 1px solid #000;
  border-left: 1px solid #fff;
  float : left;
  font-size : 20px;
  font-weight : normal;
  text-decoration : none;
}

.tab1 .tab2  {
  position: relative;
  background : #ccc;
  color: #000;
  padding-right: 6px;
  padding-left: 6px;
  float : left;
  font-size : 20px;
  font-weight : normal;
  text-decoration : none;
}

.tab1 .tab2 .bl1 { 
  font-size: 1px;
  background: #008080;
  height: 5px;
  width: 1px;
  position: absolute; left: -1px; top: -1px;
}
.tab1 .tab2 .bl2 { 
  font-size: 1px;
  background: #008080;
  border-bottom: 2px solid #fff;
  height:5px;
  width:1px;
  position: absolute; left: 0px; top: -1px;
}
.tab1 .tab2 .bl3 { 
  font-size: 1px;
  background: #008080;
  border-bottom: 1px solid #fff;
  height:0px;
  width:1px;
  position: absolute; left: 1px; top: -1px;
}
.tab1 .tab2 .bl4 { 
  font-size: 1px;
  background: #008080;
  margin: none;
  padding: none;
  border-bottom: 1px solid #fff;
  height: 1px;
  width: 2px;
  position: absolute; left: 2px; top: -2px;
}

.tab1 .tab2 .br1 { 
  font-size: 1px;
  background: #008080;
  height: 5px;
  width: 1px;
  position: absolute; right: -1px; top: -1px;
}
.tab1 .tab2 .br2 { 
  font-size: 1px;
  background:#008080;
  border-top: 1px solid #008080;
  border-bottom: 2px solid #aaa;
  height:2px;
  width:1px;
  position: absolute; right: 0px; top: -1px;
}
.tab1 .tab2 .br3 { 
  font-size: 1px;
  background:#008080;
  border-bottom: 1px solid #ddd;
  height:2px;
  width:1px;
  position: absolute; right: 1px; top: -1px;
}
.tab1 .tab2 .br4 { 
  font-size: 1px;
  background:#008080;
  border-bottom: 1px solid #eee;
  height:1px;
  width:2px;
  position: absolute; right: 2px; top: -2px;
}

</style>
</head>
<body>

<div class="tab1">
  <div class="tab2">Home Menu length test
    <div class="bl1"></div>
    <div class="bl2"></div>
    <div class="bl3"></div>
    <div class="bl4"></div>
    <div class="br4"></div>
    <div class="br3"></div>
    <div class="br2"></div>
    <div class="br1"></div>
  </div>
</div>

<div class="tab1">
  <div class="tab2">Menu length test
    <div class="bl1"></div>
    <div class="bl2"></div>
    <div class="bl3"></div>
    <div class="bl4"></div>
    <div class="br4"></div>
    <div class="br3"></div>
    <div class="br2"></div>
    <div class="br1"></div>
  </div>
</div>

<div class="tab1">
  <div class="tab2">length test
    <div class="bl1"></div>
    <div class="bl2"></div>
    <div class="bl3"></div>
    <div class="bl4"></div>
    <div class="br4"></div>
    <div class="br3"></div>
    <div class="br2"></div>
    <div class="br1"></div>
  </div>
</div>

<div class="tab1">
  <div class="tab2">length testa
    <div class="bl1"></div>
    <div class="bl2"></div>
    <div class="bl3"></div>
    <div class="bl4"></div>
    <div class="br4"></div>
    <div class="br3"></div>
    <div class="br2"></div>
    <div class="br1"></div>
  </div>
</div>

</body>
</html>

Stamp out, eliminate and abolish redundancy!

Vragabond · Jan 24, 2006

Do you always use incomplete doctype? If you need to leave IE in quirks mode I suggest you'd rather put a comment above the full and valid doctype. In this case IE will remain in quirks mode but the page will have a correct doctype.

theniteowl · Jan 25, 2006

That was a leftover of code I had picked up from another site as I worked on the various approaches to this. Did not notice that it was missing a piece.
Corrected it now but the problem still remains.

What is the reason that the body of the blx and brx elements are forced to two pixels even if I set to 1?

Frustrating problem.

Stamp out, eliminate and abolish redundancy!

BillyRayPreachersSon · Jan 26, 2006

Have you tried adding "overflow:hidden" to their CSS rules?

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

theniteowl · Jan 26, 2006

Yes, it does not buy me anything.
Setting it to the containers causes the edge elements to not position where they need to be but the container itself still expands that one extra pixel in width.

It seems that the containers are generated, the edge elements placed absolute and then the font rendered which causes the boxes to resize but throws off the absolute positioned elements on the right side.

Is it possible to use relative positioned elements for the edging when you do not know what the ultimate width is going to be? I think that for relative positioning you have to specify the offset in pixels which is why I used absolute.

I have tried using elements with left and right borders that displayed in block so they formed both edges of the tab at once. But when placing these inside another container to try to allow their height to auto-adjust with the font causes the float: left to be uneffective and the tab grows to the full width of the screen unless I set a fixed width. The approach tries mixing block and inline styles which of course does not work.

I tried using the above method to put just the top of the tabs up then put the text in a container below it but cannot keep the two the same width. Still have to have a fixed width setting for the top of the tab.

I tried using vertical lines set to display inline so it would do the 5 left edge, the text, then the 5 right edge all inline but cannot get the edge pieces to 1. stay at the top and 2. allow the outside elements to have a height that goes the full height of the container so they create the borders on that side.

I have tried so many different approaches I do not remember them all now. I can make the tabs work well if they have a fixed height and width which means the font cannot be changed unless people want to go play with the height and width settings for everything else also.
The approach above works except for that odd 1px push if the total width of the container is an odd number.

Stamp out, eliminate and abolish redundancy!

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!

Absolute positioning problem

theniteowl

Programmer

kaht

Programmer

theniteowl

Programmer

BillyRayPreachersSon

Programmer

theniteowl

Programmer

Vragabond

Programmer

theniteowl

Programmer

BillyRayPreachersSon

Programmer

theniteowl

Programmer

Similar threads

Part and Inventory Search

Sponsor