CSS - Mozilla Does Not Print My Vertical Lines

Normally when I want to vertically align some text to the middle of a div I use

line-height: 40px; and vertical-align: middle;

However that only seems to work on single lines of text because with multiple lines of text the line height of each line means there is a large gap between the text rather than centreing the whole lot vertically. How do I get around this?

I thought something like the following would work but it doesn't.

<div style="line-height: 60px; vertical-align: middle;">
<span style="line-height: normal;">line1<br />line 2</span></div>

A number of years ago I created a web site for a mattress store where I worked (7 days a week, for 5 years). The point is this: I'm not a great web designer. The code is ancient and the owner wants me to bring the thing up to date. Using tables, I had a system for creating thin, vertical lines that went up and down the entire heighth of the page. The lines divided the content area from the borders in a neat way - although, again, using very old HTML. It looks like this:
http://www.wholesalewarehouseinc.com
What I'd found was that if I used a fixed-sized header and some tables I could produces the thin line that you see on that page. This was the basic code:
Code:

<table width=100% height=100% cellpadding=0 cellspacing=0 topmargin=0 leftmargin=0 rightmargin=0>

<td background="http://www.wholesalewarehouseinc.com/lf.gif" width=50% align=left><td width="1" background="dot.png">
<img src="dot.png"></td>
</td><td valign=top>
<table cellpadding=0 cellspacing=0 border=0 rightmargin=0 leftmargin=0 bottommargin=0>
<img src="logo.png"></td>
<td background="http://www.wholesalewarehouseinc.com/lf.gif" width=100% align=left><td width="1" background="dot.png">
<img src="dot.png"></td>
</table>

My question is this, and maybe this is too general for a meaningful answer. Is there a way to do the same sort of thing with CSS?

I have a vertical menu on the left-hand side of my website, everything appears correctly when the page is first loaded but when I click on a menu item the entire div appears to shift to the left (10px). If I refresh the page it also appears correctly, so it is only when I have clicked on a menu item.

I do know that there are plenty of problems with IE, but the menu does appear and function correctly in both IE and Opera. I am only having the problem with Mozilla.

I am thinking that it may be something to do with the link visited properties but am not sure what.

I have validated the css via the W3C website but there were no errors reported.

The css segment is as follows:

#subnavcontainer {
position: absolute;
left: 10px;
top: 0px;
margin-top:0px;
padding-top: 0px;
height: 700px;
width: 160px;
background: url("../images/bg_vert.gif") no-repeat;
}

#subnavcontainer ul
{
list-style-type: none;
color: #000;
margin-top: 0px;
margin-left: 0px;
padding-left: 0px;
padding-top: 0px;
font-family: Arial, Helvetica, sans-serif;
display: block;
width: 200px;
background-color: #D7D7D7;
}

#subnavcontainer li
{
padding-left: 0px;
margin-top: 1px;
}

#subnavcontainer ul li {
margin: 0 0 1px 0;
padding-left: 0px;
}

#subnavcontainer ul a
{
display: block;
padding: 0px 2px 2px 5px;
width: 160px;
color: #000;
background-color: #F0EFEE;
text-decoration: none;
border-left: 4px solid #B09292;
}

#subnavcontainer ul a:hover
{
color: #000;
background-color: #fff;
text-decoration: none;
border-left: 4px solid #FF0000;
}

The html segment is as follows:

<div id="subnavcontainer">
<ul>
<li>
<a href="../content/company/se_company_overview.htm" target="mainFrame">Overview</a>
</li>
<li>
<a href="../content/company/se_company_location.htm" target="mainFrame">Location</a>
</li>
<li>
<a href="../content/company/se_company_contact.htm" target="mainFrame">Contact</a>
</li>
</ul>
</div>

We're having a weird problem with a print stylesheet - a little bit of the javascript menu appear on the printed over the top of the content.

