Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Differences in IE and Firefox

Posted by: WeatherStorm Sep 30 2007, 12:15 PM

I am so fed up!! I've been trying to understand this by myself, but I don't seem to be getting anywhere - if someone could help me, that would be fantastic. Anyway, to the problem. The issue is http://www.weatherstorm.org. I was very lazy and instead of creating my own layout, I used a premade one and edited it, so I don't understand it as well as I would had I done it all myself. In Firefox, everything is looking exactly as I want it to. However, when I open it in IE, the side bar is below the blog content, it is slightly too far to the left, and the font is incorrect. I tried to use the font script that I generally use, but it made the font in Firefox go mad. If anyone knows which part of the script it is reading differently and why, please tell me!

I've just realised that this might fit better into 'Website Functionality' - really sorry if it's in the wrong place!

Posted by: Frederiek Oct 1 2007, 02:44 AM

I don't usually use IE, but you have HTML errors on your page. Check them out with the http://htmlhelp.com/tools/validator/ and fix them. And while you're at it, check for http://jigsaw.w3.org/css-validator/ too. Then see if your problem persists.

Posted by: WeatherStorm Oct 2 2007, 05:19 AM

The CSS checks out okay, but I will definitely fix the HTML errors a.s.a.p!

Posted by: WeatherStorm Oct 4 2007, 04:14 PM

Okay I'm even having problems with HTML compliance now! The only problem left is with the quote generator in the footer - it says I cannot put a

CODE

<p>

tag inside the DIV I have got it in, but I want to right-align the text without making another DIV. I definitely need to slim down the DIVs but I have no idea where to start... and I'm no closer to understanding why IE has such a problem with it, but Firefox interprets it perfectly.

I'm going to post the code, to see if it makes it easier for anyone to help:

CODE

body {
background: #7C6F5C url(img/bg.jpg);
color: #222;
font: 62.5% normal sans-serif;
padding: 2% 0;
}

