PDA

View Full Version : IE pwns me again! T_T

jamesbond110
12-16-2007, 05:57 AM
Well, I'm new to these forums because I have been looking for a good place to learn how to beat the valueless Internet Explorer! As mush as I wish (and probably most other web developers too) I could just shove Explorer onto the floor, too much of the world has been indoctrinated by Bill Gates. So I am stuck here with a question about the big brother browser that couldn't keep up with its siblings. :thumbsup:

http://tobysplayground.100webspace.net/Patollen%20Productions/index.php

There's my happy little website, all coded and ready for the compliant browsers we know as FF and Opera. Then IE rears its ugly butt in.

If you'll take a look at the news, there is a link for comments on the bottom. Click it. As you will see I've been doing some tests.

NOW if you're in FF, the background should be one piece - no breaks or spaces.

Open it in IE and voila, you see the terrorism.

Now I'm using something called Cutenews. There is a file called 'default.tpl' that defines the styling, so the code might look a little redundant/messy.

<div style="width:510px;">
<div class="lh"><strong>{title}</strong></div>

<div class="lm"><div style="padding-bottom:5px;">{short-story}</div><div style="margin-bottom:5px;">
<div style="float: right;">[com-link]{comments-num} Comments[/com-link]</div>

<div><em>Posted on {date} by {author}</em></div></div></div>

</div>
<div class="lm">
<div style="text-align:justify; width: 510px; padding-bottom:5px; padding-top:5px; padding-left:10px;">

<table width="90%" cellpadding="3">
<tr bgcolor="#2A9FAA">
<td width="60%"><font size="2">Posted by <strong>{author}</strong></font></td>
<td width="40%"> <font size="2"><i>{date}</i></font></td>
</tr>
<tr>
<td colspan="2" bgcolor="#C0DCC0">{comment}</td>
</tr>
</table>

</div></div>
<div class="lm">
<div style="padding-top:10px; padding-left:11px; padding-bottom:10px;">
<table border="0" width="455px" cellspacing="0" cellpadding="5" bgcolor="#C0DCC0">
<tr>
<td colspan="2" bgcolor="#2A9FAA"><strong>Post a Comment</strong></td>
</tr>
<tr>
<td width="60">Name:</td>
<td><input type="text" name="name2" /></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input type="text" name="mail2" />
(optional)</td>
</tr>
<tr>
<td>Smilies:</td>
<td>{smilies}</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><textarea cols="40" rows="2" id="comments" name="comments2"></textarea>
<br /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="submit" value="Add My Comment" /></td>
</tr>
</table>
</div></div>



div.lh {
width:480px;
height:31px;
background:url(images/Layout/3.png);
padding-top:17px;
padding-left:30px;
font-size:18px;
}

div.lm {
width:489px;
background:url(images/Layout/5.png);
padding-left:15px;
padding-right:6px;
font-size:14px;
padding-bottom:2px;

}


Well, if you could make sense of any of that I hope you'll take the time to help! Thanks much in advance!
effpeetee
12-16-2007, 09:50 AM
Your markup has 32 errors according to the W3 validator.
What a gloomy looking page! I can barely read the text.
Also what specifically are you concerned about that IE7 messes up.

Frank
bazz
12-16-2007, 10:01 AM
yup 32 errors and, I don't see much difference between how it displays in ie6 and ff. positioning is almost identical and, well, erm not as I think you intend. what appears to be the right hand section, sits to the left under the main part of the page.

bazz
Apostropartheid
12-16-2007, 01:53 PM
Looks the same in IE7, although I don't see much the point. I think this, at worst, needs some drastic recolouring.
jamesbond110
12-16-2007, 04:22 PM
alright, if you say there's no difference then I'll leave it at that. The reason the code looks nasty is because I took it out of this:

<?PHP
///////////////////// TEMPLATE Default /////////////////////
$template_active = <<<HTML
<div style="width:510px;">
<div class="lh"><strong>{title}</strong></div>

<div class="lm">{short-story}<div style="padding-top:5px; padding-bottom:3px;">
<div style="float: right;">[com-link]{comments-num} Comments[/com-link]</div>

<div><em>Posted on {date} by {author}</em></div></div></div>

</div>
HTML;


$template_full = <<<HTML
<div style="width:510px;">
<div class="lh"><strong>{title}</strong></div>

<div class="lm"><div style="padding-bottom:5px;">{short-story}</div><div style="margin-bottom:5px;">
<div style="float: right;">[com-link]{comments-num} Comments[/com-link]</div>

<div><em>Posted on {date} by {author}</em></div></div></div>

</div>
HTML;


$template_comment = <<<HTML
<div class="lm">
<div style="text-align:justify; width: 510px; padding-bottom:5px; padding-top:5px; padding-left:10px;">

<table width="90%" cellpadding="3">
<tr bgcolor="#3c6a66">
<td width="60%"><font size="2">Posted by <strong>{author}</strong></font></td>
<td width="40%"> <font size="2"><i>{date}</i></font></td>
</tr>
<tr>
<td colspan="2">{comment}</td>
</tr>
</table>

</div></div>
HTML;


$template_form = <<<HTML
<div class="lm">
<div style="padding-top:10px; padding-left:11px; padding-bottom:10px;">
<table border="0" width="455px" cellspacing="0" cellpadding="5" bgcolor="#C0DCC0">
<tr>
<td colspan="2" bgcolor="#3c6a66"><strong>Post a Comment</strong></td>
</tr>
<tr>
<td width="60">Name:</td>
<td><input type="text" name="name2" /></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input type="text" name="mail2" />
(optional)</td>
</tr>
<tr>
<td>Smilies:</td>
<td>{smilies}</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><textarea cols="40" rows="2" id="comments" name="comments2"></textarea>
<br /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="submit" value="Add My Comment" /></td>
</tr>
</table>
</div></div>
HTML;


$template_prev_next = <<<HTML
<p align="center">[prev-link]<< Previous[/prev-link] {pages} [next-link]Next >>[/next-link]</p>
HTML;
$template_comments_prev_next = <<<HTML
<p align="center">[prev-link]<< Older[/prev-link] ({pages}) [next-link]Newest >>[/next-link]</p>
HTML;
?>

So anyways thanks for comments
jamesbond110
12-16-2007, 04:23 PM
yup 32 errors and, I don't see much difference between how it displays in ie6 and ff. positioning is almost identical and, well, erm not as I think you intend. what appears to be the right hand section, sits to the left under the main part of the page.

bazz

agh! I just noticed that problem on my other computer too :(

EDIT: Whoa, I just checked in IE again and there really is no problem! Hmm, I didn't change anything since I posted this yesterday. Oh well, problem resolved. Thanks.
bazz
12-16-2007, 05:24 PM
Sounds like you may need to empty your cache. I seem to recall when beginning to code, using IE, I frequently thought I had achieved success when really I was seeing a page that was stored in the cache before I had bu$$ered it up again.

Whilst coding, stick to one good browser (I suggest FF) and then to make it work in IE, any of them, it'll take a lot less effort.

bazz