Solved

CSS Vertical Rule display issue

Posted on 2006-07-19
4
1,059 Views
Last Modified: 2012-06-27
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:
0
Comment
Question by:blaadom
  • 3
4 Comments
 
LVL 18

Accepted Solution

by:
bruno earned 125 total points
Comment Utility
put a height on the table cell that contains the div, like you did for the one of the left.
0
 
LVL 18

Expert Comment

by:bruno
Comment Utility
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.
0
 

Author Comment

by:blaadom
Comment Utility
thanks, can't believe i missed that. I'll be converting to div's once i have the layout contrived. Thanks again
0
 
LVL 18

Expert Comment

by:bruno
Comment Utility
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
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now