hi, i put a circle point before a div by using css ( divname:before), the circle point is showing, but it does not showing correctly in all browsers, i mean not always vertical center aligned that is what i want it to be. Under safari(mac), the point is on bottom, under the others browsers, the point is showing at top, its weird, so my question is how to make it always vertical center aligned? my website is tdever.com Thanks!
well, i think i figured out the problem, the font-size of the circle point was in em, now i changed to px, it looks actually good
Unfortunately that's backwards , the problem wasn't your bullet (call it what it is, • 0x002022) being EM, but your complete lack of setting an explicit line-height on anything. If you had set a consistent line-height when you change the font-size instead of relying on inheritance, you wouldn't have these types of issues. Probably part of why your text all kinda just runs together here in Opera. Oh and some BIG advice, never set a line height the same or smaller than the font-size, that can end up REALLY messed up.
Yeah that's pretty strange too... semantically those are either a list or possibly even a table on some of them. (the ones with dates could semantically be considered tables since the columns are all the same type of data, with the rows being records). Likewise the "title" DIV are obviously some form of heading and as such should be numbered headings, NOT that any of the numbered headings used on the page make the least bit of sense either. Of course that goes hand in hand with all the other outdated/outmoded markup methods present on the page -- it's like Dan Schulz said shortly before he passed, the people who wrapped endless nested tables around each-other for nothing just wrap endless DIV around things for nothing, net improvement zero. (He meant 'net' as in 'total')... and I append to that today that people just slap endless pointless HTML 5 tags around them to in the same nonsensical waste of time manner. God forbid anyone just use semantic markup. I mean, take this: <div class="block"> <div class="thead"> <h3>Web Development Tutorials</h3> <span class="more m_nodisplay"><a href="/tutorials.php">[more]</a></span> <div class="clear"></div> </div> <div class="titleTuto"><a href="/tutorials.php?cate=CSS">[CSS]</a> <a href="/viewtuto.php?id=84">How to use a not standardized font on a website</a></div><div style="clear:both"></div><div class="titleTuto"><a href="/tutorials.php?cate=PHP">[PHP]</a> <a href="/viewtuto.php?id=83">Handle MySql errors in PHP without or die</a></div><div style="clear:both"></div><div class="titleTuto"><a href="/tutorials.php?cate=HTML">[HTML]</a> <a href="/viewtuto.php?id=82">HTML5 Boilerplate, a powerful and complete template</a></div><div style="clear:both"></div><div class="titleTuto"><a href="/tutorials.php?cate=HTML">[HTML]</a> <a href="/viewtuto.php?id=81">How to specify the language of content in HTML?</a></div><div style="clear:both"></div><div class="titleTuto"><a href="/tutorials.php?cate=HTML">[HTML]</a> <a href="/viewtuto.php?id=80">HTML conditional classes for Internet Explorer browser</a></div><div style="clear:both"></div><div class="titleTuto"><a href="/tutorials.php?cate=HTML">[HTML]</a> <a href="/viewtuto.php?id=79">Add an icon for iPhone / iPod Touch / iPad</a></div><div style="clear:both"></div><div class="titleTuto"><a href="/tutorials.php?cate=PHP">[PHP]</a> <a href="/viewtuto.php?id=78">PDO (PHP data objects): Database access interface</a></div><div style="clear:both"></div><div class="titleTuto"><a href="/tutorials.php?cate=DESIGN">[DESIGN]</a> <a href="/viewtuto.php?id=77">The right tools to create your website</a></div><div style="clear:both"></div><div class="titleTuto"><a href="/tutorials.php?cate=MOBILE">[MOBILE]</a> <a href="/viewtuto.php?id=76">Mobile Web: introduction and glossary</a></div><div style="clear:both"></div><div class="titleTuto"><a href="/tutorials.php?cate=MOBILE">[MOBILE]</a> <a href="/viewtuto.php?id=74">Viewport: farewell width = device-width?</a></div><div style="clear:both"></div><div class="titleTuto"><a href="/tutorials.php?cate=MOBILE">[MOBILE]</a> <a href="/viewtuto.php?id=73">Tools for the mobile web development</a></div><div style="clear:both"></div><div class="titleTuto"><a href="/tutorials.php?cate=JS">[JS]</a> <a href="/viewtuto.php?id=72">Use the JavaScript console on browsers</a></div><div style="clear:both"></div> </div> Code (markup): DIV provides no semantic meaning, so basically you have a endless run-on sentence of anchors. Clearing DIV for nothing, a H3 that is NOT the start of a subsection of a h2 before it since THERE ARE NO H2's BEFORE IT! NOT that you're H1 makes any sense either since I very much doubt that any of these H3 are subsections of that either -- and that's what numbered headings MEAN (and why HTML 5's NAV and SECTION tags are pointless BS if people would just use headings for what they mean), even the '[more]' anchors are uselessly vague and bad from both an accessibility and a SEO standpoint! <div class="subSection"> <h2> <a href="/tutorials.php">Web Development Tutorials</a> </h2> <ul class="linkList"> <li> <a href="/tutorials.php?cate=CSS">CSS</a> <a href="/viewtuto.php?id=84">How to use a not standardized font on a website</a> </li><li> <a href="/tutorials.php?cate=PHP">PHP</a> <a href="/viewtuto.php?id=83">Handle MySql errors in PHP without or die</a> </li><li> <a href="/tutorials.php?cate=HTML">HTML</a> <a href="/viewtuto.php?id=82">HTML5 Boilerplate, a powerful and complete template</a> </li><li> <a href="/tutorials.php?cate=HTML">HTML</a> <a href="/viewtuto.php?id=81">How to specify the language of content in HTML?</a> </li><li> <a href="/tutorials.php?cate=HTML">HTML</a> <a href="/viewtuto.php?id=80">HTML conditional classes for Internet Explorer browser</a> </li><li> <a href="/tutorials.php?cate=HTML">HTML</a> <a href="/viewtuto.php?id=79">Add an icon for iPhone / iPod Touch / iPad</a> </li><li> <a href="/tutorials.php?cate=PHP">PHP</a> <a href="/viewtuto.php?id=78">PDO (PHP data objects): Database access interface</a> </li><li> <a href="/tutorials.php?cate=DESIGN">DESIGN</a> <a href="/viewtuto.php?id=77">The right tools to create your website</a> </li><li> <a href="/tutorials.php?cate=MOBILE">MOBILE</a> <a href="/viewtuto.php?id=76">Mobile Web: introduction and glossary</a> </li><li> <a href="/tutorials.php?cate=MOBILE">MOBILE</a> <a href="/viewtuto.php?id=74">Viewport: farewell width = device-width?</a> </li><li> <a href="/tutorials.php?cate=MOBILE">MOBILE</a> <a href="/viewtuto.php?id=73">Tools for the mobile web development</a> </li><li> <a href="/tutorials.php?cate=JS">JS</a> <a href="/viewtuto.php?id=72">Use the JavaScript console on browsers</a> </li> </ul> <!-- .subSection --></div> Code (markup): Is how I'd be approaching that same item in roughly three quarters the markup-- though I'd probably float:right the a:first-child in the LI so the 'categories' all line up and the important part -- the article title, appears FIRST, and either add the brackets with generated content or style them as buttons or some such. I'd even consider making that a table so you have column headings (TH inside THEAD with SCOPE) to explain what those columns mean. That's called semantic markup -- saying what things ARE. DIV do not say what things are, and should only be used as styling hooks or as a means to group multiple semantic elements for styling. I suspect that's where you're messing up on your h1/h3 usage as it seems you were choosing them based on default appearance, not their meaning -- and again if you choose your tags based on what they look like, you are most likely choosing the wrong tags for all the wrong meanings. ... and that even applies to DIV. You seem to be wrapping DIV around tags that don't need DIV around them -- as if lists and headings aren't perfectly good block level containers in their own right. MIND YOU -- that's a very common mistake to the point it's pretty much accepted practice; still doesn't make it right.
DS, thanks you so much for you reply your guys are so right, its an bad idea to use div is this case, right solution is what DS suggested, and i adopted it on my website, it looks much better now. i am still learning css and html, well said from you, i need to pay more attention on choosing right tag and understand the real meaning of each tag. yes i think you are right, changing em to px is not a good idea DS, can you explain more about the explicit line-height theory, i don't get it, and i feel i am doing something wrong on that point. p.s, to Deathshadow, you are a real pro, and hoping for more advices from you !
Pretty much it means to restate your line-height EVERY time you change font-size... I even go so far as to say restate the entire font stack when you change size because the difference between: font-size:125%; line-height:120%; and font:normal 125%/120% arial,helvetica,sans-serif; is so small as to make no never mind. The reason for always stating it is that line-height is fixed based on the element it's declare on, NOT the value of any child elements, even when set to inherit. A page I wrote about a decade ago shows this, along with explaining how all the different browsers react to the different metrics you can use for font-size. http://battletech.hopto.org/html_tutorials/fontCompare/template.html The example in question is this: <div id="linkHeights"> <div class="test1"> Test </div> <div class="test2"> Test </div> </div> Code (markup): with this CSS: #linkHeights { font-size:20px; line-height:200%; } #linkHeights div { font-size:14px; background:#CCC; } #linkHeights .test2 { line-height:200%; background:#EEE; } Code (markup): BOTH div have the same font size... both div should be getting 200% line-height since 200% is declared on both the outer div -- but only test2 gets 28px of line-height because it's the one it's explicitly declared on. The first inner DIV gets 40px despite it's font-size being 14px and the line-height being 200%, because of the goofy way line-height is inherited from #linkHeights. There is this noodle-doodle BS where people say you can omit the 'metric' (%/em/px/pt/etc) and just say: line-height:1.2; ... and it will inherit as expected. While this works in FF and that's it, IE, Opera and Webkit browsers can make a right mess of it -- it's unreliable, unpredictable, and to be frank just doesn't work cross browser at different system metrics; the sad part is the advocates of this broken half-assed idiotic techniques - like some of the folks over at Sitepoint - refuse to believe it doesn't work no matter how many screencaps you show them of their pages being broken. (Part of why I'm no longer welcome over there and have no use for any of their staffers/advisors anymore as they're all drooling retards and thin skinned wussies more interested in making everyone 'feel good' than in fixing anything) Gets really bad when they go "Oh, that's an old page" when the ONLY thing broken is line-heights due to their failing to explicitly state line-height on font size changes and trying to omit the metric to get a multiplier -- meaning it's broken everywhere else they try and use it! So bottom line, you change the font-size, you change the line-height. ALWAYS. Pretty simple... and if you say the full condensed property with the font-family stack, you can always tell exactly what's being set for an element, at the cost of maybe 10 extra characters per font-size declaration. To be frank, if you have more than five or six font-size declarations in your entire stylesheet, it's likely you're doing something wrong. But then I watch other developers declare font-sizes and laugh... 90%+ of the text on your page should probably all be the same size, why people insist on changing font sizes with the frequency of a cheap AM radio is beyond me. Set what's used on most of the page once on BODY, make the headings you are using the appropriate sizes and weights, set any text under image replacements or that have an image interaction as needed, DONE! A lot of folks seem to turn it into rocket science by declaring font-size on EVERYTHING... But then most folks seem to wrap extra div around EVERYTHING for no reason and slap multiple classes on everything for no reason so...