Solved

CSS Vertical Rule display issue

Posted on 2006-07-19
4
1,074 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 125 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Make options hidden and show just option that is on 1 38
Hiding Adsense on Mobile Devices 2 51
White space in figure / img 4 22
bootstrap css color change 10 25
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

730 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