PDA

View Full Version : URGENT : Web design help needed




me3
11-27-2007, 04:36 PM
Can someone please diagnose and provide the fix for the display of www.rudysreadinglist.com in Internet Explorer 7?

It looks terrible.

Please help!

me3
11-27-2007, 08:45 PM
Can someone running INTERNET EXPLORER 6 confirm that they experience the same issue seen in the image below in Internet Explorer 7? I don't have a copy of IE6 to test with.

http://img517.imageshack.us/img517/3820/rudyfixzs5.jpg

Thanks in advance. I have a fix for Trevor, it's quick and easy, just need confirmation for Internet Explorer 6.

PatriotOne
11-27-2007, 09:36 PM
Here's what it looks like for me but I am not sure what IE I am running. It doesn't say in the properties. How do I tell?

http://i39.photobucket.com/albums/e198/Yekt40/ReadingList.jpg

me3
11-27-2007, 09:39 PM
Thanks, that looks like an old version of MSN Explorer. Can you click on HELP & SETTINGS and see if there is an

ABOUT

option?

It should tell you the browser type and version #.

But I don't think that is any version of Internet Explorer 6 I have ever seen.

Still need an Internet Explorer 6 check please!

PatriotOne
11-27-2007, 09:41 PM
Internet Explorer 6.00.2900.2180

PatriotOne
11-27-2007, 09:43 PM
And I do go through MSN btw which uses that IE I posted above

Sey.Naci
11-27-2007, 09:43 PM
In Firefox for Mac, I get this:

http://i137.photobucket.com/albums/q211/nacisey/Firefox_Mac.jpg

me3
11-27-2007, 09:45 PM
Ok, thanks. Looks like my fix is only good for IE7, but that should help with 30+% of the traffic.

I'll let Trevor know.

Spirit of '76
11-27-2007, 10:18 PM
It looks perfect in Safari on a Mac:
http://img136.imageshack.us/img136/8700/picture4pa4.th.png (http://img136.imageshack.us/my.php?image=picture4pa4.png)

me3
11-27-2007, 10:50 PM
Trevor here is the fix for IE7. For some reason, a new paragraph is not being rendered to space down the main content.

Around line 46 of the HTML (in this area)


<img src="images/bookstack.gif" width="200" height="193" hspace="5"><br>
<img src="images/bookstack.gif" width="200" height="193" hspace="5"><br>
<img src="images/bookstack.gif" width="200" height="193" hspace="5"><br>
<img src="images/bookstack_bottom.gif" width="200" height="186" hspace="5"> </p> </td>
<td width="100%" valign="top" height="2185">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><br />

<br>
</p>
<table width="600" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>

We want to add this


<!--[if IE 7]>
<p>&nbsp;</p>
<![endif]-->

after this


<td width="100%" valign="top" height="2185">
<p>&nbsp;</p>
<p>&nbsp;</p>


---------------

So the final code will look like this


<img src="images/bookstack.gif" width="200" height="193" hspace="5"><br>
<img src="images/bookstack.gif" width="200" height="193" hspace="5"><br>
<img src="images/bookstack.gif" width="200" height="193" hspace="5"><br>
<img src="images/bookstack_bottom.gif" width="200" height="186" hspace="5"> </p> </td>
<td width="100%" valign="top" height="2185">
<p>&nbsp;</p>
<p>&nbsp;</p>
<!--[if IE 7]>
<p>&nbsp;</p>
<![endif]-->
<p><br />

<br>
</p>
<table width="600" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>

That will make a major improvement to the rendering in IE 7.

Sey.Naci
11-27-2007, 11:25 PM
Rather than this:



<p>&nbsp;</p>
<p>&nbsp;</p>
<!--[if IE 7]>
<p>&nbsp;</p>
<![endif]-->
<p><br />

<br>
</p>

Trevor might try this:



<pre>




</pre>

me3
11-27-2007, 11:31 PM
My tweak isn't pretty, it's a kludge, but it solves the #1 browser on the market, and with Firefox and Safari rendering well, may be all it needs.

What are we wrapping in PRE tags?

I'm worried about breaking the display in the currently working browsers.

SwordOfShannarah
11-28-2007, 08:44 AM
OK let me know if that's better.. thank you.

me3
11-28-2007, 09:05 AM
Well, it's a little better, but we can make it perfect now.

When you made the changes, you cleaned up something else (the BR tags) which was breaking the display.

You can remove this code we added


<!--[if IE 7]>
<p>&nbsp;</p>
<![endif]-->

Only remove this. Nothing else. And it will render fine in IE6, IE7 and Firefox 2.x

Thanks Trevor! :D

Sey.Naci
11-28-2007, 12:44 PM
My tweak isn't pretty, it's a kludge, but it solves the #1 browser on the market, and with Firefox and Safari rendering well, may be all it needs.

What are we wrapping in PRE tags?Those are hard breaks, from pressing the Return/Enter key. The 'pre' stands for preformatted. Whatever the web designer inputs within the PRE tag via the keyboard, including spaces, is preserved. For example:



<pre>H E L L O!

How R U?
</pre>


The PRE tag avoids having to use repeated instances of '&nbsp;' between letters and '<br />' between multiple lines.

me3
11-28-2007, 01:23 PM
Oh yeah, I get how PRE works, it's just that different browsers render the default font and font size differently. Which might compound the problem.

If Trevor can remove the IE7 conditional (only), then it should be good to go!

JohnnyWrath
11-28-2007, 01:32 PM
Depends what size I view the page at if the words line up on the book.....the background book image stays centered with the window, but the text does not. If I view it full screen in firefox @1152 x 864 0n a 21" monitor....it is perfect....if I don't use full screen, the text does not line up... I don't know anything about anything, but couldn't you take the pains of making the text part of the image so that it stays with the book no matter what?? Perhaps have the book not stay centered in the window?

Site looks really good though.