CSS - Letter-spacing In Chrome
I look after a website whose stylesheet includes the instruction
p, ul, li { font-size: 12px; letter-spacing: 0.15em; padding-bottom: 1em; } This is interpreted as intended by IE and FF. However, Google Chrome appears to ignore the instruction. I'm not allowed to post a URL here, but if you search Google for "Stile Antico", you'll find the site as the first result, and then click on "The Group" for a page with plenty of body text. I've experimented for different values of the letter-spacing property, with mixed results; at 0.2em, Chrome gets it right (but this is aesthetically not good for me). I suspect there may be an issue with rounding/decimal places - but even so, that wouldn't explain why Chrome ignores 0.15em, rather than rounding it to the nearest usable value. Can anyone shed any light? I can't find a good workaround; I want to keep things expressed in relative units if possible. Thanks in advance for any help Andrew Similar TutorialsDue to letter-spacing double break won't work in IE. And triple break works as it is double break. How to solve this problem? Why can't I get this to work on the first letter - #maincontent { float: right; top: 100px; width:638px; margin-left:132px; height:500px; clear:right; position: absolute; background-repeat: no-repeat; border: 0px solid purple; text-align:left; padding-top:0px; } #maincontent H1{ display:block; width:auto; border: 0px solid purple; text-align:center; margin-top:20px; margin-bottom:40px; color:#000066; font-size:16px; } #maincontent P{ width:80%; margin-left:10%; margin-right:10%; display:block; background-repeat: no-repeat; border: 0px solid purple; text-align:justify; padding-top:0px; color:#08207B; } #maincontent P img{ border: 2px solid #08207B; float:left; margin-right:5px; margin-bottom:0px; } #maincontent P:First-Letter{ color:red; font-size:24px; } Everything else works fine... Hi everyone. I would like to change the first letter of an h2 tag thats NOT in a span in the following chunk of code Code: <h2> <span class="subtleHeader">Saskatoon, Regina and Edmonton's</span><br> WEB DESIGN EXPERTS </h2> So in this example I want to change the W. yes I can change the dom, but I'm very very lazy and have this DOM structure in many places and was wondering if there was a css way to do it. Thanks I'm attempting to display a first-letter style to my h1 tags, which has until now been a simple task. Everything was working fine until I made my h1 style display inline to remove the autyomatic line-break. Now my first letter style doesn't work. This happens on both Firefox and IE. code is thus: h1 { font-size:13pt; color:#2E3192; font-family:verdana, arial, sans-serif; font-weight:bold; display:inline; } h1:first-letter { font-style:italic; color:#CC6600; } Can anyone shed any light on this problem? I read somewhere that we can format the first letter of each paragraph separately from the rest of it by CSS. Is possible and how? Do you guys know if there is any way to change the style of only the first letter in a paragraph? For example: "The duck is dead and it can't come back to life." The letter T would get an effect such as switch of baseline, color, bgcolor and indentation. How is this possible without having to add a class to that particular first letter all the time. I am using this in a weblog system so it would need to be added in a template. Any help? Thanks! I want to do something like: Submit but i dont know how to do it? i tried doing input value ="<span style="AK">S</span>ubmit" /> but it doesnt work.... Hi, Tried using Pseudo Elements to set style property for first character (first-letter) and first line (first-line) inside an element. Every thing works fine when we set such styles on div or table elements, but failed on anchor tags Working on Code: <style> div:first-letter{font-weight: bold;} </style> <div> Pseudo Div<br> Line Two<br> Line Three<br> </div> Failed On Code: <style> a:first-letter{font-weight: bold;} </style> <a href=""> Pseudo Div<br> Line Two<br> Line Three<br> </a> Can anyone give me the solution for this. Thanks in advance! I am new to doing layouts in CSS and have a page (on an existing site) that I just did using CSS. The problem that I am having is that the "content" div has unwanted space above and below the div. I have padding & margins set to zero for the content div. Page is he http://www.prairieplugs.com/Sample1/sample1.htmlhttp://www.prairieplugs.com/Sample1/sample1.html CSS is he http://www.prairieplugs.com/Sample1...ieplugscss1.css Below is the CSS that is applicable: Code: body { margin: 0px; padding: 0px; font-family: Verdana, Geneva, sans-serif; font-size: .9em; color: #000; background-color: #008F13; background-image: url(images/bgbottom.jpg); background-repeat: repeat-x; background-position: bottom; background-attachment: fixed; } #wrapper { width: 900px; margin-right: auto; margin-left: auto; padding-top: 15px; } #wrapper #header { background-image: url(images/headerSamp1.jpg); margin: 0px; padding: 0px; height: 276px; background-repeat: no-repeat; } #wrapper #nav { background-color: #FFF; background-image: url(images/navSamp1.jpg); background-repeat: no-repeat; height: 60px; width: 900px; margin: 0px; padding: 0px; text-align: center; } #wrapper #content { background-image: url(images/contentSamp1.jpg); background-repeat: repeat-y; margin: 0px; width: 900px; background-color: #FFF; padding: 0px; } #wrapper #footer { font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; background-repeat: no-repeat; height: 79px; background-color: #FFF; background-image: url(images/footerSamp1.jpg); margin: 0px; padding: 0px; } #wrapper #nav ul { margin: 0px; list-style-type: none; text-align: center; padding-top: 20px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: #060; } #wrapper #footer p { text-align: center; margin: 0px; padding-top: 25px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } #wrapper #nav ul li { display: inline; border-right-width: 3px; border-right-style: solid; border-right-color: #000; font-size: 1.2em; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold; font-variant: small-caps; padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; } #wrapper #nav ul li.last { border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } #wrapper #nav ul li a:visited { text-decoration: none; } #wrapper #nav ul li a:hover { color: #000; text-decoration: underline; } #wrapper #nav ul li a { text-decoration: none; color: #FFF; } #wrapper #content p { font-family: Tahoma, Geneva, sans-serif; font-size: 1em; text-align: left; padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 15px; } Hi Guys I am having trouble trying to work out a bug that is creating a space between two div containers. To see what i mean click here for web page the css can be viewed here in firefox the two containers appear correctly but in internet explorer there is a 10px space between them. Could it have something to do with the background images? The div containing the login form also drops down in ie and i am convinced this is related to the main problem i am facing. Does anyone have any ideas as to what the problem is. Any help would be much appreciated! Thanks for taking the time to read my question. The contents in my .ContentContainer are positioned differently in IE6 and FF. I want them to look like FF. What is wrong with my CSS that makes IE6 have more space on the left side of the green globe than FF? My goal is to have the 2 blue vertical lines line up. They line up in FF and IE7, but not in IE6. www.scopicdesigns.com/ZoneAll/index.htm Thanks, Brad I have a drop down menu that works great in Chrome but in IE 9 I am getting spaces between my images for my navigation bar. My HTML is as follows... HTML Code: <ul id="nav"> <li><a href="#"><img src="../../images/global/header/home_btn.jpg" width="77" height="29" border="0" /></a> <ul> <li><a href="#" style="color:#000;">About Asthma</a></li> <li><a href="#" style="color:#000;">Treatment</a></li> <li><a href="#" style="color:#000;">Taking Control</a></li> <li><a href="#" style="color:#000;">Lifestyle</a></li> <li><a href="#" style="color:#000;">Resources & Support</a></li> </ul></li> <li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li> <li><a href="#"><img src="../../images/global/header/kids_btn.jpg" width="66" height="29" border="0" /></a></li> <li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li> <li><a href="#"><img src="../../images/global/header/allergy_btn.jpg" width="67" height="29" border="0" /></a></li> <li><img src="../../images/global/header/spacer01.jpg" width="17" height="29" border="0" /></li> </ul></li></ul> I have tried everything in my CSS to eliminate the spacing between the image files with no luck. Does anyone see what I am doing wrong here? Hello All, I wanted to ask a question. I'm having trouble with spacing between two divs. Here's the site I'm working on: johnraymondonline.com/mjbfoundation/ The problem is that I'm trying to put a 20pixel margin between the bottom footer div (that contains "test test") and the div just above it. I'm not having much luck at all. I've done a clear and also have checked the divs several times to see if I've missed any. I've even put a div between with some height and that doesn't work. I'm not sure if one of the div's above it has a fixed height. Any help would be greatly appreciated! Thanks! Hi there, we have created the following list menu and we want to reduce the space between the left hand page margin, and the disc, at the 1st part of the text closer. Example: This is what we see now. | Text Here Example: This is what we would like to see. | Text Here Any suggestions? ul a, li a{ margin:0; padding:0; } This is my first time ever working with CSS. I am trying to put together a site; however, I am havings some setbacks straight out of the gate. I am trying to get the navigation bar to align up against the header. How do I eliminate the spacing between the header and the navigation bar? I have tried the padding: 0; method with no luck. PLEASE HELP! This is starting to bug me this problem, but on my site www.readinginfo.co.uk the background image (inner shadow and small gradient) at the top is playing up. It doesn't seem to want to align all the way over to the left, however as is always the way, it is working in firefox, ie7, 8 and safari. I've tried some of the ie6 fixes mentioned but I have the sneakiest of feelings that it is to do with the form element (the search box), positioning absolutely just bumps it over to the side. Thanks in advance for any reply!! On this page: http://www.poweredpages.com/newtarget/ctia/ there's an spacing problem in IE. Hover over one of the links on the main bar to get the sub link tray. Hover over the first two links in a vertical set, and it will work fine. Hover over the THIRD link, and in that link and any link below it there's extra padding on the top of it. But all these links have the exact same CSS associated with them. Very odd. Works fine in FF. Here's the code and the CSS: Code: <div id="showtray" class="tray" onmouseout="hide('showtray','linkinfo')" onmouseover="show('showtray','linkinfo')"> <div class="traynav"> <ul> <li><a href="/info/">General Information</a></li> <li><a href="/info/registration_packages.cfm">Registration Prices & Policies</a></li> <li><a href="/info/keynote_sessions.cfm">Keynote Sessions</a></li> <li><a href="/exhibit/">Exhibit Floor</a></li> <li><a href="/info/ed_sessions.cfm">CTIA Educational Sessions</a></li> </ul> </div> <!-- 5 links to a column ONLY! Any more and start a new column, lke this one --> <div class="traynav"> <ul> <li><a href="/info/seminars.cfm">Partner Seminars</a></li> <li><a href="/info/green.cfm">Green Practices</a></li> <li><a href="http://www.ctia.org/conventions_events/convinfo/info.cfm">Receive Information</a></li> <li><a href="/info/international.cfm">International Guests</a></li> </ul> </div> <div class="trayimage whitetext smalltext"><img src="images/show.jpg"><br />Stars of the Show</div> </div> Code: .tray{ position:absolute; z-index:500; top:30px; left:0px; visibility:hidden; background-image:url(../images/blackback.png); width:920px; height:130px; border-bottom:3px solid #4CADCE; padding:20px } .traynav{ float:left; padding-right:15px; } .traynav ul{ margin: 0px; list-style-type: none; padding: 0px; clear: both; font-family:Arial, Helvetica, sans-serif; font-size:11px; border-top: 1px dotted #c2dae2; } .traynav ul li{ list-style-type: none; padding: 0px; clear: both; border-bottom: 1px dotted #c2dae2; font-size:11px; margin:0px; width:200px } .traynav li a:link, .traynav li a:visited { color: #FFFFFF; display: block; background-image: url(../images/arrow_orange.gif); background-position: 4px 7px; background-repeat: no-repeat; padding-top: 5px; padding-right: 8px; padding-bottom: 5px; padding-left: 15px; text-decoration: none; } .traynav li a:hover, .traynav li a:active { background-color:#4cadcf; } .trayimage{ float:left } .trayimage img{ border: 1px dotted #c2dae2; } Thanks In IE, there is a space between my div's. Can someone help me fix it? Attached is a sample htm and graphics or see he PHP Code: <div id="red" align="center"> <img src="red.gif" width="500" height="100"> </div> <div id="blue" align="center"> <img src="blue.gif" width="500" height="100"> </div> Thanks. Code: #pics { margin:0; padding:0; background:#fff; } #pics ul{ margin:0; padding:0; list-style:none; } #pics ul img{ margin:0; padding:0; border-style: solid; border-color: #27076A; border-width: thin; } #pics li{ display:inline; margin:0; padding:0; } <div id="pics"> <ul> <li><img src="images/1.jpg"></li> <li><img src="images/2.jpg"></li> <li><img src="images/3.jpg"></li> <li><img src="images/4.jpg"></li> <li><img src="images/5.jpg"></li> <li><img src="images/6.jpg"></li> </ul> </div> The code above puts pics next to each other but width spaces inbetween them. I got margin and padding set to 0 and cant see why there spaces inbetween them. Am I missing something? |