|
CSS - Using Comments To Hide Definitions
I've heard that there is a way to use comments in CSS that make certain definitions invisible to certain browsers. Is this true. If so, where can I learn more about this? What are the down sides?
Similar TutorialsHi there, Was wondering if anyone had a solution with what I am trying to achieve if at all possible. I've been playing with a drop down that opens onclick with pure css. What I am trying to accomplish to have the dropdown close automatically when pointer is not on the dropdown menu. I know this is possible with jQuery but get this, I am trying to accomplish this in pure css. My code is below which is pure css which again works onclick to open the 2nd tab. Again, I am trying to achieve an automatic close behavior such as with a hover but not by using the hover class or javascript. <!doctype html> <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> <!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]--> <!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]--> <!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <!-- Mobile viewport optimized: j.mp/bplateviewport --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects --> <script src="js/libs/modernizr-1.7.min.js"></script> <style> div.items ul:not(:target) {display:none;} div.items ul:target {display:block;} .tabs { float:left; clear:none; width:200px; height:30px; border:solid 1px #cccccc; padding:10px; background:#000000; } a { text-decoration:none; } .tabs a { float:left; margin:8px 5px 5px 5px; color:#ffffff; } ul { width:222px; float:left; clear:both; padding:10px 0px 10px 0px; margin:-8px 0px 0px 222px; line-height:35px; list-style:none; } li { border-left:#cccccc solid 1px; border-right:#cccccc solid 1px; border-bottom:#cccccc solid 1px; } ul li a { margin-left:15px; } </style> </head> <body> <!-- Start Tabs --> <div class="tabs"> <a href="#">Dashboard</a> </div> <div class="tabs"> <a href="#item2">Data & Reports</a> </div> <div class="tabs"> <a href="#">Data Archives</a> </div> <!-- End Tabs --> <!-- Start 2nd Tabs Content --> <div class="items"> <ul id="item2"> <li> <a href="#">Sales By Device</a> </li> <li> <a href="#">Delivery</a> </li> <li> <a href="#">Revenue</a> </li> <li> <a href="#">Sales By Purchase Type</a> </li> <li> <a href="#">Data Archives</a> </li> </ul> </div> <!-- End 2nd Tabs Content --> </body> </html> I'm still new to CSS, but this struck me as odd: if i have in my CSS: img { border: none} noborder {boder:none} ______ Now, if in the html i make a div class=noborder, the image in this div will still have a border... is there any way of "over-ruling" prior definitions that I'm missing? Thanks, Matt Hey, The comments show different/incorrect for people who use Internet Explorer 7 to visit my website. Firefox, Chrome, Safari, and IE8+ etc all show the comments correctly. My website is: http://www.lilwaynehq.com/2011/05/2...tunes/#comments Here is an example of what it looks like in IE7: I need it to look like this: Does anyone know the problem and how I can fix it? I will also be using an IE7 specific style sheet to make it easier. Thanks. I purchased a template for my admin area (didn't want to be bothered with the design, prefer to work on the functionality), and I noticed it had a lot of comments like the following: PHP Code: <!--[if !IE]>start login<![endif]--> <!--[if !IE]>end login<![endif]--> Are these just basically regular comments? I am not sure why the if statements are in there. Hello, I have some CSS that I'm using to implement zoom on an iframe I found that it needed to look like this for IE7: Code:
<style type="text/css">
.outerWrapper { width: 100%; height: 100%; padding: 0; overflow: hidden; margin-top: 10px; margin-left: 0px; float:left;}
.wrapper { width: 500px; height: 350px; padding: 0; overflow: hidden; margin-top: 0px; margin-left: 0px; float:left;}
.iFrameClass { width: 510px; height: 357px; border: none; padding: 0; margin-top: -50px; margin-left: -52px; }
.iFrameClass {
zoom: 1.00;
-moz-transform: scale(1.0);
-moz-transform-origin: 50% 50%;
-o-transform: scale(1.0);
-o-transform-origin: 50% 50%;
-webkit-transform: scale(1.0);
-webkit-transform-origin: 50% 50%;
}
</style>
and this for IE8: Code:
<style type="text/css">
.outerWrapper { width: 100%; height: 100%; padding: 0; overflow: hidden; margin-top: 10px; margin-left: 0px; float:left;}
.wrapper { width: 500px; height: 350px; padding: 0; overflow: hidden; margin-top: 0px; margin-left: 0px; float:left;}
.boxiFrameClass { width: 510px; height: 357px; border: none; padding: 0; margin-top: -50px; margin-left: -52px; }
.boxiFrameClass {
-ms-zoom: 1.00;
-ms-transform-origin: 50% 50%;
-moz-transform: scale(1.0);
-moz-transform-origin: 50% 50%;
-o-transform: scale(1.0);
-o-transform-origin: 50% 50%;
-webkit-transform: scale(1.0);
-webkit-transform-origin: 50% 50%;
}
</style>
What's odd is that ie8 converts -ms-zoom to just plain ZOOM in the DOM, but it doesn't like the IE7-style markup. I decided to try to make both happy using conditional comments, and figured that since it's all browser dependent anyway, I'd make everything conditional like so: So I changed it to: Code:
<style type="text/css">
.outerWrapper { width: 100%; height: 100%; padding: 0; overflow: hidden; margin-top: 10px; margin-left: 0px; float:left;}
.wrapper { width: 500px; height: 350px; padding: 0; overflow: hidden; margin-top: 0px; margin-left: 0px; float:left;}
.iFrameClass { width: 510px; height: 357px; border: none; padding: 0; margin-top: -50px; margin-left: -52px; }
.iFrameClass {
[if lte IE 7] zoom: 1.00;
[if gte IE 8] -ms-zoom: 1.00;
[if gte IE 8] -ms-transform-origin: 50% 50%;
[if Gecko] -moz-transform: scale(1.0);
[if Gecko] -moz-transform-origin: 50% 50%;
[if Opera] -o-transform: scale(1.0);
[if Opera] -o-transform-origin: 50% 50%;
[if Webkit] -webkit-transform: scale(1.0);
[if Webkit] -webkit-transform-origin: 50% 50%;
}
</style>
The problem is that now, the zoom isn't working any any browsers, whereas before I could make it work ok in either (IE8, FF, and Chrome) or (IE7, FF, and Chrome), depending on the markup. Am I doing something wrong in the way I'm doing conditional comments? Thanks, Eric Here is a test page... http://www.thedreyersonline.com/test.htm It doesn't look horrible, so I can live with it, but it's designed so that the comments section will actually sit on the bottom like the "onbottom.gif" screenshot... It works if there is enough content in the "content" div prior to the "comments" div, but not when it's short. An alternative solution would be like the "extended.gif" screenshot, but the onbottom shot is preferred. Any help would be greatly appreciated! Thanks Bryan I need to hide the following code from IE 7 But I can't quite get the conditional comments to work. Code:
#fullc p a em {
padding-top: 190px;
right: auto;
text-align: center;
width:500px;
height: auto;
min-height: 190px;
display: block;
_display: none;
}
This is what I've tried so far: Code: <!--[if !IE 7]>
#fullc p a em {
padding-top: 190px;
right: auto;
text-align: center;
width:500px;
height: auto;
min-height: 190px;
display: block;
_display: none;
}
<![endif]-->
And this: Code: <!--[if IE 7]>
#fullc p a em {
padding-top: 0;
right: 0;
text-align: center;
width:0;
height: 0;
min-height: 0;
display: block;
_display: none;
}
<![endif]-->
Neither of these seem to work. The first one hides it from FF but not IE7 for some reason. Is what I'm trying to do going to work? Hey All, I'm currently testing out an idea for using Facebook Comments within a clients site. The space given to input the is very limited so I have implemented an auto scroll using Mootools. Everything seems OK but when you go to the page the scroll bar is not present, so you are unable to scroll down to see the comments towards the bottom and click the page numbers. The only way in which I can make the scroll bar show is if I right click and click Inspect Element both on Firefox and Chrome (it works perfectly!!!). I would appreciate it greatly if someone could have a look and let me know what I am missing and where I have gone wrong. The link to the page is http://www.theblitzparty.com/communityspirit/comments Thanks I want to use conditional comments to load a style sheet for IE7. When I check the site in IE7 I see images for the content area being placed incorrectly. They are over to the right of the page when they should be in the middle. When I check the images with IE dev bar they have a position of absolute. However the ie_7style.css sheet has them with a position float left. When I link to the ie7style.css without conditional comments and load the page it works as intended. I believe the absolute positioning is coming from the style.css sheet which is intended for Firefox. It seems to me that the ie7style sheet isn't being implemented properly and is relying somewhat on the style.css to render the page. How do I resolve this problem? Hello, Can search engine see a hide H1 tag? Quote: h1 {display:none;} Hello. I have code like this one Code: <div class='captionCell cbregName'> <label for="cbpplan10">AVATAR DESIGN</label> </div> how to hide just that label. Since there is many <div class='captionCell cbregName'> but labels are named different like for="cbblane9"... Hi all, pls can anybody help me out in writing a code to hide the address bar and IE bar with css..it is very urgent.. thank you in advance hey on my site at http://www.tequme.com theres a little copyright footer at the bottom and it looks good in 1280 but in 1024 it gets tucked away under the main site. its all divs and css and i kinda get whats going wrong but any suggestions/solutions on resolving it would be appreciated. i use one table to centrally align the main div. Regards Russell For some reason i am adding css Code: Original - css Code /* Hide this from IE-Mac \*/ div.spacer { height: 5px; } /* End the hiding */ /* Hide this from IE-Mac \*/ But IE keeps seeing this, does anyone knows why? I used the following code to hide overflowing content in one of my earlier works. Not working this time, check it yourself (purple section), http://www.refinethetaste.com/html/ Code:
<style>
.playlist { float:left; width:474px; height:80px; background:#FFF; overflow:hidden; }
.playlist .entries { position:absolute; width:10000em; }
.playlist .entries a { float:left; width:452px; height:60px; font-size:9px; padding:10px; background:#90F;}
.playlist .entries a:hover { background-position:-211px 0; color:#000; }
.playlist .entries a.playing { background-position:-422px 0; }
.playlist .entries a.paused { background-position:-633px 0; }
.playlist .entries a.progress { opacity:0.8; }
/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage { float:left; width:20px; height:60px; margin:15px 0; background:url(/html/themes/default/images/home_carousel_arrow_left.png) no-repeat; display:block; cursor:pointer;}
/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover { background-position:0px -18px; }
/* disabled navigational button */
a.disabled { visibility:hidden !important; }
/* next button uses another background image */
a.next, a.nextPage { background-image:url(/html/themes/default/images/home_carousel_arrow_right.png); }
</style>
I'm looking for a way to show / hide a DIV triggered buy mousing over / clicking on a tab. The action will not navigate away from the page, just show / hide the DIV. I found this script: http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm But it seems like a lot of JS overhead. Is there a simpler way? I am converting my news system from tables to pure CSS. So far its going great, and I'm almost complete except for one problem; Each post has a category, and the category image is displayed in each post using "background-image" in CSS. Although it somehow comes back in the background of each link within the <div> (in Firefox). I have attached an image of what I'm talking about. Here's the html (simplified): Code: <div class="games"> <div class="newstoryinfo"> <h2>Topic goes here</h2> </div> text text text text text text text text text text text text text text text text text text text text text and so on... </div> Here's the CSS Code:
.news {
background-image: url("/img/topics/1.gif");
background-color: transparent;
background-repeat: no-repeat;
border: 1px solid black;
padding: 10px;
}
.news div {
text-align: justify;
margin-left: 1ex;
margin-bottom: 10px;
padding-left: 60px;
padding-right: 5%;
line-height: 1.6em;
}
.newstoryinfo {
padding-top: 5px;
color: #888;
font-size: 11px;
font-family: "Lucida Grande", Verdana, Geneva, Lucida, Helvetica, sans-serif;
}
Can someone please tell me how to make links in the "text text text.." area display with a white/transparent background? Thank you! I am normally quite good at css but I have hit a wall. I want a 2 column layout. The left column will be alot smaller than the right (one is for navigationa dn the other for content). I want to be able to show and hide the left column. When I hide it I want the rightcolumn to take up the space that the left column took up. Incase my description was confusion I have drawn this simple picture. Picture I am wanting to do this with just divs, no tables. And very little or no javascript. Thankyou. Is it possible to hide a vertical scroll bar? I have a div that I just want to be able to horizontal scroll within a page. Is there a way to hide the vertical scroll??? Thanks! Thanks for taking the time to read my question, I want to hide this line from IE6 and lower Code: padding: 0px 0px 0px 12px; Is there something I can do to it to hide it? I need it to work in IE7, FF etc. I'm looking on line, but I guess I'm not typing in the correct search terms, as I'm not coming up with anything. Thanks, Brad |
|||||||