a {color: #642;}
a:hover {color: #963;}

big {font-size: 1.1em;}

h1,h2,h3 {color: #442; padding: 8px 0 2px;}

h1 {font: normal 2.4em serif,sans-serif;}
h1 a {text-decoration: none;}
h1 a:hover {text-decoration: underline;}

h2 {font: normal 1.6em serif,sans-serif;}
h3 {font: bold 1.2em serif,sans-serif;}

blockquote {
background: url('img/quote.gif') no-repeat;
display: block;
font: normal 1.1em Georgia,serif;
padding-left: 26px
}

form,table {margin-bottom: 1.2em;}
img {border: none;}
label {display: block;}
li {line-height: 1.5em;}
p {padding: 2px 0 10px;}
small,.small {font: normal 0.9em sans-serif;}
ul,ol {padding: 0 2em 1.2em;}

/* structure */
#wrapper {
background: #332 url(img/wrapper.gif) no-repeat left bottom;
margin: 0 auto;
width: 762px;
}
#container {
border-top: 6px solid #332;
font-size: 1.3em;
line-height: 1.3em;
margin: 0 auto; background: #FBF9F4;
width: 750px;
}

/* header */
.title {
background: #E2DED5 url(img/header-h1.jpg) repeat-x;
border-top: 1px solid #996;
}
.title h1 {
font: normal 2.2em Georgia,"Trebuchet MS",sans-serif;
padding: 10px 0 10px 18px;
}

.header {
border-top: 2px solid #663;
background: #DAD7C5 url(img/header.jpg) no-repeat left bottom;
height: 220px;
}

/* navigation */
.navigation {
background: #EAE7DF url(img/nav.gif) repeat-x; height: 41px;
border-top: 1px solid #996;
}
.navigation ul {padding: 0; margin: 0;}
.navigation li {float: left; list-style: none;}
.navigation li a {
background: #FFF url(img/nav.gif) repeat-x;
border-right: 1px solid #C9C6B3;
color: #553;
display: block;
font: bold 1em Tahoma,sans-serif;
line-height: 41px;
padding: 0 14px;
text-align: center;
text-decoration: none;
}
.navigation a:hover {
background-position: left bottom;
color: #221;
}
.navigation .current_page_item a {color: #331;}

/* main */
.main {background: #FFF url(img/main.gif) repeat-y;}

/* posts */
.post .descr {
color: #630;
font-size: 0.9em;
margin: 2px 0 4px;
}
.post .info{
border-top: 1px dashed #AAAA9A;
color: #222;
font-size: 0.9em;
font-weight: bold;
margin: 4px 0 8px;
padding: 8px 0;
}
.post img {border: 2px solid #CCB; margin: 4px 0;}
.post a img {border: 2px solid #CCB;}
.post a:hover img {border-color: #AA9;}

/* bottom */
.bottom {
background: #DCDAC9 url(img/bottom.gif) no-repeat left bottom;
border-top: 1px solid #AA8;
color: #444;
padding: 14px 20px;
}
.bottom .left,.bottom .right {width: 49%;}

/* footer */
.footer {
background: #332;
color: #EED;
padding: 10px;
}
.footer .left {width: 66%;}
.footer .right {
width: 33%;
text-align: right;
}
.footer a {
color: #FFF;
text-decoration: none;
}
.footer a:hover {
color: #FFF;
text-decoration: underline;
}

/* misc */
.content {padding: 18px 20px;}
.right .content {padding: 12px 10px;}
.left {float: left;}
.right {float: right;}
.clear,.clearer {clear: both;}
.clearer {font-size: 0;}
.col2 .left {width: 550px;}
.col2 .right {width: 190px;}

/* block list */
ul.block {
border-top: 1px dashed #BCBAAC;
margin: 4px 0;
padding: 0;
width: 90%;
}
.block li {
border-bottom: 1px dashed #BCBAAC;
list-style: none;
}
.block li a,.block li em {
color: #553;
display: block;
}
.block li em {
font-size: 0.9em;
font-style: normal;
}
.block li a {
padding: 4px 3%;
text-decoration: none;
width: 94%;
}
.block li a span {font-weight: bold;}
.block li a:hover {
color: #553;
background: #D2D0C0;
}

.right .block,.right .block li {border-color: #DCDACC;}
.right .block li a:hover {background: #F2F0EA;}

/* comments */
#commentlist li {
margin-bottom: 1.5em;
padding-bottom: 1em;
border-bottom: 1px solid #700000;
}
#commentform {
margin: 1em 0;
width: 280px;
}

textarea.styled {width: 280px;}

.styled {
font-size: 1.1em;
background: #FCFCFC;
border: 1px solid #C6C3C3;
padding: 2px;
}
.styled:hover {
background: #FFF;
border: 1px solid #C6C3C3;
}
.styled:focus {
background: #FFF;
border: 1px solid #939793;
}
#commentform input {margin-bottom: 3px;}
.commentmetadata a {font-size: 1em; color: #666;}

input, textarea
{ background: #736445;
color: #FBF9F4;
border-color: #736445;
border-style: solid;
border-width: 3px;}

/* calendar */
#wp-calendar {color: #A0A0A0;}

.col2 .right table caption {border-bottom-color:#000;}
.col2 .right table thead tr {
border-bottom-color: #000;
color: #A53512;
}
.col2 .right table th {border-bottom-color:#000;}
.col2 .right table td#today {
border-color: #000;
color: #A53512;
}
.col2 .right table td a {
border-bottom-color: #000;
background-color: #EDF3DE;
}

.col2 .right table tfoot {border-top-color: #000;}
.col2 .right table tfoot a {background: none;}

/* calendar
--------------------------------------------------*/
#wp-calendar {
display: inline-table;
border-collapse: collapse;
width: 185px;
margin: 0px 10px 0 10px;
text-align: center;
}

.col2 .right table caption {
margin: -5px 10px 0 10px;
padding-bottom: 5px;
border-bottom: 1px solid;
letter-spacing: 0.1em;
}

.col2 .right table thead tr {border-bottom:1px solid;}

.col2 .right table th {border-bottom:1px solid;}

.col2 .right table td {
width: 190px;
padding: 1px;
font-size: 0.9em;
}

.col2 .right table td#today {
padding: 0;
border: 1px solid;
font-size: 1em;
font-weight: bold;
}

.col2 .right table td a {
display: block;
border-bottom: 1px solid;
font-weight: bold;
font-size: 1.15em;
}

.col2 .right table tfoot {border-top:1px solid;}
.col2 .right table tfoot a {
border: none;
font-weight: bold;
}
.col2 .right table tfoot #prev a {text-align:left;}
.col2 .right table tfoot #next a {text-align:center;}

#searchform {padding:10px;}

CODE

<!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">

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title>Weather Storm - <?php bloginfo('name'); ?><?php if ( is_single() ) { ?> � Blog Archive <?php } ?><?php wp_title(' � '); ?></title>

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> 

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />

<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />

<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_get_archives('type=monthly&format=link'); ?>

<?php wp_head(); ?>

</head>

<body>

<div id="wrapper">
<div id="container">

<div class="title">

<h1><a href="<?php bloginfo('url');?>/"><?php bloginfo('name');?></a></h1>

</div>

<div class="header"></div>

<div class="navigation">

<ul>
<li><a href="<?php bloginfo('url');?>/">Home</a></li>
<?php wp_list_pages('depth=-1&title_li=');?>
</ul>

<div class="clearer"></div>

</div>

<div class="main">

<div class="col2">

<div class="left">

<div class="content">

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">

<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>

<div class="descr"><?php the_time('F jS, Y') ?> by <?php the_author() ?><?php edit_post_link('Edit post',' ~ ',''); ?></div>

<div class="entry">

<?php the_content('Read the rest of this entry �'); ?>

</div>

<p class="info">Posted in <?php the_category(', ') ?> having <?php comments_popup_link('no comments �', '1 comment �', '% comments �'); ?></p>

</div>

<?php comments_template(); ?>

<?php endwhile; ?>

<div class="left"><?php next_posts_link('� Previous Entries') ?></div>
<div class="right"><?php previous_posts_link('Next Entries �') ?></div>
<div class="clearer"></div>

<?php else : ?>

<h2 align="center">Not Found</h2>

<p align="center">Sorry, but you are looking for something that isn't here.</p>

<?php endif; ?>

</div>

</div>

<?php get_sidebar(); ?>

<div class="bottom">

<div class="left">

<br />
<? include("quotes.php") ?>

</div>

<div class="right">

<h2>About Weather Storm</h2>

<p>This is the personal website of Emma, a nineteen year-old Brit who is <a href="http://interrail.com" target="_blank">Interrailing</a> it around Europe from February to June 2008. This site is a place to document my progress, and a point of contact for everyone.</p>

</div>

<div class="clearer"></div>

</div>

<div class="footer">

<div class="left">
� <?=date("Y");?> <a href="<?php bloginfo('url');?>/">Weather Storm</a>
</div>

<div class="right">
<a href="http://templates.arcsin.se/">Wordpress Theme</a> by <a href="http://arcsin.se">Arcsin</a>
and heavily edited by Emma.

</div>

<div class="clearer"></div>

</div>

</div>

</div>
</div>

</body>
</html>

Posted by: Darin McGrew Oct 4 2007, 05:16 PM

Actually, the posted code doesn't help, because it doesn't match the online version that the validator is reporting problems with.

The online version tries to put a <p> element inside an <i> element.

QUOTE

Error: element p not allowed here; possible cause is an inline element containing a block-level element

You can't put block-level elements like <p> inside inline elements like <i>. Change

CODE

<i><p align="justify">It was not Byrne's death the mattered; it was the way the world had been dislocated.</i></p>

CODE

<p align="justify"><i>It was not Byrne's death the mattered; it was the way the world had been dislocated.</i></p>

Posted by: WeatherStorm Oct 9 2007, 05:45 AM

Okay, I have now edited it so that both the HTML and CSS check out okay in the validators. I have also been through the ENTIRE code to see if there are any 'loose ends' - i.e. DIVs left open, too many end tags, closing a particular DIV in the wrong place, etc - and discovered that there are none.

The only thing I could spot was that perhaps it had something to do with a confusion about related tables - for example, "col2" and "right" relate to each other, but then "content" has been put inside of it as well. Would IE have trouble reading this? I'll explain a little better.

The CSSsays:

.col2 .right

But in the coding, it looks like this:

<.col2>
<.right>
<.content> information here </.content>
<.right>
<.col2>

(of course, without the full stops/periods.)

However, I thought that because even the font is incorrect in IE, that perhaps it was having trouble reading the style sheet. As I have already posted the CSS above, can anyone see anything that would be interpreted differently in IE?

Posted by: Darin McGrew Oct 9 2007, 12:13 PM

QUOTE(WeatherStorm @ Oct 9 2007, 03:45 AM)

The CSSsays:

.col2 .right

That selects an element with class="right" inside an element with class="col2", which appears to be what you have in your HTML.

QUOTE(WeatherStorm @ Oct 9 2007, 03:45 AM)

However, I thought that because even the font is incorrect in IE, that perhaps it was having trouble reading the style sheet. As I have already posted the CSS above, can anyone see anything that would be interpreted differently in IE?

In what way is the font "incorrect" in MSIE? I would think that it would be more likely that better browsers would render it differently than you expect, because they could enforce a minimum font size. Using "font : 62.5% ..." for the body element is just perverse.

Posted by: WeatherStorm Oct 13 2007, 02:33 AM

QUOTE(Darin McGrew @ Oct 9 2007, 06:13 PM)

That selects an element with class="right" inside an element with class="col2", which appears to be what you have in your HTML.

Perhaps I didn't explain clearly enough: I know that is what is in the HTML - what I was saying was that there was another DIV with a different class inside that, but that one wasn't specified in the HTML.

QUOTE(Darin McGrew @ Oct 9 2007, 06:13 PM)

I would think that it would be more likely that better browsers would render it differently than you expect, because they could enforce a minimum font size. Using "font : 62.5% ..." for the body element is just perverse.

Okay, that's great, some constructive criticism. What should I change it to, then? Is there anything else about the code which is 'perverse' and could be causing the layout difficulties? I have exhausted all my knowledge (except for my one theory), I have changed the code so it validates correctly ... I'd really appreciate it if someone who can spot these faults easily would be able to at least point me in the right direction concerning the layout.

The font is incorrect, as far as I can tell, because the CSS specifies a sans-serif font, but in my IE it is Times New Roman, which is a serif font.

Posted by: Tom H. Oct 13 2007, 06:36 AM

As to the font problem, I also get a serif font using Firefox (Mac). My browser's preference is set for Times. If I change your CSS to

CODE

font: 62.5% normal nosuchfont, sans-serif;

my browser won't find "nosuchfont" on my system and will fall back to a sans-serif font. Alternatively, if I add the rule

CODE

font-family: sans-serif;

I get the result you desire.

You didn't ask for a critique of the site's look, but I find the body text to be uncomfortably small. In my experience, graphic designers, especially those with a print background, favor small body copy. But if you take into account the varied display environments and visual acuity of your site visitors, more of them will be served by a font size close to 100% or 1 em.

Posted by: Darin McGrew Oct 15 2007, 12:19 AM

QUOTE(Darin McGrew @ Oct 9 2007, 06:13 PM)

QUOTE(WeatherStorm @ Oct 13 2007, 12:33 AM)

Okay, that's great, some constructive criticism. What should I change it to, then?

Use 100% for body text. (You can use 1em instead, which is supposed to be the same thing, but using 100% works around a bug in MSIE font scaling.)

Then use relative sizes to make headings and the like larger than 100% (larger than 1em), and to make legalese and similar fine print smaller than 100% (smaller than 1em).