|
CSS - Reset Text-align To Listen To Html Styles?
Hi all
I'm using a reset.css file that sets the text-align for TDs to left. Now I'm using an old CMS that displays an admin bar on top of the page, which is so very old that it is based on tables and uses HTML styles like align="center" to align its content. Naturally, those styles are now overriden globally by the reset.css file. Is there a way to reset this style to "undefined" or something for this admin table, so the browser listens to the HTML styles like align="center" again? Thanks for help Josh Similar TutorialsHi there, Is it possible to have the same name for a link style to a text style? For example: a.small:link{.... and .small{... Many thanks! I wish all input-texts (input type="text") on my page to have a width of 200px, but I don't want any other input items, such as checkbox or button, to get this attribute. I tried the following in the style section, but it doesn't work. input.text { width:300px; } Note that the following DOES work, but it affects other input items as well, which I don't want: input { width:300px; } Any ideas would be welcome. Due to time constraints, no questions for further clarification of the problem will be answered. Thank you. i want to add styles to the text area content such as bold, itallic, indent, color and size (like our fourms Post new Thread text area). how is it possible wating for ur reply bye Hi, I've got a webpage that I need to print almost exactly as it appears on the screen. Currently I've got two style sheets linked to, one for the 'screen' and one for 'print'. I know this is working because the top line of my print CSS is: @page {size: A4 landscape;} however I can't seem to alter any of the elements on the print CSS. If I adjust the width, height, even the color it always inherits the stuff from the screen CSS and uses that, ignoring the print CSS. In fact, I can't even define a margin for my page using @page {margin...}. The two style sheets look like this: for the screen: body {..... etc etc all works fine... for the print: @page {size: A4 landscape;margin:3cm;} body {.... etc ALMOST same as above the print CSS is essentially the same as the screen one, except that I want to define different widths and heights for table elements so I can fill an A4 page with a margin. The printing process ignores the widths and heights from the print CSS, and even ignores the margin definitions. It must be reading the print CSS because it knowns to print landscape. What am I doing wrong, or am I completely misusing the @page and media commands? Thanks in advance. Andy Hi, i try to print some variables on a ticket. A ticket which is already printed. I try to reach a result like this: This is the html: PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>Printing Ticket...</TITLE> <LINK REL="stylesheet" TYPE="text/css" MEDIA="print" HREF="foo.css"> <link rel="stylesheet" type="text/css" media="screen" href="foo.css"> </HEAD> <BODY> <div id="menu" class="menu"><center><p><br>The ticket will be printed...<p> <input type=button value="Close Window" onClick="javascript:window.close();"> </p></p></center></div> <div id="content" class="content">C 25 3 12345</div> </BODY> </HTML> The foo.css: PHP Code: @media print { body { background: white; font-size: 12pt; FONT-FAMILY: Verdana; background: transparent none; } #menu { display: none; } #content { margin-left: 30px; margin-right: 0px; margin-bottom: 0px; margin-top: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; text-align: left; } } @media screen { body { font-size: 14px; line-height: 1.2 } #content { display: none; } } This piece of the div tag 'content' don't listen to me: PHP Code: margin-left: 30px; margin-right: 0px; margin-bottom: 0px; margin-top: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; I have most of them at 0px, but whatever i insert into there it doesn't change the position of the variables. Are there are other codes to define a position? Thanks for any help. hello. i have a button that pops up to a floating div. this div gets applied html from a source called by ajax. in the html that is being called, i added <style></style> tags to embed specific css for that html. i do this because this html will be used globally across the site it works fine in every browser except safari. safari doesn't seem to render the css. any suggestions? OK, I have a few links stacked vertically and I'm trying to get them to align to the right. You can see the links here Please look at the sub navigation to the left of the big image. My CSS looks like this: Code: a.subnav{
font-family:arial,helvetica, sans-serif;
font-size:11pt;
color:#FFFFFF;
line-height:24px;
text-decoration:none;
text-align:right;
}
what am I doing wrong? How can I get the text to align to the right? - thanks OK I have a layer that is described here : div#footer { position: absolute; top: 0; left: 0; width: 100%; height:14; background-color: #EED; font: 10px Verdana, sans-serif;} In this layer I wish to have some text in the left of the bar and at the far right (align-right) some text also ... how would i achieve this ??? -Thanks- I'm creating a dynamic calendar and I can't get the numbers in the cells of my calendar table to align top-right! Here is my unformatted table... Code: <tr height="75"> <td><div align="right">12</div></td> <td><div style="vertical-align:top; text-align:right">13</div></td> <td>14</td> <td>15</td> <td>16</td> <td>17</td> <td>18</td> </tr> I want the numbers to be aligned top right, but if I put other data in there(currently there is none, but there will be), I'd like it to be aligned left. I tried using the vertical-align property in a div tag, but that didn't do anything... I can get it to align right with a div tag... sorry if it's such a stupid quesiton... Also, a side note... I thought that span allows you to align text as well using the style property, but that doesn't work at all (not even just to the right) Hi there, ahhhh I have just decided to start using Firefox and now am rreworking my site. All new set up issues to try and fix and i don't even know where to start. Here is my site: www.kohlrbaby.com The issues: 1) nav bars are no longer positioned correctly vertically, nor can I get the text to center in FF 2) the white box extends longer then it should in FF vs IE 3) the text is extending off the white box in the catalogue area in FF please please offer me some css insight here is my .css code: BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-TOP: 0px; PADDING-BOTTOM: 0px; margin:0px auto; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #a1b7d2; SCROLLBAR-FACE-COLOR: #a1b7d2; SCROLLBAR-ARROW-COLOR: #003366; SCROLLBAR-TRACK-COLOR: #cccccc; FONT-FAMILY: verdana, helvetica, arial, sans-serif; BACKGROUND-COLOR: #a1b7d2; TEXT-ALIGN: center; COLOR: black; FONT-SIZE: 12px; } #menuList { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } #menuList UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } #menuList LI { DISPLAY: inline; LIST-STYLE-TYPE: none } A.actuator { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 9px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none } A.actuator:hover { COLOR: #958550 } .menu { BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; VISIBILITY: hidden; BORDER-LEFT: #ccc 1px solid; COLOR: #000; BORDER-BOTTOM: #ccc 1px solid; POSITION: absolute; BACKGROUND-COLOR: #ffffff } .menu LI A { PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; FONT-SIZE: 9px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; LINE-HEIGHT: 1.75em; PADDING-TOP: 0px; BACKGROUND-COLOR: #ffffff; T EXT-DECORATION: none } .menu LI A:hover { COLOR: #eee; BACKGROUND-COLOR: #a1b7d2 } SPAN.key {TEXT-DECORATION: underline} #homeMenu {WIDTH: 100px} #catalogueMenu {WIDTH: 100px} #wholesaleMenu {WIDTH: 100px} #wheretobuyMenu {WIDTH: 100px} #contactMenu {WIDTH: 100px} A {FONT-WEIGHT: normal; COLOR: #000000; TEXT-DECORATION: none } A:visited {COLOR: #000000} A:hover {COLOR: #958550} A.set1:link {text-decoration: none; color: #7c8895 } A.set1:visited {text-decoration: none; color:#990000} A.set1:hover {text-decoration: none; color:#958550} #navHeader { PADDING-TOP: 0; HEIGHT: 110px; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; MARGIN-LEFT: auto; MARGIN-RIGHT: auto; WIDTH: 650px; POSITION: relative; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: center; z-index: 10; } #logoHolder{ position: relative; } img.nav_left{ float: left; } #smallLogo { POSITION: relative; top: 30px; left: -145px; font size: 11px; font-weight: bold; } div.gray_layer { background:#cccccc; height: 20px; width: 650px; border: solid #000000; border-right-width: 0px; border-left-width: 0px; border-top-width: 1px; border-bottom-width: 1px; position: relative; text-align: center; z-index: 50; top: 56px; } #second_links { FONT-SIZE: 9px; TEXT-ALIGN: center; position: relative; top: 58px; MARGIN-LEFT: auto; MARGIN-RIGHT: auto; margin:0px auto; } #navImageBox{ BORDER-RIGHT: #000000 1px solid; BORDER-TOP: 0px; BORDER-LEFT: #000000 1px solid; MARGIN-LEFT: auto; MARGIN-RIGHT: auto; WIDTH: 650px; POSITION: relative; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: center; } #verticalLine{ height: 12px; width: 500px; border-right:#000000 1px solid; } img.banner{ BORDER-TOP: #000000 1px solid; BORDER-bottom: #000000 1px solid; } #contentHolder{ PADDING-TOP: 0; PADDING-bottom: 0; PADDING-left: 0; PADDING-right: 0; BORDER-RIGHT: #000000 1px solid; BORDER-Bottom: #000000 1px solid; BORDER-LEFT: #000000 1px solid; MARGIN-LEFT: auto; MARGIN-RIGHT: auto; WIDTH: 650px; POSITION: relative; BACKGROUND-COLOR: #ffffff; text-align: center; } #text{ padding: 10 30 0 30; line-height: 1.75em; text-align: left; } #catalogue{ padding: 20 30 15 25; width: 650px; position:relative; height: 100%; background:transparent; margin-right: auto; margin-left: auto; } .outline {border: 1px solid black;} div.catalogue_pic { position: relative; float: left; padding-right: 8px; } div.catalogue_text{ text-align: left; position: relative; LINE-HEIGHT: 1.25em; } div.float { position: relative; float: left; margin: 5 5 5 5; } div.float p { text-align: center; } #bottomText{ padding: 0px; margin-top: 10px; margin-bottom: 0px; margin-right: 20%; margin-left: 20%; /* opera does not like 'margin:20px auto' */ background: none; border: none; border-top: none; text-align:center; voice-family: "\"}\""; voice-family:inherit; font-family: verdana, arial, helvetica, sans-serif; font-size: 11px; } #blueBox{ text-align: center; position: relative; height: 27px; width: 150px; background-COLOR: #a1b7d2; top: -26px; } I have both Chinese characters and English characters in one paragraph, but they don't align to the bottom with the English characters appearing like <sup>. I have used 'vertical-align' to align the text, but not successful. Pls help. I have the following CSS: Code: span.title
{
{color:#c38ec7;text-decoration: underline;font-family: forte;font-variant:small-caps;font-weight:bold;font-size:165%}
}
... it works fine but when I try and put 'text-align:center;' that attribute does not seem to work. Is there any way of doing this??? Thanks How do I align the text in my navbar vertically? I'm trying to do this. edit.... I can't post the link by adding vertical-align:middle; to my navbar tag and its not working. Do you see where i'm going wrong? I have a footer image on a site and I want to line up some of the text on the left and some of the text on the right. The relevant css footer code is this: Code: #footer {
clear:both;
background:url(images/footer.jpg);
width:780px;
height:71px;
color:#ffffff;
font-size:xx-small;
}
#footer .notover {padding-top:54px;}
The xhtml is this: Code: <div id="footer"> <div class="notover">All this stuff is left aligned 54px from the top of the image.</div> </div> Now, how do I add some text on the same line as the class="notover" text that is right aligned? I thought it would be as simple as creating another div that specified text-align:right; but the text shows up right aligned and way below the footer image. Thanks in advance. Hi, I have a list of items a bullet on the left --> check.gif (13 X 12) and I'm totally new with CSS... but my check aligns ok only with IExplorer, firefox doesn't. here is my code... Code: #myul
{
color: #000000;
font-family: Calibri, Geneva, Arial, Helvetica, sans-serif;
list-style-position: outside;
margin-left: 15%;
margin-right: 15%
}
#myul li
{
color: #0076a3;
font-family: Calibri, Geneva, Arial, Helvetica, sans-serif;
background-repeat: no-repeat;
background-image: url(images/check.gif);
}
Code: <ul id="myul" class="listObj"> <li class="style16">Test item 1</li> <li>Checks all devices</li> <li>Verifies ....quality, ....resolution, precision/accuracy</li> <li>Compares current imagesbla bla bla bla bla bla bla bla bla some more below.........................ok thanks</li> </ul> PLEASE NOTE that I want the check align on top, sometimes the text lenght makes it move, I don't want that to happen. Can you help Thanks, my first post here I was having some trouble centering my layout in Firefox. It looked fine in IE6 (yes... it's a pain to work in, but it's the nature of the beast when doing internal intranet stuff) when I simply used "text-align: center;" but the layout wouldn't center until I added "text-align: -moz-center;" under that (in the body style). Is this an acceptable way of doing things? Is this a flaw in Firefox or is it more likely that I'm not doing things right? (yes I know I haven't posted code, this was more a high level question of when/if "text-align: -moz-center;" should be used). I saw the layout of the table that have 2 columns where everything is aligned to the left in both columns. Since I have to do the CSS without a table where the 1st column is questionings and the 2nd column is form's textboxes & drop-down selection. So, how do I get them lined up for the make-believe columns?? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Customer/Prospect Feedback And Information Request Form</title>
<style type="text/css">
body
{
margin: 10px 0px 10px 25px;
padding: 0px;
background-color: #<?=$bg_color;?>;
color: #<?=$text_font;?>;
font-family: verdana, sans-serif;
font-size: 8pt;
font-style: normal;
font-weight: bold;
text-align: left;
}
div.divCenterLayout {
margin: 0px;
padding: 0px;
}
</style>
<script type="text/javascript">
//Rest of lengthly codes here is removed for forum viewing....
</script>
</head>
<body>
<div class="divCenterLayout">
<form name="Feedback" action='abc_info.php?FirstName?LastName?MiddleInitial?Title?Company?StreetAddress?Address2?City?Stat e?ZipCode?Country?WorkPhone?Fax?email?Product?How?RCPT?Message?WebColor?FontColor?FromWho?WhichWeb' onsubmit="return ValidateForm(document.Feedback);" method="POST">
<script type="text/javascript">
//Break up addresses to prevent spam spiders from indexing them...
var user1 = "feedback";
var site1 = "<?=$from_who?>";
document.write('<input type=\"hidden\" name=\"FromWho\" value=\"' + user1 + '@' + site1 + '\">');
</script>
<input type="hidden" name="WebColor" value="<?=$bg_color?>">
<input type="hidden" name="WhichWeb" value="<?=$which_website?>">
<input type="hidden" name="FontColor" value="<?=$text_font?>">
Please provide us with the following information: <span style="font-weight:normal;">(note: fields with * are required)</span><br>
<br>
First Name:* <input size="25" name="FirstName"><br>
Last Name:* <input size="25" name="LastName"><br>
Title: <input size="25" name="Title"><br>
Company:* <input type="TEXT" size="35" name="Company"><br>
Street Address: <input type="TEXT" size="35" name="StreetAddress"><br>
Address (cont.) <input type="TEXT" size="35" name="Address2"><br>
City: <input type="TEXT" size="25" name="City"><br>
State/Province: <input type="TEXT" size="25" name="State"><br>
Zip/Postal Code: <input type="TEXT" size="12" name="ZipCode" maxlength="12"><br>
Country: <input type="TEXT" size="25" name="Country"><br>
Work Phone:* <input size="12" name="WorkPhone"> (Minimum of 10 digits)<br>
Fax: <input size="12" name="Fax" maxlength="25"> (Minimum of 10 digits)<br>
E-Mail:* <input size="25" name="email"><br>
<br>
Select 1 or More Products You're Interested In:*<br>
<br>
<!-- Product name is changed to product numbering -->
<input type="checkbox" name="product 1" value="1"<?=$productChecked2;?>> Product 1
<input type="checkbox" name="product 2" value="1"<?=$productChecked3;?>> Product 2
<input type="checkbox" name="product 3" value="1"<?=$productChecked4;?>> Product 3
<br>
<input type="checkbox" name="product 4" value="1"<?=$productChecked5;?>> Product 4
<input type="checkbox" name="product 5" value="1"> Product 5
<input type="hidden" name="Product">
<br>
<br>
<br>
How Did You Hear About Us?:* <select size="1" name="How">
<option selected value="none">Please Select From The Choices ...</option>
<option value="Direct Mail">Direct Mail</option>
<option value="Internet">Internet</option>
<option value="Magazine Ad">Magazine Ad</option>
<option value="Newspaper Ad">Newspaper Ad</option>
<option value="Referral">Referral</option>
<option value="Word of Mouth">Word of Mouth</option>
<option value="Other">Other</option>
</select><br>
Send response to:* <select size="1" name="RCPT">
<option selected value="none">Please Select From The Choices ...</option>
<script type="text/javascript">
//Break up addresses to prevent spam spiders from indexing them...
var user2 = "marketing";
var user3 = "software";
var user4 = "hardware";
var user5 = "webmaster";
var site2 = "companyName.com";
document.write('<option value=\"' + user2 + '@' + site2 + '\">Sales/Marketing</option>');
document.write('<option value=\"' + user3 + '@' + site2 + '\">Software Support</option>');
document.write('<option value=\"' + user4 + '@' + site2 + '\">Hardware Support</option>');
document.write('<option value=\"' + user5 + '@' + site2 + '\">Webmaster</option>');
</script>
</select><br>
<br>
Your message*: <span style="font-weight:normal;">(please do not use special characters)</span><br>
<br>
<input type="submit" value="Send" border="0"><br>
<br>
<input type="reset" value="Clear" border="0"><br>
<textarea rows="3" cols="40" wrap="virtual" name="Message"></textarea><br>
</font>
</form>
</div>
</body>
</html>
currently i have the following CSS Code:
ul#key
{
list-style-type: none;
padding: 10px;
}
ul#key li
{
display: inline;
}
however, some of the list items are small 50x50 images accompanied by text but the text is getting aligned to the bottom of the image rather than half way up. Ive tried using text-align: middle but that doesnt work? Please look at this page - http://www.tmhdesign2.com/home-payment-calculator.asp Why can I not justify the paragraph of text on this page for Firefox??? |
|||||||