Graphics break when changing OE view font

[Prison Kids]

If you go to my site (www.e-bookreview.com)and then to view/text size/largest, the slices I made in photoshop, break up the graphics on the menu tabs.

I solved this on my other site, by designing the site with layers, flattening the image, and making the menu bar a slice below the graphics (see www.prisonkids.com), but I really like the tabs I made, and would like to keep them.

I taught myself photoshop about two months ago, and I am sure I am missing something. I see many sites with this type of layout.

This happens whenever I try to have text in my header. I see now why many sites have a small header with all the graphics below.

Can anyone give me a hand with this issue? Remember that although I have spent every spare minute trying to learn web design, I am still a n00b in this area. So solutions in laymans terms appreciated. Feedback on design is welcome also.

Hi Prison Kids,

Try this:

Go to Line 171 and you'll see:
<TD colSpan=4> <P align=center>&nbsp;

Immediately after </P> at Line 173 add this:
<div id="Layer1" style="position:absolute; width:170px; height:841px; z-index:1; left: 591px; top: 222px;">

Your column's content continues down to Line 589 where there is this code:
<p></P>

Immediately after that, on Line 590, before the </TD></TR>

add the end div tag: </div>

so.. the end will look like this: </div></TD></TR>

New code to add is bold

I have a feeling I'm messing up explaining this lol. If I'm not clear, just PM me and I'll send you a text file It's working correctly over here.

[Prison Kids]

Thanks !!

Although I do not yet fully onderstand the HTML yet, with all of the trial and error I have had on mysite, and phpbb forum, I believe I can insert the codes in the right places . If not I have become very good about backing up my working copies .

Now will this code work on any site that is built the same way? Because I already have a new replcement site on my system I was getting ready to publish next week, and I would like to make a rectangular slice in the header area. (I am adding a menu bar that can grow with the site)

Thank you again...

I don't fully understand it, either lol. But yeah, it should work; I haven't tested the page w/different text view sizing in all browsers but it's working on my IE5.5 ..

The issue was the uncontained content was displacing the slices. As long as you keep the main table at a fixed width, you shouldn't have a problem with the <div> tags.

You're welcome and let us know if you still have issues with it, we'll see what we can do.

[Prison Kids]

My lines are not numbered in my view (Frontpage HTML), but this is the closest reference I could find to <TD colSpan=4>

</TD>
<TD>
<IMG SRC="images/E-bookreview_new2_21.gif" ALT="" width="15" height="17"></TD>
<TD COLSPAN=4>
<p align="center"><font size="4"><b>&lt;</b></font><b>
<font color="#0000FF">
<a href="http://www.powercommunicator.com/products.asp">LISTENING
TAPES</a></font><font size="4"> &gt;</font></b></p>
<B>div id="Layer1" style="position:absolute; width:170px; height:841px; z-index:1; left: 591px; top: 222px;"</B>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="28%">
<form METHOD="GET" ACTION="http://moneycentral.msn.com/partner/redir/extquotes.asp" TARGET="_top">
<tr>
<td width="26%" align="left"><b>

I also installed th /div at the end here:
<B>/div</B></TR>
</TABLE>
<!-- End ImageReady Slices -->

No luck yet, but I am patient, and will keep trying.

You're close, but not there.

The <div> position is incorrect; also, a <div> tag (any tag, really) must be enclosed and begin with an "<div id=>" and end with "</div>"

correct:
<div id="Layer1" style=""....>...</div>

incorrect:
div id="Layer1" style=""....>... /div

The opening "<" is missing and both end "<" and ">" are missing.

I can send you the text file of the entire page code and another text file of the specific code for this relevant part so you can see exactly what/where was altered. PM me for my email addy and I'll send them as an attachment via email, ok?

Once you replace the code, you will see

*p.s. If you'd prefer I just paste the code in this thread, that's no problem. Just LMK [Let Me Know].

[Prison Kids]

OK, I worked around the design with a new style header that allows me to add new page links easily Very happy with that.

I still have the other design in my webs, to experiment with.

Still have the text issue, only this time it affects the right col, and not the graphics.



I guess my question is: Is there a way to lock that font size, w/o embedding it (I still want to be able to change it), so that when users change the view, that font will not change.

I would like to apply it to the entire page is possible.

Hi PK, sorry it took so long to get back to this.

To keep a fixed-width text size on your webpage, use CSS.

Here's a snippet from

http://www.codeproject.com/html/fixe...asp?print=true

     <html>
     <head>
     <title>How to set a fixed text size</title>
     <style type="text/css">
     <!--
     .fixed {font-size:12px}
     -->
     </style>
     </head>
     <body>
     <span class="fixed">This is a test.</span>
     </body>
     </html>

Open your browser, IE and Netscape, and try it now! Changing Text Font (IE) 
or Increase Font/Decrease Font (Netscape), 
you may see, the text size is fixed! 

The point is set font size unit as "px", not "pt". The .fixed is a class selector. 
You can use any name for a class.

Any opening tag of HTML can be used as a selector. For example, <p>, <font>, <a>, 
<bockquote>, <pre>, <h1>, <i>, <table> and <td> etc. 
You also can take <body> tag as a selector. 

A sample as below:

     <html>
     <head>
     <title>How to set a fixed text size</title>
     <style type="text/css">
     <!--
     p {font-size:12px}
     pre{font-size:10px}
     h1{font-size:24px}
     h2{font-size:18px}
     -->
     </style>
     </head>
     <body>
     <h1>This is an example of CSS</h1>
     <p>CSS is really useful.</p>
     <pre> I set a fixed font for my page!</pre>
     </body>
     </html>

Enjoy

[Prison Kids]

Great find !!!

Thank you very much.