CSS - Create Thin, Page-high 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>

Hi. I want to usw a dropdown list on my page. All other objects are inputfileds, a nd they have thing border around them
Following CSS is userd for inputfields:
.inputfield {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size : 8pt;
color: #000000;
background-color: #ffffff;
border: #326564 1px solid;}
I try to do something else for Dropdownlist, but it doesn't work
.listbox {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size : 8pt;
color: #000000;
background-color: #ffffff;
border: #326564 1px solid ;
clear: left;
clip: rect( );
}
Can you point me to an error, if there is one?

Thank you in advance
NY

All,
I have a header on this page backup.whiteslimo.com with 3 images inserted into it listing the company name, service, and contact info. My problem is that when they are displayed there is a thin white border on the bottom and right hand sides of each image. But the image doesn't have these borders. If you are in Firefox/Mozilla and you right click on the individual images and select View Image, you will see that the image itself does not have these borders. I am thinking that somewhere along some attribute is being added that is causing this but since I am a CSS neophyte (This is still my first week lol) I am not sure. Any help is much appreciated.

I want to create 2 vertical page borders using an image. Is the best way creating a table? I need a pretty decent jumpstart. Thanks in advance.

I'm trying to create an image that will adjust to fit the screen size and always be at least 100% of the screen.

Basically, I'm looking to have the "trunk" image in the LeftBody div, always stretch to reach the image in the banner and the footer. If I have enough content, the image will repeat just fine and fill my needs, but if there is no content, how can i make the image fit the page?

My code is accessible via the /Samples/ directory.

Thanks so much...

midcitybrewery.com/Samples/sample.html

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'm trying to figure out the exact height of a single line of text in units of em. I have a nice tabbed navigation system going with two levels, but the 1.25em that I had estimated isn't exactly correct (I get some misalignment when changing the font size). By putting a character in a div and modifying the height of another <div> next to it, with the font at max size, I managed to come to 1.165em, but this got misaligned at a few lower font sizes. Does anyone know an accurate measurement for this? Or should I just get it close enough for "normal" font sizes?
In case that didn't make sense, I'll try to illustrate with some ASCII art:
Code:

+---DIV---+ +-DIV-+
|some text| |     |   <- what height should this be to line up perfectly?
+---------+ +-----+

I'm customizing an IP Board (version 3.2.1). I've set up a test board and when I've got it how I want it I'm going to export it as a skin which I'll install on a live board. In the current version of IP Board, the post title is above the main title bar in post view, whereas in the previous version, the post title was in the main title bar, which is where I want it. One of the IPB boffins gave me a code mod which enabled me to place the post title in the main title bar. The problem is the standard code that governs the post title also governs the forum title (pictured below) in forum view. I need to get rid of this title (circled) in order to reduce some of the space between the header and the main title bar. But if I comment out this title, I also comment out the post title. According to the guy who was helping me, the only way around this is to create a new class, which is beyond his expertise -- and way beyond mine. How do I do this, or is there an alternative and hopefully simpler solution?

Many thanks!

This is the code in question.

Code:

.ipsType_pagetitle, .ipsType_subtitle {	         font: 300 16px/1.3 Helvetica, Arial, sans-serif;          color: #141719;}

The circled title is what I want to remove.

http://www.thechristianidentityforum.net/smf/pix/screenshot.jpg

The code also affects the post title in post view, which is why I need a new rule set/class, so I can delete the forum title in forum view but not the post title.

http://www.thechristianidentityforum.net/smf/pix/screenshot2.png

EDIT: For some reason the images won't display in the post. They display in preview but not when posted. Just click on the urls to see the pix. I apologize if I've broken a forum rule or two in doing this.

I have a very high div which I want to resize depending on the height availible (it has the central BG image) e.g. if the user is on 1024 they dont have to scroll down for miles to see the whole page. But if the user is on a higher res then the div should become the full length available.

Is this possible?

I thought height: 100%; would work but it doesn't seem to do much. Also had at look at the overflow options but hidden wont do me any good because if the user is on 800x600 then you cant see the rest of the content.

Any help appreciated thanks!

Well i am working on a new design but there's a problem, if you go to www.majd-gfx.com you see that the left column does not stretch fully (as long as the content column)

i have searched for this and found a tutorial on alistapart.com but it wasn't very helpful as i would have had to rework the whole layout. Is there an alternative?


p.s. i have tried height:auto and height:100%...neither worked....

Hi, how do i set a table to be table 100% wide 100 % high using css?

i am using the new dreamweaver that includes this in the header:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

the 100% height and 100% width html values dont' work, i have tried css to get the table 100% but can't

can anyone help?

Paul

i have a basic navigation system - 12 items divided into 3 columns - fitted together horizontally in a row. On a windows xp machine with a high resolution display which is set to automatically resize all ie browser pages to make them appear larger (readable or lower-res) - somehow my navigation columns no longer fit into a single row...

as far as i know under all other browsers/platforms the menu appears correctly. i've tested the navigation layout in opera, ie, firefox, netscape on my own windows computer, and have tested the pages using some online site that takes snapshots of your page in various browsers on various operating systems (including linux and apple)....

the problem may be with the way i am calculating the pixels for the div widths? or...?

the page is at gatewoodfarms.com
(gatewoodfarms.com/gwf.css)
a screenshot of the problem is at
gatewoodfarms.com/screenshot.png

here is the Basic Structure/CSS:

<body style="border:0px;padding:0px;margin:0px;min-width:630px;">
<div id="wrap" style="border:0px;padding:0px;margin:0px auto;width:630px;">
<div id="top" style="">
...
<div id="nav" style="border:0px;padding:0px;margin:0px;height:90px;width:630px;">
<div id="nav1" style="width:210px;height:90px;border:0px;margin:0px;float:left;"></div>
<div id="nav3" style="width:210px;height:90px;border:0px;margin:0px;float:left;"></div>
<div id="nav3" style="width:210px;height:90px;border:0px;margin:0px;float:right;"></div>
</div>
</div>
<div id="main" style="border:0px;padding:0px;margin:0px;height:auto;width:630px;top:250px;">
...
</div>
</div>

any ideas how i can fix this? thanks!

Help! I am trying to build my site in CSS. Here is the CSS for my top layer, despite the size being specified to 130px and an image inside it being 130px high, it is still 5px too high... any ideas?

Code:

#page_top_sizing {
	background-color: red;
	width: 764px;
	height: 130px;
	position: absolute;
	top: 5px;
	left: 5px;
	z-index:1;
	padding:0;
}

Thanks.

I've run into a problem with a 3-column layout I'm making. The problem is to get the columns equally high. Previously I've just made the "illusion" of equally high columns by making a background image and repeating it in the y-direction (like this). This works fine as long as the page has a fixed with - in this case the left and right column have a fixed width but the center column is dynamic.

So, how can I make all the columns look equally high? (without using tables, obviously)


Btw, I can't show you an example of the page, but hopefully you'll get the picture and could point me to an article or something about the subject.


EDIT: Never mind! I found an example and it worked!
http://www.pixy.cz/blogg/clanky/css-3col-layout/ <-- thats the one.

Hi,

Instead of organising an image sprite as follows:

image image image
image image image

i'm wondering if there are any negative effects to organising the images in a linear fashion as follows

image image image image image image

I know that Flash will only render images that are a certain width or height but is there any such limitations when using css sprites?



Thanks