Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

CSS Vertical Rule display issue

Posted on 2006-07-19
4
Medium Priority
?
1,096 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 18

Accepted Solution

by:
bruno earned 375 total points
ID: 17139817
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
ID: 17139824
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
ID: 17139854
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
ID: 17140054
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

618 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