The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Differences in IE and Firefox, DIV placement issues (mainly)
WeatherStorm
post Sep 30 2007, 12:15 PM
Post #1





Group: Members
Posts: 5
Joined: 30-September 07
Member No.: 3,945



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. smile.gif Anyway, to the problem. The issue is 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!

This post has been edited by WeatherStorm: Sep 30 2007, 12:17 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Oct 1 2007, 02:44 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 4,541
Joined: 23-August 06
From: Europe
Member No.: 9



I don't usually use IE, but you have HTML errors on your page. Check them out with the online validator and fix them. And while you're at it, check for CSS errors too. Then see if your problem persists.


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
WeatherStorm
post Oct 2 2007, 05:19 AM
Post #3





Group: Members
Posts: 5
Joined: 30-September 07
Member No.: 3,945



The CSS checks out okay, but I will definitely fix the HTML errors a.s.a.p!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
WeatherStorm
post Oct 4 2007, 04:14 PM
Post #4





Group: Members
Posts: 5
Joined: 30-September 07
Member No.: 3,945



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'); ?>" /> <!-- leave this for stats -->

<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.wink.gif
</div>

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

</div>

</div>

</div>
</div>

</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Oct 4 2007, 05:16 PM
Post #5


WDG Member
********

Group: Root Admin
Posts: 8,033
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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>
to
CODE
<p align="justify"><i>It was not Byrne's death the mattered; it was the way the world had been dislocated.</i></p>


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
WeatherStorm
post Oct 9 2007, 05:45 AM
Post #6





Group: Members
Posts: 5
Joined: 30-September 07
Member No.: 3,945



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Oct 9 2007, 12:13 PM
Post #7


WDG Member
********

Group: Root Admin
Posts: 8,033
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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.


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
WeatherStorm
post Oct 13 2007, 02:33 AM
Post #8





Group: Members
Posts: 5
Joined: 30-September 07
Member No.: 3,945



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Tom H.
post Oct 13 2007, 06:36 AM
Post #9


Advanced Member
****

Group: Members
Posts: 127
Joined: 24-August 06
Member No.: 14



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.

This post has been edited by Tom H.: Oct 13 2007, 06:59 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Oct 15 2007, 12:19 AM
Post #10


WDG Member
********

Group: Root Admin
Posts: 8,033
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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.
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).


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 20th December 2014 - 07:30 PM