• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1101
  • Last Modified:

CSS Vertical Rule display issue

I've created a dashed vertical rule that has a height of 100%. If you take a look at the protoytype i set up @ [url]www.whatismyip.ie/beta/beta2.html[/url] you'll see that there is a dashed VR between the nav area and the main content, however, i have the same exact code placed to the right on the main content area and it's not displaying at all.

The CSS i'm using to create the dashed look is
<div style="border-right: 2px; color: #000000; height: 100%; witdh: 1px; padding: 0; display:block; border-style: dashed; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px;     border-right-width: 1px; ">

The code above displays the dashed VR on the left side perfectly.

If i change the height from 100%; to 500px; on the div to the right of the main area then the VR will appear with a height of 500px but if i change it the same code as featured above (use 100% instead of 500px) it doesn't display at all.

I have no idea why this is happening :confused:
  • 3
1 Solution
put a height on the table cell that contains the div, like you did for the one of the left.
btw, that's a whole lot of nested tables for a simple layout - you should be able to accomplish that in CSS without using tables.
blaadomAuthor Commented:
thanks, can't believe i missed that. I'll be converting to div's once i have the layout contrived. Thanks again
no problem - 100% for height or width on a div means 100% of it's containing element, so no height on the containing table cell means no height for the div.  :-)  glad i could help
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now