eg: (http://www.lawhandbook.sa.gov.au/ch10.php ) - Print Preview this page and you will see "Chapters A-Z" in the middle.
This seems to happen in all browsers.


We've looked into many css solutions to the issue - but to no avail - we cant make the damn thing disappear.
One long winded solution is to change the stylesheet to be built dynamically - so a call to ch10.php=true would build the page differently.
But this seems to defeat the purpose of using a print stylesheet in the first place.
Another long winded soltuion is to change the (Rather old) menu script - but that not really an option in this case either.

So my question is - What happens when a browser prints a page?
Does it send anything back to the server indicating it is loading the print stylesheet instead? (eg: Some sort of request variable)
Or does the client's browser simple request the CSS file and reformat the page it has already downloaded?

If so I could detect this event with PHP or Javascript to not load the offending menus when the print css had been loaded

Hi,

Does anyone know how to veritcally align text using CSS? like <tr valign='middle'> when using tables.

My page is on:
http://www.3003online.com/demos/ecoceylon/v2/

You can see a difference in the "Home - About Us - Products - Contact Us" links when viewing from IE and Mozilla Firefox.

Basically, I would like the text to be centered vertically in the bar... but CSS by default puts it on top. I tried adding padding,which helped in IE... but Firefox still shows the links a bit higher than they should be.,... any ideas how to fix this?


Also, a different problem in case anyone knows how to fix it... you can see a small brown bar on the top bar. It is 50px in height. But I have no idea how to make its width as wide as the remainder of the page (this would change with different resolutions).

The main content of the page is 760px wide. I would like a brown box next to that, which is 50px in height and the remainder width. Any ideas? "width: auto;" doesn't work unfortunately

[ this is a follow up to my previous thread
http://forums.devshed.com/showthread.php?t=270438

Any help would be greatly appreciated.

Thanks very much.

I have pages the when viewed for print in Firefox, show the page going below the page margin and not continuing to the next logical printed page.

This image below, shows better than I can explain. Has anyone ever seen this before?...Any ideas how to make it preview and print correctly?

Hi guys .... I've been all over google looking for the answer and nothing I've tried works. I'm trying to make a print-friendly css page but my browsers (FF and IE7) both ignore the CSS and apply their own standards to it no matter what I do, it's driving me positively INSANE because it feels like I've done everything according to the instructions I found online for print CSS. Could you please take a look at my code and make some suggestions? You'd be saving my sanity.

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" lang="en" xml:lang="en">

<head>
<title>CLOColors3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="mainstyle.css" type="text/css" />
<link rel="stylesheet" href="mainstyleprint.css" media="print" type="text/css" />

the print css:
Code:

	  @media print {
		 html{
			height:auto;}
		body{
			background-color:#FFF;}
		#header{
			display:none;}
		#body{
			position:relative;
			background-color:#FFF;
			background-image:none;
			height:auto;
			width:auto;
			left:0px;
			top:0px;
			z-index:0;
			padding-bottom:0px;}
		#textbox{
			position:relative;
			overflow:visible;
			float:none;
			margin-left: 0px;
			top: 0px;
			width:auto;
			bottom:0px;
			background-color:#FFF;
			border:hidden;
			border-color:#FFF;
			z-index:0;
			padding:0px;}
		#textbox img{
			display:none;}
		.searchbar{
			display:none;}
		#linkbar{
			display:none;}
		.map{
			display:none;}
		.video{
			display:none;}
		#linktext{
			display:none;}
		#clear_both{
			display:none;}
		#menu{
			display:none;}
		#footer{
			display:none;}
		}
	

Currently the main CSS is being used and none of the elements I set to be "hidden" are hidden. Help!!!


UPDATE: Ok, so IE seems to be PARTIALLY responding to the print CSS. It responds to all the "display:none;" commands but refuses to format the #textbox div according to my instructions, a border persists and the div has an overflow scrollbar for some reason. Firefox is still unresponsive.

I have finished my transparency box backgrounds.. and, thanks to some help here.. have them working in multiple browsers..

Now, I have received a call.. that one person sees "black lines" through the boxes on the transparent boxes on the attractions and info pages.. (user is using IE and 1024x768) -I cannot recreate this problem on any machine.. is there some little strange bug that causes this on certain browsers?

http://www.tkwebbiz.com/Gina2

Thanks so much.. *again*.. *Smiles*

I need some help. I am a relative beginner with CSS and have a problem that is eluding me.

Specifically in the right-hand sidebar on this page (FriendsAcrossTheWater.org/blog), you will note that all the links are on separate lines by themselves.

I do not want this behavior and I am not sure what is causing it nor what to do to correct it.

Can you help?

Thanks,
Bob Ross

Hi, I am writing a code for form:
Code:

private name: <input size="10" name="private_name" type="text">
last name: <input size="10" name=last_name" type="text">

I want to increase the space between the two lines
I tried to use the css line-height and it did increase the vertical space between the two lines.
However only in the part of the words.
In the case of the two input boxes instead of more space they become "taller", I can understand the logic behind this, what I don't know is a way to increase the vertical space between the two lines that will work in the case of the input boxes as well.

How can I solve this?

Thank in advance

CSS Validator

Two lines of CSS won't validate because they are used to fix a navigation issues in IE. Without those two lines there is a huge height gap between each list element in IE. Anyway I can hide these two lines from the validator?

Here is my html for my tables

Code:

