Jump to content

Page Does Not Display How I'd Like It To In Ie


purplespider
 Share

Recommended Posts

I'm in the process of redesigning one of my client's sites but have run across a problem. The new layout is basically a big table which stretches to fill the browser window, by having 2 cells on the top and left hand sides which have a repeating background so that they can stretch depending on the screen resolution and how much content is actually on the page.

 

Here is the basic layout:

 

layout_problem.gif

 

The 2 blue cells stretch to make the table fill the screen, as does the main content cell, the heading and menu cells MUST stay their actual size.

 

Now, this all seems to work perfectly in Mozilla (see screenshot here) but when I view the page in Internet Explorer it does not render it how I'd like it atall, stretching the header and menu cells instead of the repeating cells (see screeshot here).

 

The actual page is available here: ******

 

If possible can someone take a look at my source code and let me know if it is possible to change it so that IE renders it how I want it to?

 

That would be great thanks,

James

 

P.S. - I used Dreamweaver MX 2004 to do the layout.

Link to comment
Share on other sites

James,

 

Without too much time to look at your code, I'd say your best bet would be to set your "stretchable" graphics as the background image for your header and navigation sidebars. I've never tried it before, but you might try something like this...

 

><tr style="background: url('../images/msg_layout/images/top_rep.jpg') repeat top left;">
<td height="141" colspan="2" valign="top" style="background: url('../images/msg_layout/images/top.jpg') no-repeat top left;"> </td>

 

The actual order of css style properties might need to be changed around a bit. I can never remember whether the repeating property comes before or after the positioning properties. I always have to look it up.

 

You would produce similar code for your sidebar navigation...

 

Also, if the images don't show up at all, it's because I've screwed up the reference in the url(' ... ') portion of the style. You can reference them explicitly as url('http://www.site.com/images/msg_layout/images/top_rep.jpg'), for example.

 

I wish I had more time to look into this for you and give you actual code that will work. I know it's a very simple solution.

Link to comment
Share on other sites

Thanks kaseytraeger, I understand what your telling me to do but didn't realise it was possible, I have got as far as this: ****

 

There is now just 1 long cell at the top which stretches and the header graphic is not repeating like it should, but the repeating graphic is not repeating, any ideas?

Link to comment
Share on other sites

James,

 

Here's a little piece of code I came up with.

 

><html>
<head><title>My title</title>
</head>

<body>

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
 <td height="141" colspan="3" valign="top" style="background: url('http://applecross.uk.com/newsite/images/msg_layout/images/top_rep.jpg') repeat top left;">
	 <div style="height: 141px; background: url('http://applecross.uk.com/newsite/images/msg_layout/images/top.jpg') no-repeat top left;"> 
	 </div>
 </td>
</tr>
<tr>
 <td>Hello</td>
 <td>World</td>
 <td>Kasey</td>
</tr>
</table>

</body>
</html>

Apparently, the row wasn't being styled correctly, so I moved the row styling to apply to the column and moved the column styling to apply to a div contained within the column. I left everything as background images since that's how you had them specified in your original code.

 

Alternately, you could do something like this, which I haven't tested, but which should work if I've done it right...

><html>
<head><title>My title</title>
</head>

<body>

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
 <td height="141" colspan="3" valign="top" style="background: url('http://applecross.uk.com/newsite/images/msg_layout/images/top_rep.jpg') repeat top left;">
	 <img src="http://applecross.uk.com/newsite/images/msg_layout/images/top.jpg" height="141px" />
 </td>
</tr>
<tr>
 <td>Hello</td>
 <td>World</td>
 <td>Kasey</td>
</tr>
</table>

</body>
</html>

Link to comment
Share on other sites

How strange! :)

 

When I tested my sample code, I used IE and Firefox. Both of them showed it a-OK. But I just looked at your page in Firefox, and you are absolutely right, there is no more header!

 

I wonder what interaction is taking place? I'll have to think about this one. I think I'm going to steal your background image and see if I can recreate the strangeness that's going on using the test page I created.

Link to comment
Share on other sites

James,

 

Why don't you try replacing this:

><td height="141" colspan="3" valign="top" style="background: url('..\images/msg_layout/images/top_rep.jpg') repeat top left;">
 <div style="height: 141px; background: url('..\images/msg_layout/images/top.jpg') no-repeat top left;"> 
 </div>

 

With this:

><td height="141" colspan="3" valign="top" style="background: url('../images/msg_layout/images/top_rep.jpg') repeat top left;">
 <div style="height: 141px; background: url('../images/msg_layout/images/top.jpg') no-repeat top left;"> 
 </div>

 

I notice backslashes (\images/) rather than forward slashes (/images/).

 

I'll keep working.

Link to comment
Share on other sites

James,

 

Take a look at my test page. I copied your source and modified the two images of interest to use explicit location "http://..." rather than referential " ../images/...". (I had to do this because otherwise, I wouldn't be able to see your images unless I saved them to my machine.)

 

As you can see, the header works in both IE and Firefox. So I think the problem is you need to replace the backslashes in your background styles with forward slashes.

 

Let me know how this works for you.

 

I'm attaching my test page code for you to look at. You should open it in IE and Mozilla to see what I'm talking about...

Link to comment
Share on other sites

Here is how it looks in Firefox...

Link to comment
Share on other sites

And here is how it looks in IE...

Link to comment
Share on other sites

James,

 

The problem with the left-column navigation is that you've got the first two image elements (Mountain and Sea Guides, Summer Mountaineering) enclosed within <p> tags but not the other navigational images. My suggestion would be to remove the <p> tags from the first two images. Paragraphs have built-in padding to visually separate them from other elements.

 

I removed the <p> tags and the column realigned as it should look.

 

Alternately, you could place each of the navigation elements in it's own <p> tag, but make sure you style them as

<p style="margin: 0; padding: 0;">

to remove all space around them.

 

As a third possibility (and my favorite, since your navigation is really a list of items), place each nav image as a <li> within a <ul>. The following code should be helpful.

 

In the <style> portion of your head document or in a separate style sheet:

>ul#nav {
list-style-type: none;
margin: 0;
padding: 0;}
ul#nav li {
padding: 3px 0; /*provides 3px top and bottom padding*/}

In the html, code your links as

><ul id="nav">
<li><a href="index.htm"><img src="http://www.applecross.uk.com/newsite/images/msg_layout/button_home.gif" width="165" height="54" border="0"></a></li>
<li><a href="#"><img src="http://www.applecross.uk.com/newsite/images/msg_layout/button_summer.gif" width="165" height="54" border="0"></a></li>
<li><a href="#"><img src="http://www.applecross.uk.com/newsite/images/msg_layout/button_winter.gif" width="165" height="54" border="0"></a></li>
<li><a href="#"><img src="http://www.applecross.uk.com/newsite/images/msg_layout/button_kayaking.gif" width="165" height="54" border="0"></a></li>
<li><a href="#"><img src="http://www.applecross.uk.com/newsite/images/msg_layout/button_tariffs.gif" width="165" height="54" border="0"></a></li>
<li><a href="#"><img src="http://www.applecross.uk.com/newsite/images/msg_layout/button_booking.gif" width="165" height="54" border="0"></a></li>
</ul>

Link to comment
Share on other sites

Glad to have helped...

 

Good luck revamping the rest of the site!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...