« previous next »
Pages: [1]   Go Down

Author Topic: One for the web developers.  (Read 2392 times)

0 Members and 1 Guest are viewing this topic.

Offline Shockwave

  • good/evil
  • Founder Member
  • DBF Aficionado
  • ********
  • Posts: 17422
  • Karma: 499
  • evil/good
    • View Profile
    • My Homepage
One for the web developers.
« on: September 29, 2008 »
I'm making the templates at the moment that will be used for the Codigos home page and also for the homepage here.

Dicab drew some nice template graphics for the codigos site, but it seems that IE7 and Firefox 3 don't do such a good job of scaling graphics. If you look at this forum, the edges are made up of rounded looking tiles. I have always thought it important to construct pages from the smallest tiles possible, however hold left ctrl and scroll the mouse wheel to resize the page and you'll see that as the browser attempts to preserve the aspect ratio, the scaling causes the edges to be out of alignment.

It looks pretty ugly actually and leaves me wondering if the solution has to be mathematical, for example, are there "safe" sizes for corner tiles?
Logged
Shockwave ^ Codigos
Challenge Trophies Won:

Offline benny!

  • Senior Member
  • DBF Aficionado
  • ********
  • Posts: 4384
  • Karma: 228
  • in this place forever!
    • View Profile
    • bennyschuetz.com - mycroBlog
Re: One for the web developers.
« Reply #1 on: September 29, 2008 »
Hmm strange. Never noticed that before.

First I thought it might be because of the usage of tables. Therefore
I googled for some CSS alternatives. But the ones I found like this:

http://www.schillmania.com/projects/dialog2/basic.html

also have scaling problems.

Then I tried to reduce this sites template to some basic parts and
played around in various ways - but unfortunately I didn't come to any
conclusion. If you want to give it a try - here is the reduced source
code which might help with debugging/testing.

Sorry, guess I can't help here  :-\

Code: [Select]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Image scaling test</title>

<link rel="stylesheet" type="text/css" href="http://dbfinteractive.com/forum/Themes/azure114/style.css?fin11" />
<style type="text/css"><!--
#maintable{
width: 90%;
margin: auto;
min-width: 750px;
}
--></style>
</head>

<body><div id="backdrop"><div id="maintable">
<div id="user" style: display: none;>

<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><img src="http://dbfinteractive.com/forum/Themes/azure114/images/img/maintopleft.jpg" alt="" /></td>
<td valign="top" style="background: url(http://dbfinteractive.com/forum/Themes/azure114/images/img/maintopback.jpg);" width="100%">


</td>
<td><img src="http://dbfinteractive.com/forum/Themes/azure114/images/img/maintopright.jpg" alt="" /></td>
</tr>

<tr>
<td style="background: url(http://dbfinteractive.com/forum/Themes/azure114/images/img/mainmidleft.gif) repeat-y ");"><img src="http://dbfinteractive.com/forum/Themes/azure114/images/img/mainmidleft.gif" alt="" /></td>
<td valign="top" style="background: #cdcdcd" width="100%">
Image Scaling Test
</td>
<td style="background: url(http://dbfinteractive.com/forum/Themes/azure114/images/img/mainmidright.gif) repeat-y;"><img src="http://dbfinteractive.com/forum/Themes/azure114/images/img/mainmidright.gif" alt="" /></td>
</tr>
<tr>
<td><img src="http://dbfinteractive.com/forum/Themes/azure114/images/img/mainbotleft.gif" alt="" /></td>
<td style="background: url(http://dbfinteractive.com/forum/Themes/azure114/images/img/mainbotmid.gif);" width="100%">

</td>
<td><img src="http://dbfinteractive.com/forum/Themes/azure114/images/img/mainbotright.gif" alt="" /></td>
</tr>
</table></div>
</div></body></html>
Logged
[ mycroBLOG - POUET :: whatever keeps us longing - for another breath of air - is getting rare ]

Challenge Trophies Won:

Offline Shockwave

  • good/evil
  • Founder Member
  • DBF Aficionado
  • ********
  • Posts: 17422
  • Karma: 499
  • evil/good
    • View Profile
    • My Homepage
Re: One for the web developers.
« Reply #2 on: September 29, 2008 »
Yep, I experimented with a table-less layout too and found the same problem.

It's definately a problem of browsers not being able to scale images accurately enough.. There must be a work around?

I've managed to find similar problems on lots of sites that use tiles for the layout.
Logged
Shockwave ^ Codigos
Challenge Trophies Won:

Offline combatking0

  • JavaScript lives!
  • Senior Member
  • DBF Aficionado
  • ********
  • Posts: 4569
  • Karma: 235
  • Retroman!
    • View Profile
    • Combat King's Barcode Battler Home
Re: One for the web developers.
« Reply #3 on: September 30, 2008 »
I'm stumped but I'll see if I can find a work around.
Logged
You are our 9001st visitor.
Challenge Trophies Won:
Pages: [1]   Go Up
« previous next »