CSS - Controlling A Scrolling Portion Of A Ui

is there a way using css to control how much space is below and above a form button, because I have a lot of form buttons and the space between them is killing my design.


Thanks

Hi.. another question for the CSS mastas out there.

I have a table taht I have applied a class to:

PHP Code:
<table class="middle"
                       cellspacing="0"
                       cellpadding="0"
                       border="0">
                    <tr>
                        <td>&nbsp;<img border="0"
                             src="images/spacer.gif"
                             width="1"
                             height="1">
                         </td>

                        <td align="left">
                            <p class="customHeading">aaaa</p>
                        </td>

                        <td>
                            <p align="right">
                            <a class="importantLink" href="">aaa</a>&nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp; 
                            <a class="importantLink" href="">aaa</a> &nbsp;&nbsp;&nbsp; | &nbsp;&nbsp;&nbsp;
                            <a class="importantLink" href="">aaa</a>
                            </p>
                        </td>
                    </tr>
                    
                    <tr>
                        <td colspan="3" valign="top">

<table class="content"
                                           cellspacing="0"
                                           cellpadding="0"
                                           border="0">
                                        <tr>
                                            <td align="left">aaa:</td>

                                            <td><input type="text"
                                                   name="aaa"
                                                   size="22"
                                                   class="formField">
                                            </td>

                                            <td><a href="#">
                                                   <input type="submit"
                                                   value="SEARCH"
                                                   class="formButton">
                                                 </a>  
                                            </td>
                                        </tr>
                                    </table>

</td></tr></table>

.middle {
    width: 760px;
    height: 360px;
    background-color: #FFFFFF;
}

.content {
  background-color: #FFFFFF;
  font: 13px Arial, sans-serif;
  padding: 2px;
  margin-left: auto;
  margin-right: auto;
  
} 





The issue I'm having is that I can't seem to control the height of the outside tables first row. It seems to just take on a size depending on how I set the height in the element. Can I not place a height tag in the <td>'s for that row to set it at a fixed height?

Im trying to control how the text formats within a div tag, that sits inside a menu.

The text appears when you rollover the items in the submenu and I want extra information to appear but when it does, it doesnt wrap 'correctly'

I have the menu sitting he http://www.electronical.org/tmp/playsongs/

If you rollover 'Products > playsong titles', you will see some blue text appears at the bottom of the submenu.

How do I format this so it is the width of the submenu and wraps to the length of it?

Thanks for any help.

Has anyone seen a template somewhere that can help style a page for printing to an index card?

Thanks,
James

Hello:

I'm building a website for a broad audience. I need there to be an option for text to be resized for those who have trouble with reading screens. I am trying to have the text on HTML pages be changeable through CSS.

Two examples I offer are

1. wired.com
2. 1and1.com

On the top right corner of the screen, there are options to change the text size without switching to a new HTML page. I believe this is done using CSS (perhaps Live StyleSheet Selector). I'm not really sure.

I would like for the user the have the option to change the font-size by clicking, not by repositioning the window (then the size changing relative to window size).


If anyone can help me, I would really appreciate it. Thanks!

Deanna

Okay, I tried to see if this question was already answered on the forums, but I got ADD so I gave up.

I'm making a nav bar out of a list and CSS. The bar is perfect, except for the height will not extent each extremity.

Here's the CSS:
Code:

.navigation {
	width: inherit;
	height: 53px;
	margin: 0px;
	margin-top: 63px;
	
	background-image:url(file-bin/images/navigation_background.png);
	background-repeat:repeat-x;
	background-position:center;
}
	.navigation ul, .navigation li {
		display: inline;
		list-style:none;
		padding:0px;
		margin:0px;
	}
		.navigation li a {
			border-left: 1px solid #FFF;
			padding-left: 20px;
			padding-right: 20px;
			text-align: right;
		}

Here's the HTML:
Code:

	<div class="navigation" align="right">
		<ul class="navigation">
			<li></li>
		</ul>
		<ul class="navigation">
			<li><a href="#"><img src="file-bin/images/space.png" height="53" width="1" align="absmiddle" border="0" />Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li><a href="#">Link 3</a></li>
			<li><a href="#">Link 4</a></li>
		</ul>
	</div>

