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 14 of 14
  1. #1
    Registered User
    Join Date
    Jan 2007
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up IE7 vs. FF vs. IE6

    IE7 has created a new set of problems for my website. I searched a bit but didn't find anything that would help me, so I'm sorry if this has been covered extensively.

    I wrote my pages for FF and then used the comment // hack to make things line up in IE6. This makes my pages work in IE6 and FF. The problem is that IE7 lines things up like FF now, but the hack still works. I can't make my layouts work in both IE6 and IE7.

    1) Is there a new hack or a good way to fix this problem?
    2) Semi-related question: What is the benefit of validating in strict doctype vs. transitional?

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Use two stylesheets and use an IE conditional in the HTML

    <link rel="stylesheet" href="standard.css" type="text/css">
    <!--[if IE lte 6]>
    <link rel="stylesheet" href="ie6.css" type="text/css">
    <[endif]-->
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Regular Coder
    Join Date
    Aug 2006
    Location
    Cardiff, UK
    Posts
    141
    Thanks
    15
    Thanked 2 Times in 2 Posts
    On your second question, strict is... well... stricter in its adherence to XHTML. There are still some presentational HTML that are acceptable in Transitional, whereas in strict these are all deprecated - anything which can be controlled by CSS can only be controlled by CSS or your XHTML won't validate.

    Strict is probably more future-proof (although that's probably a bit like when the 386SX chip was 'future-proof' - by the time it made any difference, the world had moved on anyway and it didn't matter anymore). It also forces you to think about how you're using CSS by not allowing any 'presentational-HTML' fudges.

    In many ways, it's only from the moment that you move to strict that (and I'm nervously looking around and whispering this in case this starts a flame war) you really start coding CSS properly. Transitional is a halfway house between the days when you could do pretty much anything you wanted to in mixing presentation and content in your HTML, and 'proper' CSS-based layouts.
    If anyone asks my boss, this counts as work, okay?

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Transitional is really there for existing web pages that you want to add a DOCTYPE to and validate but don't have time to recode properly.

    New web pages really out to use a strict DOCTYPE.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Registered User
    Join Date
    Jan 2007
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    That didn't work. It made IE7 and IE6 look at that CSS file and it put some code (<!--[if IE lte 6]><[endif]-->) at the top of the page, which I don't want.

    Is there a way to do it like that that will work?
    Last edited by Rmpl; 02-06-2007 at 09:29 PM.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    1) Is there a new hack or a good way to fix this problem?
    2) Semi-related question: What is the benefit of validating in strict doctype vs. transitional?
    All these replies to a very vague question, ...
    In my experience, IE hacks are WAY over used.

    Your looking for a "hack or a good way to fix this problem" but we haven't seen the problem.
    Give us a link and I guarantee someone here knows the answer.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Registered User
    Join Date
    Jan 2007
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok. Here's the CSS.

    Code:
    body{ text-align:center; position:relative; background:#fff; }
    
    *{ text-decoration:none;margin:0;padding:0; }
    
    .data{ font-size:12pt; color:#888; text-align:left; font-family: Georgia, "Times New Roman", Times, serif; }
    
    .data a:link { color:#CC3333; }
    
    .data a:visited { color:#CC3333; }
    
    .quotes{ display:none; }
    .ndata { padding-bottom:680px; //padding-bottom:10px; }
    
    img { border:0; }
    
    #top{ position:relative; height:231px; width:768px; }
    
    #box1{ position:relative; height:435px; width:229px; float:left; background-image: url(img/main/menu_box.png); font-family:arial, helvetica, sans-serif; font-size:7pt;  color:#888; text-align:right; background-repeat:no-repeat; top:25px; }
    
    #box1 a:link, #box1 a:visited { color:#888; font: small-caps 200 14px georgia; }
    
    #box2{ position:relative; height:214px; width:229px;float:left;clear:left; background-image: url(img/quotes/quote_cara.png); background-repeat: no-repeat; top:24px; }
    
    #box3{ position:absolute; height:649px; width:536px; top:256px;left:232px; background-image: url(img/main/main_box.png); background-repeat:no-repeat; }
    
    #box3 a:link, #box3 a:visited {color:#888; text-decoration:none;}
    
    iframe { position:relative; top:14px; scrolling:auto; width:500px;}
    
    ul { padding-left:25px; }
    
    li { list-style-image:url(img/main/b.gif); list-style-type: disc; }
    
    #photo { text-align:center; font-family: Georgia, "Times New Roman", Times, serif; font-size:12pt; color:#888; }
    
    #photo a:link, #photo a:visited { color:#fff; }
    
    #left_p { width: 240px; float:left; }
    
    #right_p { width: 240px; float:right; }
    box1 and box2 are lining up too far down the page in IE6. Using a seperate style sheet for IE6 is fine with me for now if someone could show me the right way to do that.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Give us a link
    If no link at least quote the entire code! CSS means almost nothing without seeing the html.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Registered User
    Join Date
    Jan 2007
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
    <html><head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <meta http-equiv="Cache-Control" content="no-cache">
    
    <title></title>
    
    <link rel="stylesheet" type="text/css" href="index.css" media="screen">
    
    <link rel="stylesheet" type="text/css" href="print.css" media="print">
    
    
    
    
    
    <script type="text/javascript">
    
    //<![CDATA[
    
    function doStuff(el) {
    
    var links=document.getElementsByTagName("a");
    
    for(i=0;i<links.length;i++) {
    
    if(links[i].className=="white") {
    
       links[i].style.color="#888";
    
     }}
    
         el.style.color="#333333";
    
     }
    
    //]]>
    
    </script>
    
    
    
    
    
    </head>
    
    <body style="width:768px; margin:50px auto;" class="ndata">
    
    
    
    <script type="text/javascript">
    
    <!--
    
    
    
    function show_me(id){
    
    
    
    document.getElementById("box2").innerHTML=document.getElementById(id).innerHTML
    
    
    
    }
    
    
    
    //-->
    
    </script>
    
    
    
    
    
    <div id="top">
    
    <a href="index.html"><img src="img/main/i.png" alt=""></a>
    
    </div><!-- Logo -->
    
    <div id="box1"><!-- Navigation -->
    
    <br>
    <a class="white" href="news.html" target="theframe" onclick="doStuff(this);show_me('quote1')" onfocus="this.blur()">News&nbsp&nbsp&nbsp&nbsp</a>
    
    <br><br>
    
    <a class="white" href="instructor.html" target="theframe" onclick="doStuff(this);show_me('quote2')" onfocus="this.blur()">Instructor bio&nbsp&nbsp&nbsp&nbsp</a>
    
    <br><br>
    
    <a class="white" href="philosophy.html" target="theframe" onclick="doStuff(this);show_me('quote3')" onfocus="this.blur()">Philosophy&nbsp&nbsp&nbsp&nbsp</a>
    
    <br><br>
    
    <a class="white" href="recommendations.html" target="theframe" onclick="doStuff(this);show_me('quote4')" onfocus="this.blur()">Recommendations&nbsp&nbsp&nbsp&nbsp</a>
    
    <br><br>
    
    <a class="white" href="services.html" target="theframe" onclick="doStuff(this);show_me('quote5')" onfocus="this.blur()">Services&nbsp&nbsp&nbsp&nbsp</a>
    
    <br><br>
    <a class="white" href="store.html" target="theframe" onclick="doStuff(this);show_me('quote6')" onfocus="this.blur()">IMagic Store&nbsp&nbsp&nbsp&nbsp</a>
    
    <br><br>
    
    <a class="white" href="fees.html" target="theframe" onclick="doStuff(this);show_me('quote7')" onfocus="this.blur()">Fees&nbsp&nbsp&nbsp&nbsp</a>
    
    <br><br>
    
    <a class="white" href="wpm.html" target="theframe" onclick="doStuff(this);show_me('quote8')" onfocus="this.blur()">Words per minute &&nbsp&nbsp&nbsp&nbsp&nbsp<br>the after-school academy&nbsp&nbsp&nbsp&nbsp</a>
    
    <br><br>
    
    <a class="white" href="sat.html" target="theframe" onclick="doStuff(this);show_me('quote9')" onfocus="this.blur()">Next SAT workshop&nbsp&nbsp&nbsp&nbsp</a>
    
    <br><br>
    
    <a class="white" href="photo.html" target="theframe" onclick="doStuff(this);show_me('quote10')" onfocus="this.blur()">Photo gallery&nbsp&nbsp&nbsp&nbsp</a>
    <br><br>
    <a class="white" href="resm.html" target="theframe" onclick="doStuff(this);show_me('quote11')" onfocus="this.blur()">Resources&nbsp&nbsp&nbsp&nbsp</a>
    
    <br><br>
    
    <a class="white" href="contact.html" target="theframe" onclick="doStuff(this);show_me('quote12')" onfocus="this.blur()">Contact&nbsp&nbsp&nbsp&nbsp&nbsp</a>
    
    </div>
    
    
    
    <div id="box2">
    
    </div><!-- Quote Box -->
    
    
    
    
    
    <div id="box3">
    
    <iframe src="news.html" name="theframe" scrolling="auto" frameborder="0" height="620px" width="500px" marginwidth="15px" marginheight="0px">
    
    </iframe>
    
    </div><!-- Main Content Box -->
    
    
    
    <!-- Quotes -->
    
    <div id="quote1" class="quotes">
    
    <img src="img/quotes/quote_blank.png" alt="scroll">
    
    </div>
    
    <div id="quote2" class="quotes">
    
    <img src="img/quotes/quote_blank.png" alt="scroll">
    
    </div>
    
    <div id="quote3" class="quotes">
    
    <img src="img/quotes/quote_blank.png" alt="scroll">
    
    </div>
    
    <div id="quote4" class="quotes">
    
    <img src="img/quotes/quote_blank.png" alt="scroll">
    
    </div>
    
    <div id="quote5" class="quotes">
    
    <img src="img/quotes/quote_blank.png" alt="scroll">
    
    </div>
    
    <div id="quote6" class="quotes">
    
    <img src="img/quotes/quote_blank.png" alt="scroll">
    
    </div>
    
    <div id="quote7" class="quotes">
    
    <img src="img/quotes/quote_blank.png" alt="scroll">
    
    </div>
    <div id="quote8" class="quotes">
    
    <img src="img/quotes/quote_blank.png" alt="scroll">
    
    </div>
    <div id="quote9" class="quotes">
    
    <img src="img/quotes/quote_blank.png" alt="scroll">
    
    </div>
    <div id="quote10" class="quotes">
    
    <img src="img/quotes/quote_blank.png" alt="scroll">
    
    </div>
    <div id="quote11" class="quotes">
    
    <img src="img/quotes/quote_blank.png" alt="scroll">
    
    </div>
    <div id="quote12" class="quotes">
    
    <img src="img/quotes/quote_blank.png" alt="scroll">
    
    </div>
    
    
    </body>
    
    </html>

  • #10
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,371
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Quote Originally Posted by Rmpl View Post
    1) Is there a new hack or a good way to fix this problem?
    A list of CSS exploits can be found here. I would only use exploits that are forward‐compatible though; in other words, only those that exploit bugs, not lack of support for a CSS feature. For example, you can use the star‐HTML (* html) exploit to target only Internet Explorer 6. However, exploiting lack of support for @import url("document.css") all to serve a style sheet only to browsers other than Internet Explorer would not be forward‐compatible, because future versions of that browser might correctly support it.

    Quote Originally Posted by Rmpl View Post
    2) Semi-related question: What is the benefit of validating in strict doctype vs. transitional?
    Assuming that your document must be valid, the intent is that the strict DTD forces you to use more modern code. Unfortunately, current browsers are not validating parsers and don’t actually use the DTD, so there’s nothing that forces you to use validating code as specified by said DTD. You can still use it to help yourself move to more modern code if you stick with Strict and validate the documents periodically.

    Another advantage would be that your code would be closer to being forward‐compatible with future versions of the specification. For example, if you adhere to XHTML 1.0 Strict, it requires less adjustment to transition to XHTML 1.1; on the other hand, if you were using XHTML 1.0 Transitional with things like inline frames, target attributes, and <font> tags, you would find it notably more difficult to make the transition.

    Anyway, all new documents are supposed to be created using the Strict DTD. I believe that the Transitional DTDs were meant for those (A) transitioning from older standards like HTML 3.2 to HTML 4.01 and HTML to XHTML, (B) needing features that only the transitional DTDs offered due to lack of support for standards, and (C) without the resources to bring their documents in line with the Strict DTD.

    Quote Originally Posted by Rmpl View Post
    That didn't work. It made IE7 and IE6 look at that CSS file and it put some code (<!--[if IE lte 6]><[endif]-->) at the top of the page, which I don't want.
    The code felgall used is called a conditional comment. It’s a valid way to serve code only to Internet Explorer. It seems that felgall mistyped the latter half of the comment though; there should be an exclamation mark (!) prior to [endif]-->. Thus: <![endif]-->.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #11
    Registered User
    Join Date
    Jan 2007
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts
    First, Thank You everyone who's giving out all this good information.

    Arbitrator, I don't have time to go through everything you said today, but I tried adding the ! where you said and the code still appears.

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Your page validates but I stilll have a problem with:
    ==<body style="width:768px; margin:50px auto;" class="ndata">
    I don't like margin on the body because there is nothing outside of body.
    ==#box1 using &nbsp and <br>


    #box2 has nothing in it:
    Code:
    <div id="box2">
    
    </div><!-- Quote Box -->
    
    
    
    
    
    <div id="box3">


    I'm not sure where you want things to end up at when they are positioned correctly. Maybe you could give us an explanation where each div needs to be?
    Maybe a little like this:
    Code:
    #top{ 
    position:relative; 
    height:231px; 
    width:768px; 
    }
    
    #box1{ 
    position:relative; 
    height:435px; 
    width:229px; 
    float:left; 
    background-image: url(img/main/menu_box.png); 
    font-family:arial, helvetica, sans-serif; font-size:7pt;  
    color:#888; 
    text-align:right; 
    background-repeat:no-repeat; 
    top:25px; 
    }
    
    
    #box1 a:link, #box1 a:visited { color:#888; font: small-caps 200 14px georgia; }
    
    #box2{ 
    position:relative; 
    height:214px;
     width:229px;
    float:left;
    clear:left; 
    background-image: url(img/quotes/quote_cara.png); 
    background-repeat: no-repeat; 
    top:24px; 
    }
    
    #box3{ 
    margin: 0 0 0 232px;
    height:649px; 
    width:536px; 
    background-image: url(img/main/main_box.png); 
    background-repeat:no-repeat; 
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    Unfortunately, current browsers are not validating parsers
    Unfortunately? i'd say fortunately

    Gary

  • #14
    Registered User
    Join Date
    Jan 2007
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I looked up the correct way to do the conditional comments and I got it fixed. Thanks everyone for the tips.


  •  

    Posting Permissions

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