• Advertisement
Sign in to follow this  

[web] IE7 and CSS

This topic is 4038 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I've been developing a site with FireFox and recently loaded my page in IE. The stylesheets look fine, except that the first time the page loaded, the font was the default Times New Roman. I wanted Arial. The weird part is that when I refresh the page, it displays it with Arial. I ran the CSS through a validator, it works fine in FF, and I have the latest version of IE7. I need help. [smile]

Share this post


Link to post
Share on other sites
Advertisement
Only advice I can give is to make sure you're properly declaring the HTML/XHTML version you're using in your head-tag.

If you don't do that, IE7 defaults to "quirks mode", which keeps alive a few of the HTML anomalies from earlier versions of IE, mainly so sites that did un-kosher stuff under earlier IE's didn't suddenly break.

Share this post


Link to post
Share on other sites
I forgot to declare the version for each file, but I set it to XHTML 1.0 Transitional and it still doesn't work. IE detected the change and I found some bugs in the code... [embarrass] but I fixed them and validated the XHTML, and it's still acting weird.

Share this post


Link to post
Share on other sites
No, actually, sorry. Here's some code, though. Sorry about the formatting, it's generated by PHP.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head><meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>
GradeEngine</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="style.css" medium="all"><link rel="shortcut icon" href="graphics/icon.ico"><div id="TopBar" style="position:relative; left:0px; top:0px; width:640px; height:80px; color:white; background-image:url(graphics/TopBar.jpg);"><span style="position:absolute; left:140px; top:50px;"><a href="index2.php">Home</a> | <a href="controlpanel.php">Control Panel</a> | <a href="http://www.veritasacademy.org/">Veritas Academy</a> | <a href="help.php">Help</a></span><span style="position:absolute; left:400px; top:50px; width:220px; text-align:right; color:black;">Welcome, Evan. <a href="logout.php">Logout</a></span></div><div id="Body">

<span class="h3">Options</span><br/><a href="members.php">Members</a><br/><a href="classes.php">Classes</a><br/><a href="admin.php">Administrate classes</a><br/><br/><span class="h3">Messages</span><br/><br/><a href="messages.php">More messages...</a></div>
</body>
</html>



Here's the stylesheet:

a:link
{
text-decoration : none;
color : #2e4b8f;
}

a:visited
{
text-decoration : none;
color : #2e4b8f;
}

a:hover
{
text-decoration : underline;
color : #5086b4;
}

a:active
{
text-decoration : none;
color : #000000;
}

html
{
font-family : arial;
font-size : 12px;
}

div#Body
{
background-color : #bbddee;
width : 620px;
height : 460px;
padding-left : 10px;
padding-right : 10px;
padding-top : 10px;
padding-bottom : 10px;
}

span.h1
{
font-size : 36px;
color : #5086b4;
}

span.h2
{
font-size : 24px;
color : #5086b4;
}

span.h3
{
font-size : 18px;
color : #5086b4;
}

div.msg
{
background-color : white;
padding-left : 10px;
padding-right : 10px;
padding-bottom : 10px;
padding-top : 10px;
}



Thanks for the help.

Share this post


Link to post
Share on other sites
While I dont have the time right now to comment on why your page doesnt look correct in IE, I can tell you that your page is not valid. <link> tags can only appear within <head> tags as per the spec.

I dont believe this is the problem, however.

Share this post


Link to post
Share on other sites
Validity doesn't matter much by itself, particularly when the page is not even well-formed XML, since the <link> isn't closed. (Not that it matters when it's going to be parsed as tag soup anyway; but if you want to claim to be XHTML instead of the equivalently-functional-but-less-needlessly-strict HTML4, you really ought to at least get the well-formedness right...)

But it does make some sense that having the stylesheet in the body might possibly cause problems, since the browser would start rendering the page and then it'd realise you've changed the styles and it'd have to go back and fix it all up, which is more likely to hit renderer bugs. It'd be different when you reload the page because the .css file is cached and will load faster. I don't know if that's true in practice, but it'd be interesting to know if it fixes it for you.

Share this post


Link to post
Share on other sites
"Validity doesn't matter much by itself" - I'd agree to disagree ;)

The validity of the html document being created by php and sent to the browser can either trigger a normal mode or quirks mode and depending on which will vary the look of the page and how the browser displays certain css.

First fix your page's code - go over to http://validator.w3.org/ and either type in the url, upload a file or paste in the source code for the document you are checking. (I didn't look heavily at your code but if your <link> statement for the stylesheet is not in the header, place it there. Note that the right bracket should be escaped "/>" conforming to xhtml standards.

From here test it again. IE7 has improved with standards quite a bit and typically does not render a page any differently then firefox - except for cleartype ;)


Share this post


Link to post
Share on other sites
Standards/quirks mode depends on the presence of something that looks like a doctype, and not on anything else in the page - a document containing <!DOCTYPEHTML><b<i>Hello world will always be rendered in standards mode in current browsers.

But I intended "validity" in terms of "making a DOM which conforms to the requirements of the DTD", as opposed to the more basic "well-formed" (i.e. no syntax errors, because an XML parser must choke on any such error and refuse to show you anything except an error message, like here) - if you don't even get well-formedness right, despite trying to use XHTML, there are more fundamental problems to sort out than mere DTD-validness.

But anyway, using the validator is a sensible idea just because it'll point out things like the <link> being in the wrong place, even if browsers don't actually care about well-formedness or validity since approximately zero pages get it right - they just reverse-engineer IE's bugs so it looks alright no matter what you write [smile]

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement