purplespider Posted June 2, 2004 Share Posted June 2, 2004 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: 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. Quote Link to comment Share on other sites More sharing options...
kaseytraeger Posted June 2, 2004 Share Posted June 2, 2004 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. Quote Link to comment Share on other sites More sharing options...
purplespider Posted June 2, 2004 Author Share Posted June 2, 2004 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? Quote Link to comment Share on other sites More sharing options...
kaseytraeger Posted June 2, 2004 Share Posted June 2, 2004 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> Quote Link to comment Share on other sites More sharing options...
purplespider Posted June 2, 2004 Author Share Posted June 2, 2004 Cheers Kasey, thats first code works perfectly in IE, but when I view the page in Mozilla there is no header row atall, it just shows the page BG. Quote Link to comment Share on other sites More sharing options...
kaseytraeger Posted June 2, 2004 Share Posted June 2, 2004 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. Quote Link to comment Share on other sites More sharing options...
kaseytraeger Posted June 2, 2004 Share Posted June 2, 2004 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. Quote Link to comment Share on other sites More sharing options...
kaseytraeger Posted June 2, 2004 Share Posted June 2, 2004 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... Quote Link to comment Share on other sites More sharing options...
kaseytraeger Posted June 2, 2004 Share Posted June 2, 2004 Here is how it looks in Firefox... Quote Link to comment Share on other sites More sharing options...
kaseytraeger Posted June 2, 2004 Share Posted June 2, 2004 And here is how it looks in IE... Quote Link to comment Share on other sites More sharing options...
purplespider Posted June 2, 2004 Author Share Posted June 2, 2004 Aahaa! Opps! Thanks, working great now! Going to try and get the menu bar to do the same now. Quote Link to comment Share on other sites More sharing options...
purplespider Posted June 2, 2004 Author Share Posted June 2, 2004 Hmm, well I've got this far but its not quite right in Mozilla. **** Couldn't take one more quick peek if you have time? Thanks! Quote Link to comment Share on other sites More sharing options...
kaseytraeger Posted June 3, 2004 Share Posted June 3, 2004 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> Quote Link to comment Share on other sites More sharing options...
purplespider Posted June 3, 2004 Author Share Posted June 3, 2004 Thank you soo much for all your help, kasey! I've got the page looking exactly how I want now! Hope I can return the favor sometime. James Quote Link to comment Share on other sites More sharing options...
kaseytraeger Posted June 3, 2004 Share Posted June 3, 2004 Glad to have helped... Good luck revamping the rest of the site! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.