...

View Full Version : IE7 vs. FF vs. IE6



Rmpl
02-01-2007, 11:45 PM
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?

felgall
02-02-2007, 01:55 AM
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]-->

butlins
02-02-2007, 12:28 PM
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.

felgall
02-02-2007, 08:34 PM
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.

Rmpl
02-06-2007, 07:36 PM
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?

Excavator
02-06-2007, 09:53 PM
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.

Rmpl
02-06-2007, 10:38 PM
Ok. Here's the CSS.


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.

Excavator
02-06-2007, 11:18 PM
Give us a link

If no link at least quote the entire code! CSS means almost nothing without seeing the html.

Rmpl
02-07-2007, 12:57 AM
<!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>

Arbitrator
02-07-2007, 01:01 AM
1) Is there a new hack or a good way to fix this problem?A list of CSS exploits can be found here (http://centricle.com/ref/css/filters/). 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.


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 (http://validator.w3.org/) 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.


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 (http://www.quirksmode.org/css/condcom.html). 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]-->.

Rmpl
02-07-2007, 01:39 AM
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.

Excavator
02-07-2007, 02:15 AM
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:
<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:


#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;
}

Graft-Creative
02-07-2007, 02:46 AM
Unfortunately, current browsers are not validating parsers

Unfortunately? i'd say fortunately ;)

Gary

Rmpl
02-08-2007, 09:22 PM
I looked up the correct way to do the conditional comments and I got it fixed. :D Thanks everyone for the tips.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum