|
CSS - Do Not Use * Html With Pseudos!
Warning: if you're using the popular * html hack for ie-only rules, be awa this hack does not work with the ::first-letter pseudoelement and perhaps not with any pseudoclasses or pseudoelements!
Similar TutorialsHi, I would like to make a html 'button' tag of 'submit' type look and behave like a html hyperlink. (For those who would be curious, the reason is that I want to pass a variable to the target script, using the post method rather than appending a name-value pair to the hyperlink url, while keeping a conventional presentation. In the end, it should make the passed variable less visible for the end user, except of course if they look at the source code and look for a hidden input). I considered to use the CSS2 system colors codes, but I did not find a code for hyperlink, and anyway, system colors will be deprecated in CSS3, so it is no good idea if I want to make my pages portable in the far future. I tried to use the appearance property from CSS3, but it does not seem to be wel implemented yet in current browsers. For now, I just styled my html button, removing border, and setting the background and foreground colors to something similar to an hyperlink, but then I have no guarantee that this will match the actual look & feel in the end user's browser. Any hint or suggestion ? Hey guys. I am having trouble getting a column to go the full length of the page. Here is a link to the page http://www.tjshafer.com/projects/ca...me/subpage.html I have marked in the page where the table is that should have a height of 100%. Also here is the section that needs to be 100%. This is the td which has the code in it, Code: <td id="leftcell" valign="top" height="100%"> <!--begin table for menu which includes background--> <table border="0" cellspacing="0" id="menucell"><tr><td width="247" valign="top"> <!--begin menu table--> <table cellspacing="0" id="menuitems" border="0" width="159"> <tr><td> </td><td id="menuheader" align="left" width="159" style="line-height:12px"> <br>CONTEMPORARY<img src="images/menu_underline.gif" width="159" height="1" alt="menu cell bg"><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Sofas & Chairs</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot" border="0"> Casual Dining & Bar Stools</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Bedroom</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Home Entertainment</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Home Office</a><br><br> WICKER & RATTON<img src="images/menu_underline.gif" width="159" height="1" alt="menu cell bg"><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Sofas & Chairs</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Dining</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Bedroom</a><br><br> OUTDOOR<img src="images/menu_underline.gif" width="159" height="1" alt="menu cell bg"><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Aluminum</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Cast Aluminum</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Wrought Iron</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> All Weather Wicker</a><br> <a href="test.html"><img src="images/ul_dot.gif" width="9" height="9" alt="menu item dot"border="0"> Wood</a></td> </tr> </table> <!--end menu table--> </td></tr></table> <!--end table which includes background--> </td> I tried adding height="100%" everywhere i could think. Any help would be greatly appreciated. Im not certain whether or not this is an HTML or CSS problem, or if its just a bug i will have to live with. I cannot for love nor money get IE6 to use my specified link colors... ---------FROM MY CSS SHEET--------------------- a:link { font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; color : #FFCC33 ; } a:active { font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; color : #FFCC33 ; } a:visited { font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; color : #FFCC33 ; } A:hover { background-color: #FFCC33 ; color : #000000 ; font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; } a:hover img { background-color: #000000; } A:link.noback { font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; color : #000000 ; } A:active.noback { font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; color : #000000 ; background-color: #000000 } A:visited.noback { font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; color : #000000 ; } A:hover.noback { color : #000000 ; background-color : #000000 ; font-family : Trebuchet ; font-weight : normal ; font-style : normal ; text-decoration : none ; font-variant : normal ; font-size : 10pt ; } in Firefox, this is all displayed as I want it to be, but in IE6, I get pants defaults. I have been able to remove the initial color by adding <Body link="000000"> to the body, but, that doesnt seem like a complete solution. I have spent all morning at work (nice job i know) trying to figure this out, and have had no joy... I bow to the infinate wisdom of the masses. hey guys i didnt know what to do so came here to ask im making just one web page, i have done all the coding and everything is set it works fine in Firefox and works fine with IE7 and IE8.... but i am having problems with the page when i open with IE6 help would be appreciated as a new user i cannot add webpage link anyone who is interested to help i can PM them the webpage or here im adding webpage hope i dont get banned for this linux103.mysite4now.net/desimafia/test2/tvshows.htm view it in IE6 and you will know the problem thanks Hello, I am beginning to venture into the world css and must say I really like it. I am curious about something though. A lot is eluded to insofar as the replacement of tables in html using positioning with css. Are tables bad for some reason? I am very curious as to this issue. how would i convert: <table border="1" cellspacing="0" style="border-collapse: collapse; text-align: left; border-style: ridge; margin: 0; padding: 0" bordercolor="#111111" width="779" id="table3"> <tr> <td width="649"><font face="Small Fonts" color="#666666" style="font-size: 20pt"> <img border="0" src="Banner1.jpg" width="649" height="92"></font></td> <td width="174"><font face="Small Fonts" color="#666666" style="font-size: 20pt"> <img border="0" src="Banner2.jpg" width="167" height="92"></font></td> </tr> </table> to simple CSS code? I tried doing that all in one style and nothing worked! Because these are difficult issues to resolve from W3C documentation, I thought I'd post my notes on printing for HTML (which apply likewise to saving HTML as PDF, etc., or loading HTML pages into further client applications, to be saved as other formats): In printing HTML output, user agents ("browsers") will not honor usual CSS code, dedicated to screen output. Similarly, functions such as loading an HTML file into a document editor or saving an HTML page to PDF will not honor screen-dedicated CSS, either. Browsers are not equipped for instance with logic to determine whether to discard left and right margins or padding, surrounding the usual web page. Similarly, some content may be undesirable to print, as is. Images for instance may need to be scaled to a different size; font-sizes and weights may need to be adjusted, and so forth. The whole trick to accommodating the separate needs of screen and print output is to deploy separate media-specific ("screen"/"print") style sheets. When you save an HTML page as PDF, or when you load an HTML page into a document, the client application honors the CSS of the "print"-specific implementation. ------------------------------------------------- LINKING IN SEPARATE CSS FILES: For printing and file conversion functions to honor CSS, you have to link in media-specific style sheets as follows (media="screen" and media="print"): <head> <link href="css-pfmpe.css" type="text/css"rel="stylesheet" media="screen" /> <link href="css-pfmpe-print.css" type="text/css"rel="stylesheet" media="print" /> </head> ------------------------------------------------- ENCLOSURE OF MEDIA-SPECIFIC CSS CODE IN EACH FILE: All the CSS declarations of your "screen" style sheet (css-pfmpe.css) must be enclosed as follows: @media screen { /* all css code here */ } All the CSS declarations of your "print" style sheet (css-pfmpe-print.css) must be enclosed as follows: @media print { /* all css code here */ } ------------------------------------------------- GENERAL APPROACH TO MODIFYING THE PRINT-SPECIFIC CSS FILE: Assuming you have refined your screen-specific CSS to intended behavior, you would generally save a separate, further copy of your "screen" style sheet as the latter "print" implementation. You would then change the top "@media screen" expression to read instead, "@media print." The general focus of modification within the print-specific CSS file is as follows: 1. Eliminating outer, left and right margins or padding from exterior (enclosing) block constructs (within which your further block constructs are displayed). This reduces the left and right margins to default printing or file conversion values (which you may have no control over, even in the client application's preferences/settings). A screen-specific CSS implementation for instance will generally limit itself to some column width which, when/if printed, may result in huge left and right page margins. These are reduced by your modifications of the print-specific CSS, so that paper is used to best advantage. 2. Re-scaling fonts. Owing to translation differences, screen fonts are generally too large for printed media. Depending on the screen sizes you display, you may: a. determine a general scaling factor to apply to your font-size specifications; b. and manually apply that scale to converted font-size specifications. 3. Re-scaling images. You will generally want to apply a manually calculated scale to your images as well. a. This means that standard images (used in many pages for instance) may require separate image-specific styles, indicating size; and that height and width specifications must be avoided in scaled images, in your HTML markup. 4. Indicating page break preferences. Print-specific page break specifications (not needed in your screen CSS) indicate whether page breaks can be inserted before, after or within block content. 5. Indicating whether to print content. Content which you don't want/need to be printed can be marked, "display: none;". ------------------------------------------------- TYPICAL CHANGES IN EACH PRINT-SPECIFIC CSS FILE: The general manner of addressing each concern is: 1. Eliminating outer, left and right margins or padding from exterior (enclosing) block constructs (within which your further block constructs are displayed). a. Follow a pattern of engineering with an outer enclosing block, determining either margins or padding, and/or width of the outer block. b. Set the margins or padding to 0, and/or the width to 100% in the print-specific CSS. 2. Re-scaling fonts. a. Determine a general scaling factor to apply to your font-size specifications. For instance, if your screen output declares a font-size of 17px for a given style class, and experiments determine that the desirable size ratio for print output is 11px, open your calculator, enter "11," divide by "17," store the result (ratio) in memory, and multiply your further font-sizes by the ratio to get resultant sizes. You will discover a minimum size in this process. If the answer is less than the minimum, apply the minimum instead. b. Once you have calculated each scaled font-size, use global search-and-replace, starting with the smallest sizes to convert, and progressing to the larger. This will avoid double-processing errors (modifying the result of previous scaling, versus your intention to scale only unscaled declarations. 3. Re-scaling images. a. Apply image-specific styles, indicating height and width in the style declaration. Scale height, width and margins as needed for print output. 4. Indicating page break preferences. Print-specific page break specifications (not needed in your screen CSS) indicate whether page breaks can be inserted before, after or within block content. These declarations are generally made for the base style, so that properties are inherited to subclasses (where exceptions can be declared, if desirable): a. HEADINGS - TITLES, SUBTITLES Break before, but not within, nor after (next paragraph sticks to title, or title breaks off to next page with succeeding paragraph). hx.MyStyle or p.MyStyle { page-break-after: avoid; page-break-befo auto; page-break-inside: avoid; } b. IMAGE Break before or after, but never within image. img { page-break-after: auto; page-break-befo auto; page-break-inside: avoid; } c. LIST ITEM Break before, after, or within (but not in area occupied by image). li { page-break-after: auto; page-break-befo auto; page-break-inside: auto; } d. PARAGRAPH Break before, after, or within (but not in area occupied by image). p { page-break-after: auto; page-break-befo auto; page-break-inside: auto; } 5. Indicating whether to print content. a. Content which you don't want/need to be printed can be marked: BaseClass or BaseClass.Subclass { display: none; } Typical objects of this treatment for instance might be RSS subscription links. ------------------------------------------------- PRINTING BACKGROUND COLORS OR IMAGES: Note that according to W3C standards, printing of background colors or images is optional to the end user; and that by default, each are disabled in printer configuration options. It may be desirable to enable background colors or images for saving an HTML page to PDF for instance, while it may be undesirable for printed output (owing perhaps to vast consumption of ink). To enable either for a particular purpose, access your printer preferences. Alright, this has to be the most annoying thing I've ever dealt with in any sort of anything. According to w3schools, and a few threads I read here trying to find my problem, you link your HTML and CSS files by using <head> <link ref="stylesheet" type="text/css" href="file.css" /> </head> Or, you can use internal styling with <head> <style> (code) </style> </head> Well, linking doesn't work. Using Dreamweaver, when I enter href= I get the option to browse to the file. I do so, and I open the .CSS file from there. So I know I'm getting the exact location of the .CSS file. However, when I use <style> , it works fine. If I copy and paste the code in the .CSS file and paste it between <style> tags, then the page works fine. What the heck? Hello all, First time poster here...hoping to find some answers! I think this is a pretty common issue so I'll be brief. I have a header that is currently coded in HTML (with tables), and I want to convert it to CSS. Of course I need to do this with my entire site, but I figure the header will be a good place to start. This is what I need to convert to CSS: eyemagic.net/zc_header4.htm Thank you for your help! -Dave I am having trouble getting my published file to be centered in a browser window. below is the code I am using. Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>index</title>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
</head>
<body bgcolor="#000000">
<!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<script language="javascript">
if (AC_FL_RunContent == 0) {
alert("This page requires AC_RunActiveContent.js.");
} else {
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
'width', '800',
'height', '600',
'src', 'index',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'index',
'bgcolor', '#000000',
'name', 'index',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'index',
'salign', ''
); //end AC code
}
</script>
<noscript>
<div align="center">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="800" height="600" id="index" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="index.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /> <embed src="index.swf" quality="high" bgcolor="#000000" width="800" height="600" name="index" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
</noscript>
</body>
</html>
anyone know of a good resource site/s for creating css/html div/layers/template ? Are the HTML tags, <style></style>, in the CSS file? Why do you have two separate body sectors in your CSS? Just put them into one. Hello, I have two designs that I am unsure of on how to get to work. I need to transfer a friends design over to css and html and can do everything except the below two issues. The first one is in a menu. I would like to get the selected option sticking out higher than the rest. You can see what I need in the picture below. The second one is in the below picture. I would like the icon to be sticking out of the box header. I know how to make the box fine with the rounded corners and such but the only thing I dont know is the icon part. Any ideas? Thanks I'm having issues with the HTML/CSS, only in IE, on the following page: http://www.datamonkeys.co.uk/webmail/webmail/log_in.php It looks ok in FF....It has something to do with the absolute/relative positioning, i think.... can anyone help me out here? thanks.. I am not sure if something like the attached should be put in an html table or done with css positioning. Any thoughts? Is there coding that can be added into a stylesheet so that when a <div> tag is used in an HTML document, it will display HTML information (tables, images, hyperlinked text, centering, etc.) from the stylesheet in the HTML document that is linked to that stylesheet? Meaning: If I wanted a single-row table, divided into two columns: one column with plain text, another with hyperlinked text to pages throughout my website (including pages in subfolders) to appear on every page that has a link to the stylesheet. This way, I could have the same table, text, and hyperlinks appear on any page that has the DIV tag placed (ie: <div id="idlabel"></div>) I wanted this so that if I need to update those links, I can do it globally by changing the stylesheet, and not having to go to each page individually. I don't know how to code, nor have a server that can use, ASP or PHP. Can CSS be used to "dynamically" update webpages, just as you can change fonts, spans, indents, text/image placement, etc. globally by changing the stylesheet? Also, if the HTML is possible, can a graphical, Flash, or JavaScript/Form drop-down menu also be handled in the same way? Hi, Does anyone knows how i can have css style in the body. The whole coding part should be in the body. I need show link which have the same propertise in a PHP code and I am just editing it. I am trying to work it around this way. I juts want to have link to another page with different font and font folor change when hover. Can someone show me how i can do this. I am new to css. Please help me. Available immediately for short and long contract jobs. I can offer: - Very quick work, can meet a very short deadline. - Flexable pricing, offering better rates than most. - Willing to complete a project for a set budget amount rather than hourly. - Can complete complex ASP programs as well as design and layout work - Over 8+ years development experience. E-mail: ann_droi at yahoo.com AIM: anndr0id Web: http://www.veinmedia.com "Fluent" in: HTML, XHTML, XML, CSS, DHTML, JavaScript, ASP, VBScript, ColdFusion I've been having lots of trouble getting CSS to do autostretching as well as HTML. Is HTML still the #1 choice for autostretching as of now? Are there any tutorials on CSS autostreching? Thanks. |
|||||||