<div id="Content">
        <p class='instructions'>Click a column header to sort the table.</p>
        <div spry:region="jdmba">
          <div spry:state="loading" class="loading">Please wait while alumni data loads&hellip;</div>
          <table width="680px" class="spry" cellspacing="0">
            <tr>
              <th scope="col" width="113px" class="sortable" spry:sort="last" id="last">Last Name</th>
              <th scope="col" width="106px" class="sortable" spry:sort="first" id="first">First Name</th>
              <th scope="col" width="257px" class="sortable" spry:sort="account" id="account">Company</th>
              <th scope="col" width="66px" class="sortable" spry:sort="state" id="state">State</th>
              <th scope="col" width="69px" class="sortable" spry:sort="hls_year" id="hls_year">JD</th>
              <th scope="col" width="69px" class="sortable" spry:sort="hbs_year" id="hbs_year">MBA</th>
            </tr>
          </table>
          <div class="Overload">
            <table width="680px" class="spry" cellspacing="0">
              <tr spry:repeat="jdmba" spry:setrow="jdmba" spry:odd="odd" spry:even="even" spry:hover="hover" >
                <td width="113px">{last}</td>
                <td width="106px">{first}</td>
                <td width="257px">{account}</td>
                <td width="66px">{state}</td>
                <td width="69px">{hls_year}</td>
                <td width="69px">{hbs_year}</td>
              </tr>
            </table>
          </div>
        </div>.......

Here is my CSS

Code:

.Content {
	font: 14px/normal Georgia, "Times New Roman", Times, serif;
	text-align: justify;
	display: block;
	padding: 2em 3em 3em;
}
.Overload
{
	height: 208px;
	overflow: auto;
}
.odd { background-color: #E8E8E8; }
.even { background-color: #E8E8E8;}
.hover { background-color: #FFC;}
table.spry {
	font-family: Verdana;
	font-size: 12px;
	line-height:20px;
	cursor: pointer;
}
.instructions {
	font-family: Verdana;
	font-weight:bold;
	font-size: 12px;
	line-height:20px;
	cursor: pointer;
	margin-bottom:8px;
}
.loading {
	font-family: Verdana;
	font-weight:bold;
	font-size: 12px;
	line-height:20px;
	cursor: pointer;
	margin-top:0px;
	margin-bottom:8px;
	color:#900;
}
table.spry th {border-left: 1px solid #000000; border-bottom: 1px solid #000000; border-top: 1px solid #000000; font-family:Verdana; }
table.spry td {border-left: 1px solid #000000; border-bottom: 1px solid #000000; font-family:Verdana; }
table.spry th.sortable:hover { cursor: pointer; }
table.spry th.sortable { text-align:left; color:#FFFFFF; background: #8F001C url(../SpryAssets/bg.gif) no-repeat 95% 6px; }
table.spry th.ascending { background: #8F001C url(../SpryAssets/SpryMenuBarUpHover.gif) no-repeat 95% 8px;  }
table.spry th.descending { background: #8F001C url(../SpryAssets/SpryMenuBarDownHover.gif) no-repeat 95% 8px; }

I guess I was under the impression if I made them all the same lengths and the table width the same that everything would then lineup just fine.

The other thing is that on IE it is not lined up one way and on FF it's not lined up again, but it's different.

I would like to upload some images to show my problem. How do I go about putting an image up for you to see what I'm talking about? When I try to insert an image it doesn't give me an option to upload an image from my machine.

Thanks!

Hi there,

I would like to get some opinions on what would be the best way, or even a good way, to display a list of lines from a database, such as product descriptions (a link), prices (text) and buy now links.

For example:
Segate Hard Drive 250gb $150.00 Buy Now
Maxtor Hard Drive 300gb $200.00 Buy Now
etc

I thought it would be best to have a <ul> with each line being an <li>. Further to this, I tried having each line as a <li> element, with each column (price, buy now etc) an <li> element, displayed inline. This actually worked well, but I had trouble doing an alternate background color thing, which I think was due to my funny css code. I gave each <li> a class selector, so that different formatting could be applied, and I had each <li> float:left; and a width, to give a column style display.

Would a table be the best way to display the 3 (or more) columns? I've removed tables from the site layout, and can see how they would make sense for this, as it basically is tabular data, repeated over and over again.

Or would having each line as a <p> with say each column having its own <label> possibly be best? Or some variation on of the 3, or something else all together?

I realise everyone would have their preferred style and there is no 'best', 'right or wrong' way etc. I'm trying to find a way that I can work with, one that could be considered 'the norm', or 'best practise'.

I haven't posted any code, but can if people need more of an idea of what I am trying to do.

Cheers
Scott

When printing pages from this site http://www.sorensteensen.dk/kvl/ one or two lines disappear when the pages break.

I have no idea why. Anyone knows about it?

Soren Steensen

I was wondering if anyone knows how to get a space between blocks in a list. If you have list that have more that one line in a block it looks better to have gaps greater than the leading to separate them.

I can't figure how to accomplish this, does anyone have any ideas.