Member Avatar for matthewl

Hi I am designing a templates for a developer and for some reason or another my left and right borders are not adjusting right to the height of the div container. you can take a peek at it to see my lovely css mistakes . Could you assit me with correcting this issue as well as make it cross platform? ;) as of now i am using firefox to view the page.

The source of the css is:

body {
  font-family:sans-serif;
  margin:0;
}
#head {
 height:100px;
  
}
#head .title {
  color: #5BCA5B;
  font-weight:bold;
  font-size:24pt;
}
#head .login {
  font-weight:bold;
  position:absolute;
  right:1em;
  top:1em;
}
#tabs {
  display:block;
  margin:0;
  padding:0;
}
#tabs ul {
  list-style-type: none;
  margin:0;
  margin-left:1em;
  padding:0;

}
#tabs ul li {
z-index:-1;
  padding:0;
  display:inline;
  
}
#tabs ul li a {
  text-decoration:none;
  font-weight:bold;
  color:#000000;
  z-index:-1;
border:10px double brown;
	-moz-border-image:url("imgs/inactive.png") 10 stretch;
	-webkit-border-image:url("imgs/inactive.png") 10 stretch;
	border-image:url("imgs/inactive.png") 10 stretch;
	border-outset:1;
	margin:0;
	padding:0;
}
#tabs ul li a span {
margin:0;
padding:0;
}
#panel-border {
margin:0;
padding:0;
}
#panel-border .tborder {
width:100%;
}
#panel-border .bborder {
width:100%;
background-image:url('imgs/bborder.png');

}
#panel-border .rborder {
width:17;
position:relative;
float:right;
height:100%;
right:0;
top:0;
bottom:0;
clear:right;
background-image:url('imgs/rborder.png');
}
#panel-border .lborder {
width:16;
position:relative;
float:left;
height:100%;
left:0;
clear:left;
background-image:url('imgs/lborder.png');
}
#panel {
}

Thanks!

Edited by matthewl because: n/a
  • 1 Contributor
  • 1 Reply
  • 110 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by matthewl

Dani AI

Generated

Short diagnosis: the side images are not matching the panel height because floated or relatively positioned side elements and height:100% often do not stretch to a dynamically sized parent. A couple of likely culprits in this layout are unitless width values (they are ignored), relying on height:100% when the parent has no explicit height, and using floats so the parent height collapses. Using a table will produce the visual result, but there are cleaner, CSS-native ways that are semantic and cross-browser friendly.

A practical solution is to let the container establish a positioning context and create the side graphics with absolutely positioned elements or pseudo-elements so they stretch from top:0 to bottom:0. This avoids depending on percentage heights and keeps the markup minimal. Example pattern:

#panel {
  position: relative;
  padding: 0 18px; /* space for side borders */
}

#panel::before,
#panel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18px;
  background-repeat: repeat-y;
}

#panel::before { left: 0; background-image: url('images/left-border.png'); }
#panel::after  { right: 0; background-image: url('images/right-border.png'); }

If the images are true border slices, border-image or multiple background layers on the container are also options (modern approach). See notes on how percent heights and positioned children behave (MDN: height percentages, positioning, and border-image).

Quick troubleshooting checklist: add temporary background colors to visualize boxes, inspect computed heights with DevTools, ensure widths have units (px/%/em), avoid negative z-index on interactive elements, and prefer top:0; bottom:0 absolute positioning for full-height side graphics. As discovered, tables will work visually, but the CSS techniques above give a more robust, accessible, and maintainable solution.

Member Avatar for matthewl

I broke down and used a table for the effect I wanted. even though it is not up to web standards.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.