Resolution/Image Issue

[jason.gladstone]

Hello,

I put together a web site to sell t-shirts (as if there could be a
more cliche web site) and I am having problems with the border. There
is a border that wraps around the context on each page. These are
little images that are resized (either using img width or img height)
to display the correct image size.

I have the border running under two grayed out tabs which are each
90px (table cellpadding, cellspacing, and border are all 0) and the
border is 180 pixels. This works fine on other resolutions but I when
i view it through a computer that has a resolution of 1680 x 1050, it
appears that the 180px border will only render to 179px leaving a gap
in the border. I don't understand why it is doing this.

The web page is http://www.fratalog.com/index.aspx

Please help!

 

[Adrienne Boswell]

Gazing into my crystal ball I observed (e-mail address removed) writing
in

Hello,

I put together a web site to sell t-shirts (as if there could be a
more cliche web site) and I am having problems with the border. There
is a border that wraps around the context on each page. These are
little images that are resized (either using img width or img height)
to display the correct image size.

I have the border running under two grayed out tabs which are each
90px (table cellpadding, cellspacing, and border are all 0) and the
border is 180 pixels. This works fine on other resolutions but I when
i view it through a computer that has a resolution of 1680 x 1050, it
appears that the 180px border will only render to 179px leaving a gap
in the border. I don't understand why it is doing this.

The web page is http://www.fratalog.com/index.aspx

Please help!

You have more problems than that. Run the page through a validator. Is
the background supposed to be pale blue? I have my window background set
to pale blue, so sometimes when authors are lazy, I see my lovely blue
background. There's a bunch of bloated code there, too.

 

[John Hosking]

There
is a border that wraps around the context on each page. These are
little images that are resized (either using img width or img height)
to display the correct image size.

....or the not-quite-correct size.

I have the border running under two grayed out tabs which are each
90px (table cellpadding, cellspacing, and border are all 0) and the
border is 180 pixels. This works fine on other resolutions but I when
i view it through a computer that has a resolution of 1680 x 1050, it
appears that the 180px border will only render to 179px leaving a gap
in the border. I don't understand why it is doing this.

Different browser? I don't expect any one browser to always be within .5
pixels of perfect, much less do I expect different browsers to be within
one pixel of each other in all things. Maybe the browser and OS are
combining to round your display calculations slightly differently.

The web page is http://www.fratalog.com/index.aspx

I see lines where the default background color (mine, not yours) peeks
through the border on my FF at my default font-size (16px) and larger.
Reducing the text-size even one notch eradicates the break lines. My
display is 1280x1024. In IE6 on the same display, I don't get the breaks
until I resize the text; the two largest sizes provoke the breaking.

You have used a table for your layout, and specified height="664" for
the border images, even though the table _cells_ will naturally grow to
accomodate larger text sizes. If you redesign taking these circumstances
into consideration, does your problem go away?

Also wondering about the product blurbs and why they trail off into
ellipses, as e.g. in "If I had parrot I can think of about 41,943 things
I’d rather have it say but accordi..." Where is the rest of the text?

The "[I'm awesome]" part of your Contact Me tab partially protrudes
above the border in both FF and IE.

YPKT: Pages 2 and 3 are both identical in appearance to page 1.

HTH

 

[Jonathan N. Little]

Hello,

I put together a web site to sell t-shirts (as if there could be a
more cliche web site) and I am having problems with the border. There
is a border that wraps around the context on each page. These are
little images that are resized (either using img width or img height)
to display the correct image size.

I have the border running under two grayed out tabs which are each
90px (table cellpadding, cellspacing, and border are all 0) and the
border is 180 pixels. This works fine on other resolutions but I when
i view it through a computer that has a resolution of 1680 x 1050, it
appears that the 180px border will only render to 179px leaving a gap
in the border. I don't understand why it is doing this.

The web page is http://www.fratalog.com/index.aspx

First of all if you want 160x200 thumbnails then resample your images to
160x200. Don't constrain with HTML attributes WIDTH and HEIGHT. What
ever editor you are using will be much better at reducing the image and
making it sharp that your browser and it will not waste bandwidth with
bloated images.

Next all your images have the same ID. Big no-no.

Next your are using XHTML but have syntax problems because if it. If you
do not need/understand XHTML use HTML.

Next whatever WYSIWYG editor is bloating your markup with deprecated
markup and inline styles, go to htmldog.com and learn a little about
more modern ways of constructing a page and save yourself some grief:

All the repeated
<table cellpadding="0" cellspacing="0" border="0" ...

can be styled

TABLE { border-collapse: collapse; border: 0; }

All the repeated

<td><span id="rptItems_ctl00_lblColor"
style="display:inline-block;font-family:Verdana;font-size:10pt;width:155px;">kelly
green</span></td></tr>

CSS classes can simplify greatly.

Lastly, change your displayed font size and see what happens to your
pixel-perfect positioned design! In Firefox just upping the font once
and your page explodes. Try to design with more flexible containers.

 

[stone]

Well I want to thank you all for the tips! I think I have got my work
cut out for me now - I just have to find the time to do it

I come from a programming background so web images and HTML do's/
don'ts are not my forte. I do appreciate all of you taking the time
to look through it!

Thanks again,
Jason