Dark Bit Factory & Gravity
GENERAL => General chat => Topic started by: Shockwave 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?
-
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 (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 :-\
<!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>
-
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.
-
I'm stumped but I'll see if I can find a work around.