CSS - Css Text-align/margin Attributes Not Rendering
Hi All,
I'm having problems getting a couple of CSS rules to render on my page. First, here's the page: http://www.righteousguitar.com/ Here are the rules that aren't rendering properly (or likely at all): Code: #Heading { text-align: center; } #Heading h3 { margin-top: 14px; margin-bottom: -5px; } This rule should move the logo 5px from the left and top of the header. I've tried increasing the margins to as much as 50px, and it has no effect. (The "logo behind the logo" is part of the header image, which I'll remove once this is resolved.) Code: #Heading { text-align: center; } #Heading h3 { margin-top: 14px; margin-bottom: -5px; } These rules should center the h1/h3 heading and change the top-margin of h3 from 34px to 14px. I should say that, for the most part, this is not my code - I received a free template with my hosting package. I did, however, create the rules in question. I'd prefer not to make wholesale changes to the code unless absolutely necessary. I've reviewed my notes on inheritance and specificity, but I can't find the problem, so I'm hopeful someone here can. Thanks in advance for any ideas or suggestions. Sam Similar TutorialsHi again. okay i'm playing with CSS to make a new site. Im trying to get the background image to move down from the top of the page by around 3cm or 200px approx but i cant figure out how to do it. Can anyone help a CSS n00b. Thanks Image so you can see what i meean. http://img100.imageshack.us/img100/4571/help2wq.jpg For the first time, rather than coding my own layout CSS, I'm adapting a layout and CSS created by someone else... and I've run into some problems figuring out a couple of things. The layout in question is one written for Movable Type, and is freely able to be edited and changed. I'm working with the layout in a test setting now, before moving it to its permanent home. You can see it in action at: Code: http://www.outincenterfield.com/mt/ Two things I need to figure out: 1. How to align the whole layout in the center of the page. (the header image, the 3-columns, and the footer) 2. How to increase space(margin) between the boxes in the sidebars, so that the underlying white background color shows through. Any help would be GREATLY appreciated - as the way this layout is coded has got me turned all around. I've tried everything I could think of, and can't sort out how to do these two things. Here's the main CSS: Code: /* THEME NAME: Diurnal THEME URI: http://ntuat.wordpress.com/ DESCRIPTION: This flexible 5-in-1 theme changes according to the time of day VERSION: 1.0 AUTHOR: Carolyn Smith AUTHOR URI: http://not-that-ugly.co.uk/ TEMPLATE: sandbox */ /* use any structure in /sandbox-layouts; more details in the readme*/ /* included here for Movable Type */ /* links to time-specific stylesheets */ @import url('sunrise/style.css'); @import url('morning/style.css'); @import url('afternoon/style.css'); @import url('sunset/style.css'); @import url('night/style.css'); div#container { margin-left: auto; margin-right: auto; width: 1000px; } div#content { margin: 0 400px 0 0; } div.sidebar { float: left; overflow: hidden; width: 180px; } div#primary { margin: 0 0 0 -400px; } div#secondary { margin: 0 0 0 -200px; } div#footer { clear: left; width: 1000px } body {font: 0.75em arial, helvetica, verdana, sans-serif; margin:0; padding:0; color:#444} #container {background:#fff;} #content { padding:0 10px 0 10px} /* header */ #header {height:200px;} #header h1 {font:3em 'century gothic', futura, serif; margin:0; padding: 0 10px 0 10px;} #blog-description {padding:7px 10px 0px 10px; color:#fff} .skip-link {display:none} /* prev/next links */ .navigation {margin:1em; text-align:center; width:95%; height:1em} .nav-previous {float:left; text-align:left; width:45%} .nav-next {float:right; text-align:right; width:45%} .nav-previous a {padding-left:20px; background:url(leftarrow.gif) center left no-repeat;} .nav-next a {padding-right:20px; background:url(rightarrow.gif) center right no-repeat;} span.meta-nav {display:none} /* page navigation */ #menu ul li { margin:0; padding:0; display:inline; font:1.2em 'century gothic', futura, sans-serif; } #menu ul li ul {margin:0; display:inline; font-size:0.8em; } #menu ul li a { padding: 3px 20px 3px 10px; letter-spacing:0.05em; } /* sidebar stuff */ .sidebar {margin:0; padding: 10px; background:#fff} .sidebar h3, .comments h3, #respond h3 {letter-spacing:0.05em; margin:0; padding:7px 10px 3px 20px; font: 1.4em 'century gothic', futura, sans-serif} #menu ul, .sidebar ul {list-style:none; margin:0; padding:0;} .widget, .sidebar li.linkcat {border:1px #ccc solid; margin-bottom:2em;} .sidebar ul li, #wp-calendar caption {background:#f0f0f0 url(greybk.png) top left repeat-x; border:1px #ccc solid;} .sidebar h3 {border:1px #ccc solid;} .sidebar ul li ul li, .sidebar ul li div {background:#fbfbfb; border:0; padding:3px 10px 3px 10px;} .sidebar ul li ul li ul li { padding-left:20px; background:url(rightarrow.gif) center left no-repeat;} /* posts & comments */ .post, body.page div.hentry, .comment, .trackback, .pingback {border:1px #ccc solid; margin:10px 0 10px 0} .entry-title, .comment-author {letter-spacing:0.05em; margin: 0; background:#f0f0f0 url(greybk.png) top left repeat-x; padding:5px 10px 0px 10px; font: 2em 'century gothic', futura, sans-serif} abbr.published {border:0;} .entry-date, .comment-meta, #trackbacks-list div.comment-author { text-transform:uppercase; font-size:0.9em; margin:0; background:#f0f0f0; padding:0px 10px 5px 10px;} .entry-date {background:#f0f0f0 url(clock.gif) top left no-repeat; padding-left:20px} #trackbacks-list div.comment-author {font-family: arial, helvetica, verdana, sans-serif; border-bottom:1px #ccc solid; letter-spacing:0em; padding-top:5px} .comment-meta {border-bottom:1px #ccc solid;} .comment p, #trackbacks-list p {padding:0px 10px 0px 10px; background:#fbfbfb;} .entry-content {line-height:1.4em; padding:10px; background:#fbfbfb; border-top:1px #ccc solid; } .entry-meta{ clear:both; background:#f0f0f0; border-top:1px #ccc solid; padding:5px 10px 5px 10px} .meta-sep {padding-left:18px; color:#f0f0f0;} li.bypostauthor div.comment-author {background:#f0f0f0 url(starbk.png) top left repeat-x} /* forms */ input, textarea {background:#f0f0f0 url(greybk.png) top left repeat-x; border:1px #ccc solid; color:#444; font:1em arial, helvetica, verdana, sans-serif; overflow:auto} #commentform #submit {margin:10px 0 10px 0; color:#333} #searchform div{background:#f0f0f0; margin:10px} #searchform submit {color:#333} /* calendar */ #calendar h3 {display:none} div#calendar_wrap {padding:0; background:#f0f0f0 url(greybk.png) top left repeat-x;} #wp-calendar {width:100%; background:#fbfbfb;} #wp-calendar caption {font:1.4em 'century gothic', futura, sans-serif; margin:0; padding: 5px 0px 5px 20px; text-align:left } #wp-calendar td {text-align:center; border:#ccc 1px solid; background:#f0f0f0 url(greybk.png) repeat-x;} #wp-calendar tfoot td { background:#fbfbfb; border:0; } #wp-calendar td.pad {border:0; background:#fbfbfb} td#today { background:#ccc; border:#999 1px solid} /* image handling */ #content img {max-width:98%;} #content, .sidebar {overflow:hidden} a img {border:0} .alignright { float:right; margin:5px} .alignleft { float:left; margin:5px} .center { margin:auto; display:block; } /* getting asides to LOOK like asides */ body.home div.category-asides { margin:20px 0px 20px 0px; padding:5px 10px 5px 10px} body.home div.category-asides *{ display:inline; } body.home div.category-asides .entry-content {border:0; font-size:1em; line-height:1.5em; padding:0} body.home div.category-asides div.entry-meta {background:#fbfbfb; margin:0; border:0 } body.home div.category-asides .entry-title, body.home div.category-asides .entry-date, body.home div.category-asides .author, body.home div.category-asides .meta-sep, body.home div.category-asides .cat-links {display:none} /* html elements */ a {text-decoration:none} blockquote {border:1px #ccc solid; padding:5px} h2 {font: 2em 'century gothic', futura, sans-serif; margin:10px 0 -10px 0; } .hentry ul {list-style-image:url(rightarrow.gif)} #footer { background:#f0f0f0 url(greybk.png) repeat-x; text-align:center; border-top:#ccc 1px solid; padding:10px 0 10px 0; } I have run into a problem in 2 of my pages in IE they Render fine in Firefox but in IE you cannot see the top part of the text and in some you don't incounter this problem. but when you refresh page the Title and author and the top text will not show in IE just disapper and it will show up when you Scroll or Highlight the text. I been trying to figure out this problem for quite sometime now. The First Page Second Page Code: .top_article_pic { float:left; margin: 0 9px 0 0; } div#articles_bg { width:850px; background:#2A475F; padding:24px; } div#articles_page { background:#FFF; border:1px solid #000; padding:12px; } div#articles_page2 { height:800px; background:#FFF; border:1px solid #000; padding:12px; } span.h1 { font-family:Arial,Verdana,Sans-serif; font-size:2em; color:#2A475F; font-weight:bold; } span.author { font-family:Arial,Verdana,Sans-serif; font-size:.9em; font-style:italic; color:#2A475F; } div#articles_page p.main_article { margin:18px 0 0 0; font-family:Arial,Verdana,Sans-serif; font-size:.8em; color:#000; } div#articles_page p.main_article_p{ width:500px; margin:18px 17px 0 0; font-family:Arial,Verdana,Sans-serif; font-size:.8em; color:#000; float:left; background:#FFF; } img.right_thumb { border:1px solid; } p.click_enlarge { font:.8em Arial,Verdana,Sans-serif; color:#2A475F; } div#articles_page p.main_article_p2{ margin:12px 0 0 0; font-family:Arial,Verdana,Sans-serif; font-size:.8em; color:#000; background:#FFF; } img.right_float { float:right; margin:0 0 0 15px; border:1px solid #000; } p#left_article { margin:10px 0 0 0; color:#000; font:.8em Arial,Verdana,Sans-serif; } p.article2 { margin:9px 0 0 0; text-align:justify; font:.8 Arial,Verdana,Sans-serif; width:530px; font:.8em Arial,Verdana,Sans-serif; } div.right_pic { width:161px; padding:10px; font:.8em Arial,Verdana,Sans-serif; color:#2A475F; margin:0 10px 0 0; float:left; background:#ccc; border:1px solid #000; } Thanks in Advance First of all I just updated my Dreamweaver from 2004 MX to CS4. I have not used CSS before. I now want to update my sites to XHTML 1.0 Transitional and thought I would start using CSS. I am having trouble with the text losing or changing color and size once it gets posted. It looks fine in browser preview. So first some general questions. What is the difference between assigning properties to heading or class? Do I or should I use both the heading and class on a bit of text? Do I attach the style sheet to the template or to just the pages? All my pages are made from one template. I have several books, that tell how to create style sheets, but not what to do with this problem! Thanks, Jill Not sure if this should go in HTML forum or here, but there is CSS involved, so... Anyways, have a page here with 3 images aligned right. (Currently they are floated right, but problem originally was seen with aligned right, changed to css float and problem is the same). http://www.4for4.com/draft_board/to...r_id=HOTSTOVE13 I only see the issue in Chrome, but in Chrome if I refresh the browser, about every third or forth time the text will not wrap around one of the bottom 2 images in the main content area (Hancock & Theron). The text will just lay over the top of the image. If I refresh it will work again, but randomly will not render correctly over one of the two images that is aligned right. Is this just a weird Chrome rendering issue? Or is there some property I can add to the image that will force this to not happen? Thanks a lot. Note: as a new user it would not let me use a link(url) Problem:when viewing in IE8 - the text looks grainy notes: Using this page as an example: fineprintnotes.com/bergincapital1210/about-us-bergin-co-difference -text looks smooth and easy to the eye when viewing in Firefox and Chrome -text looks smooth when using the "compatibility view" feature in IE8 - but want that look as a default for visitors -for example - when visiting other website using IE8 such as: savantcapital.com The text renders- when viewing in IE8- like Firefox and Chrome or in other words smooth and not grainy -i have the same font face as that site and not sure what a fix could be - read up on what possible fixes I could find on the internet - such as "emulate IE 7" tag for example on this page: url blocked -- Welcome to Internet Explorer 8 Readiness Toolkit Questions - has anybody had this issue? - i don't notice the savantcapital.com website defaulting to Ie7 (using emulate ie 7 tag - how does their text look cleaner than my website? same goes for morganstanley.com (as another example) - i find it hard to degrade the wesbite to fix the text issue- i am not sure if thats how to put it- but would like it to use a more DOM compliant browser like ie8 if it has option in stead of reverting to IE7 view. Any thought? or fixes? Thanks in advance. one other note: I tried to do screen shots but it wasn't communicating the issue - the images altered the drasticness of the difference - i feel - right now i have the website not emulating ie7 Jamie Hi! How does padding and margin on text and images behave? And on other inline elements? Didn't get it to work in IE6. Thank you 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. 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- 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; } 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 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) 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 Confused yet? What's the best way to accomplish this? page testimonials.css Main.CSS If you look at the page, you will see that I have the "signature" of the testimonial giver aligned right, but I would like the two p elements to be aligned along their left edge as well (but on the right side of the page, with everything flowing around any images)... I tried floating them right, which and clearing the floats, but then the testimonials don't flow around the images... can this be done without getting divitis? 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> 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). How can i use text-align with inline? So it doesn't line break after, but when you use display:inline with it, it takes away the text-ailgn. Style: Code: .results{text-align: right; display:inline;} h3{text-align: left; display:inline;} html Code: <H3>Audio</H3><p class="results">Displaying Results</p> 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 Thanks for taking the time to read my question. I have a tree menu on my page www.pierced.ca/pierced-events.htm that has long text in it. I have wrapped the text so that the page does not stretch and look bad. I am wondering how to move the wrapped text to the right so that it does not write over the dotted line. I would also like to extend the dotted line downward (I guess that would be another image) Thanks for your help. Brad CSS file: .dtree { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; color: #CCCCCC; white-space: normal; } .dtree img { border: 0px; vertical-align: middle; } .dtree a { color: #999999; text-decoration: none; } .dtree a.node, .dtree a.nodeSel { white-space: normal; padding: 1px 2px 1px 2px; } .dtree a.node:hover, .dtree a.nodeSel:hover { color: #333; text-decoration: underline; } .dtree a.nodeSel { background-color: #c0d2ec; } .dtree .clip { overflow: hidden; } Hi, The text in my navigation bar is slightly off-centre, even though I have applied the text-align:centre property in my style sheet. Is there anything obvious that would be throwing it off? Any help would be greatly appreciated. Jimmy Here is my style sheet: body { padding:0px; margin:0px; background-color:#ffffff; background-image:none background-repeat:no-repeat; font-family:verdana, arial, Helvetica, sans-serif; font-size:11px; color:#333; } /*--------------------DIVs------------------------------*/ div#pagecenter { margin: 0 auto; width: 1024px; background-color:#ffffff; } div#header { height:312px; background-color:#ffffff; background-repeat:no-repeat; background: ((address blocked: See forum rules)); padding:5px; text-align:right; text-display: none; color:#FFFFFF; } div#desc { visibility: hidden; text-align:left; } div#sitename { visibility: hidden; } div#oup h1 a { margin-top: -30px; margin-left: 10px; margin-right: auto; width: 100px; height: 30px; display: block; font-size: 0px; color: #003261 } div#oup h1 a:hover {color: #003261} div#clickableheader h1 a { margin-top: 20px; width: 1000px; height: 200px; display: block; font-size:0px; color: #003261; } div#clickableheader h1 a:hover {color: #003261} /* nav */ #nav { width: 400px; margin-left: 0px; margin-right: auto; margin-top: -70px; line-height: 20px; height: 100px; text-align: center; font-size: 12px;} #nav ul {list-style-type: none;} #nav li {display: block; float:left; width: 50px; padding: 40px 20px 40px 25px; border: none; background: url("images/DBlueUp.jpg") no-repeat;} #nav li.page-item-6 {padding: 23px 20px 20px 25px; border: none; background: url("images/PU.jpg") no-repeat;} #nav li.page-item-6.current_page_item {padding: 23px 20px 20px 25px; border: none; background: url("images/PD.jpg") no-repeat;} #nav li.current_page_item {border: none; background: url("images/DBD.jpg") no-repeat;} #nav li.page-item-51 {text-align: center; padding: 20px 25px 20px 20px; border: none; background: url("images/GreenUpCentre.png") no-repeat;} #nav li.page-item-51 a {text-align: center;} #nav li.page-item-51.current_page_item {padding: 20px 25px 20px 15px; border: none; background: url("images/GD.jpg") no-repeat;} /* navright */ #navright { width: 400px; margin-left: auto ; margin-right: 0px ; margin-top: -110px ; line-height: 20px; height: 100px; text-align:center; font-size: 12px;} #navright ul {list-style-type: none;} #navright li {display: block; float:left; width: 50px; padding: 20px 20px 20px 20px; margin: 5px; border: none; background: url("images/LBU.jpg") no-repeat;} #navright li.page-item-2 {border: none; background: url("images/OU.jpg") no-repeat;} #navright li.page-item-2.current_page_item {border: none; background: url("images/OD.jpg") no-repeat;} #navright li.page-item-48.current_page_item {border: none; background: url("images/LBD.jpg") no-repeat;} #navright li.page-item-13 {padding: 20px 20px 40px 20px; border: none; background: url("images/contact.jpg") no-repeat;} div.left-navi-blog { width:255px; margin-right:10px; float:left; } div.left-widget { width:255px; margin-top:40px; background-color:#ffffff; padding-top:1px; padding-bottom:200px; } div#leftbarfooter { background-color:ffff00; height:15px; } div#rightbarfooter { background-image:none; height:15px; } div.center-gauche-area { width:755px; margin-right:10px; float:left; margin-top:-50px; } div.center-blog { width:500px; margin-right:10px; float:left; margin-top:-0px; } div.post-title { visibility: hidden; margin:0px; padding:5px; height:16px; background-color:#FFFFFF; } div.post-content { background-color:#FFFFFF; margin:0px; padding:5px; text-align:center; border-top:#000000 0px solid; border-bottom:#000000 0px solid; } div.post-meta { color:#FFFFFF; margin:0px; padding:4px; height:14px; margin-bottom:10px; background-color: #ffffff; } div.single-meta { border:#444 1px dashed; padding:2px; margin:5px; margin-top:10px; color:#202D32; background-color:#B0BDC5; font-size:10px; } div.main-meta { border:#ccc 1px dashed; padding:2px; margin:5px; margin-top:10px; color:#666; background-color:ddd; font-size:10px; } div.commentblog { background-color:#B0BDC5; margin:0px; padding:5px; text-align:center; border-top:#000000 1px solid; border-bottom:#000000 0px solid; } div.singlecommentborder { float:left; } div.gravatorblog { float:left; width:70px; } div.singlecomment { float:left; width:410px; } div.right-navi-blog { width:200px; float:left; } div.right-widget { margin-top:80px; width:200px; background-color:#ffffff; padding-bottom:4px; padding-right:5px; } div.widget-header { color:#000000; font-weight:bold; padding-left:10px; padding-top:3px; } div.clear { clear: left; margin: 0; padding: 0; height: 0; line-height: 0; font-size: 0; } div#sharebar { margin-right:auto; margin-left:auto; margin-bottom:0px; background:#fff; height:30px; padding:25px; color:#003261; } div.ouplegal { margin-top:0px; background:#cbeefe; height:12px; text-align:center; padding:5px; color:#003261; font-size:10px; } div#footer { margin-top:0px; background:#003261; height:40px; text-align:center; padding-top:20px; color:white; font-size:16px; } div#footer :link {text-decoration:underline} /*--------------------textgestaltung--------------------*/ p{ margin:0px; } h1,h2,h3,h4,h5,h6{ color:#000000; margin:0px; padding:0px; font-size:11px; } acronym, abbr, span.caps { cursor: help; } acronym, abbr { } blockquote { } blockquote cite { } hr { } dl{ } dt{ } dd{ } ul { margin:0px; margin-left:12px; list-style:none; padding-left:8px; } ol{ } li { list-style:square; margin-top:3px; padding-top:2px; padding-bottom:2px; color:#810000; } ul ul{ } blockquote{ } blockquote p{ } code{ } pre{ } b, strong,i,em { } img{ padding:3px; margin:2px; } address { } img.ogtzuq{ border:0px; color:#3B4D56; } /*--------------------linkgestaltung--------------------*/ a {text-decoration:none; color:#FFFFFF; } a:link { text-decoration:none; color:#FFFFFF; } a:visited { text-decoration:none; color:#FFFFFF; } a:link:focus{ } a:link:hover, { font-weight: bold; } .post-content a{ color:#333; } .post-content a:link { color:#333; } .post-content a:visited{ color:#333; } .post-content a:link:active, .post-content a:visited:active{color:#333; } #single-meta a{ color:#333; } #single-meta a:link { color:#333; } #single-meta a:visited{ color:#333; } #single-meta a:link:active, #single-meta a:visited:active{color:#333; } .commentblog a{ color:#333; } .commentblog a:link { color:#333; } .commentblog a:visited{ color:#333; } .commentblog a:link:active, .commentblog a:visited:active{color:#333; } /*--------------------bilder als links--------------------*/ a img{ padding:3px; margin:2px; } a:link img { } a:visited img { } a:link:active img, a:visited:active img { } a:link:hover img, a:visited:hover img { padding:3px; margin:2px; } /*--------------------smilies im text--------------------*/ body img.wp-smiley{ } /*--------------------der weiterlesen link--------------------*/ .more-link{ } /*--------------------die seiten wenn es mehrere gibt--------------------*/ p.serif{ } /*--------------------suche--------------------*/ #searchform{ } input#s{ } input#searchsubmit{ } /*--------------------Kommentare--------------------*/ .alt { } .commentlist { padding:0px; margin:0px; } .nocomments { text-align:center; } .commentlist li { padding:0px; margin:0px; list-style:none; color:#111; } .commentlist cite, .commentlist cite a { } .commentlist p { text-align:center; padding:0px; padding-top:5px; } #commentform p { } .commentmetadata { } #commentform input { border:1px solid #333; margin-bottom:3px; } #commentform textarea { border:1px solid #333; width:488px; } #commentform #submit { } /*--------------------fuer den wp kalender--------------------*/ #wp-calendar th { } #wp-calendar { empty-cells: show; } #wp-calendar #next a { } #wp-calendar #prev a { } #wp-calendar a { } #wp-calendar caption { } #wp-calendar td { } #wp-calendar td.pad:hover { } /*-------------------- widgets---------------------*/ h2.widgettitle{ } .widget { } /*--------------------Archive--------------------*/ li#archives{ } .widget_archives{ } /*--recent posts--*/ li#recent-posts{ } .widget_recent_entries{ } /*--------------------text widget--------------------*/ li.widget_text{ } /*--id haengt von der nummer des text widgets ab*/ li#text-4{ } div.textwidget{ } /*--------------------links blogroll--------------------*/ li#links{ } .widget_links{ } /*--------------------kategorien--------------------*/ li#categories{ } .widget_categories{ } /*-------------------WP Requires------------------*/ .aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignleft { float: left; } .alignright { float: right; } .wp-caption { border: 1px solid #ddd; text-align:center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .wp-caption img { margin: 0; padding: 0; border: 0 none; } .wp-caption-dd { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; } |