Text from Define Page isn't collapsing viewing in smaller screen

I put the following info in my Define Pages, and it looks great on my 1280 x 800 screen. But when I bring up the site on another computer....the text doesn't collapse like the rest of the site. Anyone have an idea as to what I can do with this? Thank you in advance.

Here is my website:

						<table border="0" cellpadding="4" cellspacing="0" width="680">   <tr>

<td><img height="153" width="200" src="images/medium/AngelStars_MED.jpg"></td> <td><font size="4"><b>C</b></font><font size="2"><letter-spacing=.5px><b>umings Memorials has been providing beautiful, quality crafted granite monuments and markers, in the state of Michigan, since 1912. At Cumings Memorials, we take pride in the work that we do. Our purpose is to provide our customers with the quality craftsmanship and service that they deserve. We believe in a non-pressure approach that allows our customers to choose the monument or marker that best represents their loved ones cherished life. We listen to our customers to create the best tribute possible.</b></font></td> </tr> <tr> <td colspan="2"><font size="2"><b>The basic styles of monuments and markers include slants, bevels (hickey or pillow), flat and uprights (for a visual idea as to the general shapes of these styles, look at our monuments and markers section). Within the upright style, there are many variations only limited by the imagination. Besides monuments and markers, we also offer many additional accessories to enhance the beauty of the memorials. Such amenities include: bronze (plaques and statuary), Memorial Lights (uses candles), Peace Lights (solar powered), urns, vases, and portraits (all of which can be purchased online). Services that we provide include cemetery lettering, brick lettering (for fundraisers) and fieldstone lettering. For those who wish to enhance the aesthetics of their yard, we offer many unique landscape products such as: granite stepping stones and granite benches. We also make granite and limestone signs.</b></font></td>

GraniteMan

monumentsplus.com/zen-cart

<table border="0" cellpadding="4" cellspacing="0" width="680">

You have specified the width of your table to be 680 pixels.

To make it flexible you need to use a % width instead. Best practice would be to eliminate the table tags and styling, and make it a div, paragraphs and spans with properties styled in your stylesheet.

Thank you for that info. What would the code be for the div and where would I place it in my stylesheet? I have spent several days on this issue trying to make it right. I did take out all of the code in the define_pages interface for styling (tables etc.) but when I do that, I am unable to get the text to wrap around under the image. Again....thank you for your response.

GraniteMan

<div id="defineMainText"><img height="153" width="200" src="images/medium/AngelStars_MED.jpg">
<p><span class="initial">C</span>umings Memorials has been providing beautiful, quality crafted granite monuments and markers, in the state of Michigan, since 1912. At Cumings Memorials, we take pride in the work that we do. Our purpose is to provide our customers with the quality craftsmanship and service that they deserve. We believe in a non-pressure approach that allows our customers to choose the monument or marker that best represents their loved ones cherished life. We listen to our customers to create the best tribute possible.</p>
<p>The basic styles of monuments and markers include slants, bevels (hickey or pillow), flat and uprights (for a visual idea as to the general shapes of these styles, look at our monuments and markers section). Within the upright style, there are many variations only limited by the imagination. Besides monuments and markers, we also offer many additional accessories to enhance the beauty of the memorials. Such amenities include: bronze (plaques and statuary), Memorial Lights (uses candles), Peace Lights (solar powered), urns, vases, and portraits (all of which can be purchased online). Services that we provide include cemetery lettering, brick lettering (for fundraisers) and fieldstone lettering. For those who wish to enhance the aesthetics of their yard, we offer many unique landscape products such as: granite stepping stones and granite benches. We also make granite and limestone signs.</p></div>

Add to your stylesheet```
#defineMainText {font-weight: bold; font-size: 1.2em;}
#defineMainText img {float: left; margin-right: 1.0em;}
#defineMainText .initial {font-size: 2em;}
#defineMainText p {margin: .5em .5em 1em .5em;}

Most excellent. I will give that a try. Thank you for your time.

Greg

I put the following in my stylesheet but it doesn't affect it at all.

#defineMainText {font-weight: bold; font-size: 1.2em;}
#defineMainText img {float: left; margin-right: 1.0em;}
#defineMainText .initial {font-size: 4em;}
#defineMainText p {margin: .5em .5em 1em .5em;}
#defineMainText p {word-spacing: 2.0em;}

Am I supposed to do something somewhere else too?

Did you paste the html code I gave into your define_main_page.php?

I put the HTML code in the stylesheet and in define pages. Was that the right thing to do?

HTML never goes in the stylesheet. It should be in /includes/languages/english/html_includes/your_template/define_main_page.php.

Also, there should not be anything else in define_main_page.php - no html <head> or <body> tags or the like.

Ok....I took the html code out of the stylesheet and have it only in the define_page section. I changed the font size to 4em in stylesheet but it didn't change anything.

#defineMainText {font-weight: bold; font-size: 4em;}
#defineMainText img {float: left; margin-right: 1.0em;}
#defineMainText .initial {font-size: 2em;}
#defineMainText p {margin: .5em .5em 1em .5em;}
#defineMainText p {word-spacing: 2.0em;}

Am I missing something?

OK looked at your site and the HTML is correctly displaying, and the CSS is in the stylesheet that is being applied, but it is not affecting the display. Weird...

A close inspection shows that you have parentheses instead of curly braces at the beginning of these two declarations:```
#siteinfoCredits
(
text-align: left;
}

#siteinfoLegal
(
text-align: left;
}

Fix those and see what happens (eek! :).

Glenn........You da man!!

Thank you. That worked.

Greg

Everything you had me do works great in FF but the text isn't wrapping around the images in IE6. Is there something I can do to make that happen?

Greg

IE treats padding different than other Browsers, so that is probably an issue here. Before you can work on that though, you need to turn OFF your Right-hand column.

Admin > Configuration > Layout Settings
Column Right Status - Global 0

After that you'll have a better idea of how IE is interpreting the padding.

Thanks...I will try that.

G

I turned off the right hand column. What do I do next. Nothing seemed to change on IE

http://monumentsplus.com/zen-cart/

OK, your' getting there. Something did change in IE, on mine anyway and for the better.

Now you need to change to this:

#navCatTabsWrapper {
width:540px;

Also get rid of a few of the spaces (on the right) of each Sub-category link in your top nav menu, help them look better when closer together.

You will also need to change the width of your Breadcrumb as it goes too far.

Using a 540px width for your main (center) column should resolve most of your IE problems.

Is this what you meant by "Using a 540px width for your main (center) column should resolve most of your IE problems."

/The main content classes/

#contentColumnMain {
vertical-align: top;
letter-spacing: 10px;
width: 540px;
}

Did I put the width in the right spot?
Thank you.

G

Looking better.

Now you have to decide what to do about your Header logo. The spacing you have underneath it is causing IE to show a blank white box on the left-hand side.

Question: Why was this Template not already designed to work properly in IE?
You should go back to the Template creator and have them do this for you.