CSS - Controlling Link Properties Inline

Hi there,

I have an image rollover css script, but it will not understand a:active so is there a way I can use an inline a:active attribute?

Many thanks!

Hello. I'm trying to figure out a way to define link states (link, active, hover, visited) using an inline style or in a manner other than specifying via an imported or embedded style sheet. The project I'm working on involves designing an HTML email (template) with links that have formatting specified. Some webmail providers (particulalrly gmail and hotmail) seem to strip the away all code from the BODY tag on up (I assume to avoid conflicts with their own formatting), making formatting a very creative endeavor. Anyhow, without specifying these attributes in the header, is there any other way of doing this? The best I can figure out is specifying a link color, but without allowing for changes on visited, active, or hovered links. I've been googling for hours, so any help would be appreciated. Thanks.

P.S. I know the prevailing attitudes on plain text vs html formatted emails and how it ties into spam, etc. I assure you this isn't being done in the context of spam, but rather, an opt-in newsletter for a client interested in sending fully formatted newsletters. :-)

Hello,

I am currently making a site, and this is my first experience using css, and so far I love it. Now I have a page with multiple links on it, and this page has its css info stored in a seperate css file. Now I want some of the links to show up in all satus's (hover, visited ect)with one color, size ect, and some links to show up with a different color. I know i can modify all the links on the page color by adding this to the css page...
------------------------
A:LINK {font-family: Arial, Helvetica, sans-serif;
color:#000000;
text-decoration:none;
font-size:12pt;
font-weight:bold;}
-----------------------

but how can i make it so each class has a differnt a:link, a:visited, ect. Thanks!

http://localhost/donkeyshare/content.php?cID=portal

PHP Code:
/* page properties */
.properties {background-color: #EEEEEE; margin: 0 px}

/* table configuration */
.table1 {border: 1px solid #BBBBBB; color:#333333}
.table2 {background-color: #DDDDDD; font-weight:bold; font-variant:small-caps; font-size:12px; font-family:verdana}
.table3 {background-color: #EEEEEE; font-size:12px; font-family:"Courier New";}

/* link configuration */
A:link {color: #333333; text-decoration:underline}
A:visited {color: #333333; text-decoration:underline}
A:active {color: #333333; text-decoration:underline}
A:hover {color: #333333; text-decoration:overline} 





What do i do if i want to define differnt link properties to table 3, thats difernt then table 2. please take a look and tell me what you think.

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.

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?

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

Thanks,
James

I'm trying to determine the best way to design a UI for a PHP application. There is a header portion with menu choices and a footer portion. There is also a background image 'picture frame' that sits in between the header menu and footer and gets loaded depending on the user's preferences. None of these three scroll. Within that picture frame, there is a center screen with a scrolling application. This portion would load different screens based on what was picked as a menu choice, and the user would scroll in the application if the particular screen were longer.

Is the best way to do this using frames, or is there a better choice in terms of speed, browser compatibility, etc.?

Thanks for your suggestions.

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!