Thanks for the help in advance!
- Logan

When a Text Input is disabled, is there a way to control the visual characteristics such that it's not as subdued, or use different colors for the text / background?

In a simple vertical list, the bullets are offset to the right of the container. Is it possible to control the amount of offset?

I want to know how I could possible control all the elements inside a table that is inside a div with an id. This is possible correct?

So if I have:

Code:

#header { width: 900px; }

And then something like this:

Code:

<div id="header">

<table>
<tr>
<td>

</td>
</tr>
</table>
</div>

I'd like to then have something like:

Code:

#header.table,td {padding-left: 10px;}

Which I am hoping would put a 10px padding on all the td's in the table and nothing else. Is my syntax right?

Hi,

I am using a javascript drop down that does include CSS to control the font style, size etc. It works great in IE. Mozilla is ignoring all CSS, both in the js code and my style sheet, when I change the text size via View/Text Size in the top menu bar of the Mozilla browser). How do I get Mozilla to bow down and take it (the code, that is )

Just to note, I have tried adding the CSS info from the javascript to my style sheet. No different results.

Thanks!

hi guys, silly question

i want to make a certain portion of my text smaller, but when i put a span like this around it: <span style="font-size: 10px;">
then only the plain text, and not the links, decrease in size...

what should i add?

thanks
glog

I am having a problem where I have a <div> that holds my body image, margin: 0 auto; Inside that is my content <div> with margin:15px; but this is visually dropping the background image's margin by 15px. The problem compounds every time I add another margin/padding requirement into the rest of the <div>.

Code:

html, body {
	margin:0px;
	padding:0px;
	background-image:url(images/interface/background.png);
}


#body_image {
	width:935;
	margin:0 auto;
	padding:0px;
	background-image:url(images/interface/body.png);
	background-repeat:no-repeat;
	background-position:center;
}

#container {
	width:904px;
	height:750px;
	margin:15px;
}



#slug {
	height:15px;
}

Code:

<div id="body_image">

<div id="container">
	<div id="header">Header</div>
	<div id="nav">Nav</div>
	<div id="sidebar">Sidebar</div>
	<div id="content">Content</div>
	<div id="footer">Footer</div>
	


</div>
</div>

The extent of my CSS is a few tutorials online and the class I took 10 years ago where the teacher said "Here's CSS, you can't do much more than change your font size and color with it... on to tables!" Thought it'd only be fair to give you a little background.

Hi guys,

I've this div with overflow:auto.
This div is populated using xmlhttprequest (it's an IM chat) so it will be getting full to the point where there's an overflow and the scrollbar shows up.
What I would like to do is, whenever a new content line was added to the div (I'm using DOM to do so), the scroll (if overflow has happened) would go all the way down in a way where the last line of visible text in the div would always be the last line inserted.
I'm somewhat newbie at this stuff so, any help in the right direction would be great!

Thx

Hugo

Good morning,

I have a problem with a layer(div) that I am putting over my page everytime the user clicks a button and a transaction is send to the host. My problem is that if there is an scroll and the user scroll, the message scrolls up and dissapears. I need to fix it to the center of the screen. I have tried with % instead of absolute px. Can anyone help me, please?. I am close to my deadline, so any help would be really apreciated.

I am attaching my code:
window.onbeforeunload=new Function("Procesando.style.visibility='visible';");

window.onblur=new Function("Procesando.style.visibility='hidden';");
//window.onfocus=new Function("Procesando.style.visibility='hidden';");

document.write('<div style="position:absolute; top:160; left:313; visibility:hidden; overflow:hidden; background-color:#CCCCCC; clip:rect(12,177,50,3); " id="Procesando">\n'+
'<select size=4 name="cbEspera" class="TextoTablaIzq" style="background-color:#CCB8E0; font-Weight:bold;">\n'+
'<option>&nbsp;</option>\n'+
'<option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Procesando su petici'+unescape("%F3")+'n. &nbsp;</option>\n'+
'<option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Espere por favor...&nbsp;</option>\n'+
'<option>&nbsp;</option>\n'+
'</select></div>\n');