Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    targeting IE7 or FF in css

    Hi all,

    In my html I have a div <div id="topmenu"> contained in <div id="container">. When I worked on applying a style to this div, I noticed that IE7 and FF respond differently. By testing first one and then the other, I discovered that that these two lines in my style sheet work fine for either browser:
    #topmenu {margin-left:542px; width:auto; height:27px;} /* FF */
    #topmenu {float:left; width:auto; height:27px;} /* IE7 */


    So now I am trying to use both these lines in my stylesheet with a filter or hack directing each browser to the right line. What I tried after researching how to do this is the following:
    #topmenu {margin-left:542px; width:auto; height:27px;} /* FF */
    *:first-child+html div#topmenu {float:left; width:auto; height:27px;} /* IE7 */


    Unfortunately, it does not work. I also tried without 'div' before '#topmenu', and I tried in reversed sequence, but to no avail. I really had the impression from my research that this hack works with IE7, so then the question must be: what did I do wrong? I really would like to avoid using conditional comments in my html, so any suggestion to sovle this would be more than welcome!
    Last edited by ewel; 01-10-2008 at 12:22 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Conditional Comments (CCs) are your friend

    Import/link in the default stylesheet with the 'FF' property/values, then follow that with an IE7-specific stylesheet between CCs.

    e.g.
    Code:
    <style type="text/css">
    
    	@import 'styles.css';
    	/* includes: #topmenu {margin-left:542px; width:auto; height:27px;} */
    
    </style>
    <!--[if IE 7]>
    <style type="text/css">
    
    	@import 'ie7.css';
    	/* includes: #topmenu {margin-left: auto; float: left;} */
    
    </style>
    <![endif]-->
    IE7 will get both, but the values in the subsequent IE7 stylesheet will override those in the default stylesheet.
    (Note that you may need to unset or alter some properties in the IE7 stylesheet, such as the margin-left.)
    Last edited by Bill Posters; 01-10-2008 at 12:33 PM.

  • #3
    New Coder
    Join Date
    Oct 2007
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, but as said I would realy like to avoid using conditional comments; I would like to deal with css in the style sheet not in the html...

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Sorry, failed to read your original post completely.

    Still, I (and a growing number of professionals) consider CCs as the way to go when it comes to robust and reliable ways of precisely targeting specific versions of IE.

    It might feel a little irksome to a markup purist (I'm one too), but it really is (increasingly) considered the best approach on offer.
    Last edited by Bill Posters; 01-10-2008 at 12:51 PM.

  • #5
    New Coder
    Join Date
    Oct 2007
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the advice, and I am trying to follow it but running into trouble again.

    I now have this in my html, with conditional comments copied from a MS page:
    <!--[if IE 7]><div id="topmenuIE7"><![endif]-->
    <!--[if !(IE 7)]><div id="topmenu"><![endif]-->


    In my css I have the following (I added borders only to check if the browsers get the right code):
    #topmenu {margin-left:542px; width:auto; height:27px; border:1px solid black;} /* non-IE */
    #topmenuIE7 {float:left; width:auto; height:27px; border:1px solid red;} /* IE */


    In IE7 I get it exactly how I want it, but in FF I get a mess without any border. Using Firebug I can see that the topmenu div is simply not present. That means that FF cannot read the conditional comment. As such that would be simple to solve by removing the conditional comment tags around <div id="topmenuIE7">, but then IE7 would read that too. Catch22 it seems! Am I going to have to make a separate specific set of IE7 and FF style sheets just to deal with the style of one block?

    PS I have one stylesheet at the moment which is referenced in the head by way of <link rel="stylesheet" href=" etc.
    Last edited by ewel; 01-10-2008 at 04:37 PM.

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    I'm not a great fan of using CCs to deliver IE-specific and non-IE body markup and have never found the need to use them that way. (The head section of a markup is fair game in a way that the body section isn't, imho.)

    I would think that there's likely to be a way to deliver an IE7 stylesheet and give both browsers the appropriate CSS without altering the body markup. However, without seeing your page/code, I can't suggest any solutions.


    It might now be better to provide a link to the page in question, in order for myself and/or others to check things and suggest solutions.

  • #7
    New Coder
    Join Date
    Oct 2007
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Bill, I appreciate your implied offer to have a glance at my code and see if it is necessary to deliver IE-specific and non-IE body markup, and I am not eager to have conditional comments.
    Still, if there is an easy way to make a difference for IE7 and other browsers then that would save you the trouble and put me back on course quickly.

    Having said this, below I am pasting the relevant parts of my html and css - the part in issue is the last block contained in my header block so everything below that is of no influence, and I am also cutting out some irrelevant code clutter from the head section.

    Code:
    <?php
    defined( '_JEXEC' ) or die( 'Restricted access' );
    $tmplt = $mainframe->getTemplate(); 
    ?>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
    
    <head>
    <jdoc:include type="head" />
    
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>templates/<?php echo $tmplt ?>/css/template.css" media="screen" type="text/css" />
    <link rel="alternate stylesheet" href="<?php echo $this->baseurl ?>templates/<?php echo $tmplt ?>/css/800.css" type="text/css" title="fixed" />
    <script language="javascript" type="text/javascript" src="<?php echo $this->baseurl ?>templates/<?php echo $tmplt ?>/js/styleswitcher.js"></script>
    
    </head>
    
    <body>
    
    	<!-- Outer border -->
    	<div class="outeround" style="overflow:hidden;">
    		<div class="hd">
    			<div class="c">
    			</div>
    		</div>
    		<div class="bd">
    			<div class="c">
    				<div class="s">
    					<div id="wrap">
    						<div id="wrap-inner">
    
    							<!-- Topcontainer -->
    							<div id="topcontainer">
    
    								<!-- Logo -->
    								<div id="logo">
    									<h1>
    										<a href="<?php echo $mainframe->getCfg( 'live_site' );?>" title="<?php echo $mainframe->getCfg('sitename'); ?>">
    											<?php echo $mainframe->getCfg('sitename'); ?>
    										</a>
    									</h1>
    								</div>
    								<!-- End Logo -->
    
    								<!-- Headercontainer -->
    								<div id="headercontainer">
    
    
    		<!-- Slogan content -->
    										<div id="slogancontent">
    											INSERT TEXT HERE
    										</div>
    										<!-- End Slogan content -->
    								</div>
    								<!-- End Headercontainer -->
    						
    								<!-- Buttonscontainer -->
    								<div id="buttonscontainer">
    
    									<!-- Access buttons -->
    									<div id="accessbuttons" style="z-index:99;" onmouseover="fireOnmouse()"><div class="access"><a href="#" onclick="setStyleSheet('fixed', 1);return false;" title="fixed"><img src="<?php echo $this->baseurl ?>templates/<?php echo $tmplt ?>/images/fixed.png" width="17" height="17" alt="fixed-width" /></a><a href="#" onclick="setStyleSheet('', 1);return false;" title="fluid"><img src="<?php echo $this->baseurl ?>templates/<?php echo $tmplt ?>/images/fluid.png" width="17" height="17" alt="fluid-width" /></a></div></div>
    									<!-- End Access buttons -->
    
    									<!-- Buttonsspacer -->
    									<div class="buttonsspacer">
    									</div>
    									<!-- End Slogan content -->
    
    									<!-- Top menu -->
    									<!--[if IE 7]><div id="topmenuIE7"><![endif]-->
    									<!--[if !(IE 7)]><div id="topmenu"><![endif]-->
    										<jdoc:include type="modules" name="topmenu" style="xhtml" />
    									</div>
    									<!-- End Top menu -->
    
    								</div>
    								<!-- End Buttonscontainer -->
    
    							</div>
    							<!-- End Topcontainer -->
    Code:
    body { background:#999999; margin:10px 0px 10px 0px; padding:0; text-align:center; color:#5E5E5E; font: 76.1%/1.3em "Trebuchet MS", Trebuchet, Arial, sans-serif; font-style: normal; text-decoration: none; white-space: normal; }
    .outeround {width:90%;margin:0px auto;min-width:850px;max-width:1280px;} 
    .outeround .hd .c, .outeround .ft .c {height:18px;}
    .outeround .ft .c {height:18px;}
    .outeround .hd {background:transparent url(../images/tl.png) no-repeat 0px 0px;}
    .outeround .hd .c {background:transparent url(../images/tr.png) no-repeat right 0px;}
    .outeround .bd {background:transparent url(../images/ml.png) repeat-y 0px 0px;}
    .outeround .bd .c { background:transparent url(../images/mr.png) repeat-y right 0px;}
    .outeround .bd .c .s {margin:0px 8px 0px 4px;padding:0 1em 0 1em;}
    .outeround .ft {background:transparent url(../images/bl.png) no-repeat 0px 0px;}
    .outeround .ft .c {background:transparent url(../images/br.png) no-repeat right 0px;}
    #wrap{margin:0;width:100%;}
    #wrap-inner {margin:0;padding:0;text-align:left;background:#FFFFFF;font-size:1.1em;}/* font-size:1.2em;hack */
    
    #topcontainer {height:74px; width:100%; margin:0; padding:0px; font-size:11px; line-height:17px;}
    
    #logo {float:left; height:74px; width:187px; padding-right:10px; background:url(../images/spacerleft.png) no-repeat right top;}
    #logo h1 a {width:187px; display:block; text-indent:-5000px; text-decoration:none; line-height:74px;}
    #logo h1 {background:#FFFFFF url(../images/logo.png) top left no-repeat;}
    #logo h1 {margin:0; padding:0;}
    
    #headercontainer {float:left; height:74px; width:345px; overflow:hidden; background:url(../images/spacerright.png) no-repeat right top;}
    #slogancontent {float:left; height:74px; width:325px; padding-left:20px; background:url(../images/slogancontent.png) no-repeat left top; line-height:74px; font-size:2em; font-weight:bold; color:#FFFFFF;}
    
    #buttonscontainer {width:auto; height:74px; background:#3399FF url(../images/slogan.png) no-repeat right top;}
    * html #buttonscontainer {height:74px; background:#3399FF url(../images/slogan.png) no-repeat right top;margin:0;padding:0;}
    .buttonsspacer {height:45px;}
    #accessbuttons {z-index:99; float:right; position:relative; top:-3px; right:15px; width:115px; height:29px; padding: 6px 0px 6px 8px; margin:0; background: url(../images/navicons.png) no-repeat center top;}
    .access {margin:0; padding:0; text-align:left;}
    a.access {font-size:8px; text-decoration:none; white-space:nowrap;}
    .access img {border:none; margin:0px 3px 0px 0px; padding:0; width:17px; height:17px; font-size:5px;}
    #topmenu {margin-left:542px; width:auto; height:27px; border:1px solid black;} /* non-IE */
    #topmenuIE7 {float:left; width:auto; height:27px; border:1px solid red;} /* IE */
    
    .moduletabletabs {font:12px; margin-right: 12px; white-space:nowrap;}
    .moduletabletabs ul {list-style:none; float:right; margin:0; padding:0; background:#3399FF; width:auto; height:27px; white-space:nowrap;}
    .moduletabletabs li {float:right; background:url(../images/tabs.png) no-repeat 0 -4px; margin:0; padding:0 0 0 12px; white-space:nowrap;}
    .moduletabletabs a:link,.moduletabletabs a:visited {float:left; display:block; color:#3366FF; font-weight:bold; background:url(../images/tabs.png) no-repeat 100% -4px; text-decoration:none; margin:0; padding:7px 18px 5px 9px;}
    .moduletabletabs a:hover {color:#7BB31A; font-weight:bold;}
    .moduletabletabs a:active {color:#FFFFFF; font-weight:bold;}
    .moduletabletabs #current {background:url(../images/tabs.png) no-repeat 0 -84px;}
    .moduletabletabs #current a {color:#FFFFFF; background:url(../images/tabs.png) no-repeat 100% -84px; font-weight: bold;}
    The issue that my two lines of css are trying to solve is that a left margin works in FF but in IE7 it will push the topmenu all the way to the right edge of the screen because the left margin is calculated from where the header container and the buttons container meet. Conversely, the float left of the top menu works for IE7 but in FF the block will not float up next to the header block and under the spacer block, but instead it will take almost the whole inner wrap width below the rest of the header.

    As said, I will already be more than happy with a quick solution using conditional comments, but if you have an idea of how to use one size to fit all I will of course not refuse! : )

  • #8
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    A link to an online copy of the page would be easier for me/others to relate the code to how the page is actually rendering. (I'll/we'll be able to check the markup source and css ourselves when we need to reference the actual code.)

  • #9
    New Coder
    Join Date
    Oct 2007
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, I understand. I did not provide a link because I have no protection (yet -but coming soon!) other than a root directory password, and the site already got hacked once. Sorry for that - however I should have thought of posting a few screenshots.

    The good news is that I decided to experiment a bit and after changing the following lines I actually got it to work in both browsers:
    #topmenu {margin-right:12px; height:27px;}
    .moduletabletabs {font:12px; white-space:nowrap;}
    .moduletabletabs ul {list-style:none; margin:0; padding:0 0 0 12px; background:#3399FF; width:auto; height:27px; white-space:nowrap;}
    .moduletabletabs li {float:right; background:url(../images/tabs.png) no-repeat 0 -4px; margin:0; padding:0; white-space:nowrap;}

    So it was a floating issue but the float in issue was actually UL not #topmenu. Thanks for your suggestions nonetheless!

    Out of interest, I still would really like to learn why the conditional comments did not work for me, and how they should be used.
    Let me put my question this way: when you make a specific style for one or more IE versions, then other browsers still need their style, but that style would also be read by the IE version(s) for which you made a specific style. So how do you get other browsers to ignore that?
    One of the conditions I found in MS and other explanations is that the browser is not IE. Yet when I tried the similar 'is not IE7' FireFox refused to read the conditional comment that was supposed to apply to it.
    I found many sites explaining the same basics, but none with good examples, and I would really like to understand this so that I can close the issue I had without feeling like an idiot

  • #10
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by ewel View Post
    What I tried after researching how to do this is the following:
    #topmenu {margin-left:542px; width:auto; height:27px;} /* FF */
    *:first-child+html div#topmenu {float:left; width:auto; height:27px;} /* IE7 */


    Unfortunately, it does not work. I also tried without 'div' before '#topmenu', and I tried in reversed sequence, but to no avail. I really had the impression from my research that this hack works with IE7, so then the question must be: what did I do wrong? I really would like to avoid using conditional comments in my html, so any suggestion to sovle this would be more than welcome!
    This exploit fails, presumably, because you seem to have forgotten to consider that Windows Internet Explorer will read both declarations. Bill Posters pointed out what the probable solution was in the last sentence of his first reply: you need to reset the margin on #topmenu to whatever it would be had you not specified margin-left: 542px. However, he may have made a mistake by suggesting margin: auto instead of the CSS2.1 default margin: 0 hence why his solution may not have worked for you.

    Assuming that the margin would have been the default of zero, the following code would, presumably, work.

    Code:
    #topmenu { margin-left: 542px; width: auto; height: 27px; } /* all */
    * + html div#topmenu { margin-left: 0; float: left; } /* WIE7 */
    First, note that the margin has been reset. Second, note that in this code that the first CSS rule is accessible to all browsers, not just Mozilla Firefox. Because of this, setting the width and height properties in the second rule with the same values used in the first rule is redundant. Finally, note that use of a :first-child pseudo‐class is unnecessary; a lone universal selector will do.

    Do note that there is a potentially shorter exploit that you can use, as shown below. I’ve added line‐breaks and comments for comprehension reasons.

    Code:
    #topmenu {
    	margin-left: 542px; /* all */
    	?margin-left: 0; /* WIE7 and below*/
    	_margin-left: 542px; /* MSIE6 and below*/
    	?float: left; /* WIE7 and below*/
    	_float: none; /* MSIE6 and below */
    	width: auto;
    	height: 27px;
    }
    However, I prefer conditional comments to either of the above two exploits since they don’t require polluting primary style sheets with such messy code, they don’t rely on exploits that might be fixed (while the problem that the exploit addresses may not be fixed), other browsers won’t have to download the extra code (assuming external style sheets), and all or most of your Internet Explorer‐specific code is isolated.

    Further Information on the Exploits

    If you choose to stick with *:first-child + html, note that you must make sure that you have no SGML comments between the document type declaration and the html element because WIE7, apparently, treats such comments as elements when processing adjacent sibling selectors. The exploit works in the first place by exploiting the fact that IE treats the doc. type declaration as an element in the same manner. If you have a comment between the doc. type declaration, the html element would be considered the third or later sibling, not the second, and the selector wouldn’t match. You could modify the selector to account for this (*:first-child + * + html) or you could simply remove the first-child pseudo‐class from the exploit, as I mentioned earlier in this post.

    Also note that first-child pseudo‐class doesn’t work in WIE7’s quirks mode, so the exploit would fail in there too.

    With regard to the second set of exploits, check out http://annevankesteren.nl/2007/02/ie7-css-hacks.

    Quote Originally Posted by ewel View Post
    I now have this in my html, with conditional comments copied from a MS page:
    <!--[if IE 7]><div id="topmenuIE7"><![endif]-->
    <!--[if !(IE 7)]><div id="topmenu"><![endif]-->
    You probably won’t find what you want on a Microsoft Web site. Someone rewrote Microsoft’s recommended downlevel‐revealed conditional comment code to exploit IE’s incorrect handling of SGML comments since the original Microsoft code results in invalid HTML and malformed XML documents.

    The correct code is shown below. The color shows you how the code is commented out when interpreted by a browser that reads SGML comments correctly.

    Code:
    <!--[if IE 7]><div id="topmenuIE7"><![endif]-->
    <!--[if lte IE6]><div id="topmenu"><![endif]-->
    <!--[if !IE]>--><div id="topmenu"><!--<![endif]-->
    Note that this requires three conditional comments instead of two.

    Quote Originally Posted by ewel View Post
    Am I going to have to make a separate specific set of IE7 and FF style sheets just to deal with the style of one block?
    Personally, browser‐specific style sheets are preferable to use of browser‐specific HTML. With a browser‐specific style sheet, you would have only needed one conditional comment in the previous example.

    Quote Originally Posted by ewel View Post
    Having said this, below I am pasting the relevant parts of my html and css
    You posted the pre‐processed PHP code. It’s more helpful if you post code for the document as it appears after the document has been processed for reasons that I would think obvious.

    Quote Originally Posted by ewel View Post
    Yet when I tried the similar 'is not IE7' FireFox refused to read the conditional comment that was supposed to apply to it.
    You’re forgetting that Mozilla Firefox et al don’t support conditional comment syntax. The real mechanism lies in the SGML comment processing previously mentioned.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #11
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    One other thing to note is that if you only use @import to include your stylesheets you need to have a script elements somewhere in the head too, otherwise you get a lovely 'content flash of unstyled code' in IE6 and possibly 7, can't remember. Just having <script type="text/javascript"></script> will work just fine.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #12
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by ahallicks View Post
    One other thing to note is that if you only use @import to include your stylesheets you need to have a script elements somewhere in the head too, otherwise you get a lovely 'content flash of unstyled code' in IE6 and possibly 7, can't remember. Just having <script type="text/javascript"></script> will work just fine.
    I did a quick check by viewing the page http://bluerobot.com/web/css/fouc.asp/. I saw that the “flash of unstyled content” affected MSIE6 while WIE7 was unaffected.

    Based upon ewel’s previously shown code, he/she is already using link and script elements within the head element, so adding an empty script element here would be entirely redundant.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •