CAA: Christian Anime Alliance

PostPosted: **Sat Jul 21, 2007 3:44 pm**

Hi everyone,

I'm trying to figure out how to build web pages that are cross-browser/cross screen resolution compatible, but the task has suddenly dropped me in the middle of the browser wars and I was wondering if anyone else has dealt with these problems in the past.

1. I'm trying to use a transparent png for the background of my tables within the website, but I found that all IEs before IE7 won't support transparent pngs. I've tried adding the code



to my header section of the website right below the div that's for all the other browsers (this was taken from a website tutorial on the subject) but it's not resulted in anything whatsoever (the full un-transparent background is still visible in the tables).

2. I found that using 9 px font is huge on an 800x600 resolution, and incredibly tiny on the 1600x1200 (or something like that) screen resolution. Is it possible to set font size as percent of the screen size?

:dizzy:

I never knew that trying to code a webpage up could be so confusing. I don't know if there are any answers to these odd ball questions besides perhaps demanding the users to go out and DL IE7 or put up with the non-transparent background

, but I'd like to see if anyone else has hit this block wall as well first. :

Thank you,
Pascal

-CODE-

<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!- STYLE SETTINGS>
<STYLE TYPE="text/css">
BODY {background-image: url(BACKGROUND.jpg);
background-repeat: 1;
background-position: 75% 40%;
background-attachment: fixed;
background-color: #000000;
margin: 0% 0% 0% 0%;
padding: 0;

}

<style>
body {background-color:#000}
div.hexagon {background:url(HEXAGON.png) repeat;}
</style>


</HEAD>

<!- STUFF FOR DOC>

<Table BORDER="2" WIDTH=62% BORDERCOLOR="#afd2ee" BORDERCOLORDARK="#afd2ee" CELLSPACING="0" CELLPADDING="0" STYLE="position:relative; left:18%; margin: 5% 0% 7% 0%;">
<TR>
<!- Writing Section>
<TD>
<div class="hexagon">

<TABLE WIDTH="90%" STYLE="position: relative; left: 5%; "><TR><TD>
<FONT FACE="Verdana" STYLE="font-SIZE:17px;" COLOR="051639">

<!-ENTER TEXT FOR PRIMARY PARAGRAPH HERE>

<!- THESE ARE USED TO MAKE THE DIV BACKGROUND FILL THE WHOLE TABLE>

_________________________________

</FONT>
</TD></TR></TABLE>

</div>
</TR></TD>
</Table>
<!-END DOCUMENT>
</BODY>
</HTML>

PostPosted: **Sat Jul 21, 2007 4:10 pm**

As a rule, I do not support IE for most of my websites. Yes, I have been where you are, and yes it's possible to make sites that work with any browser.

I've probably coded a thousand or so HTML pages, and in the last few years I've started giving up on I.E. If there was any reason other than market share, I'd consider still supporting it, but I can't find any - so I don't.

If you don't have to support I.E., it's a lot easier! >.<

PostPosted: **Sat Jul 21, 2007 5:50 pm**

or...

Or you could use all of the above methods!

Javascript can detect which browser is in use. A simple function could be used to generate the propper segments of HTML and put them in their respective spots.

PostPosted: **Sun Jul 22, 2007 2:02 pm**

As a rule, I do not support IE for most of my websites. Yes, I have been where you are, and yes it's possible to make sites that work with any browser.

I've probably coded a thousand or so HTML pages, and in the last few years I've started giving up on I.E. If there was any reason other than market share, I'd consider still supporting it, but I can't find any - so I don't.

If you don't have to support I.E., it's a lot easier! >.<

Yeah I wish that I could just stop supporting IE, and twisted as it is, IE7 supposedly solves the very problem I'm having with IE6 and lower. But sadly most people probobly use IE6 still (Including me). I tried working with the hack above a little more to try and iniate a background fill effect with the png, but found that no matter what I did I couldn't even get it to work in isolation. That stated I at least know that I won't be able to make it work the way I want in IE6 or less. However, at the same time I think I may have found a way to make it have partial functionality and I'm going to give it a try now.

by using a script that only runs on IE 6 or lower I can use IE specific filter settings I.E. filter: alpha(opacity=...) to change the transparency of the table ellement I'm trying to work on. If I'm really lucky the use of a <SPAN STYLE="position: relative;"> will stop the text from being see-through, however I do expect that at the very minimum the pictures I wanted to place over the table will still inheret the transparency (Transparency inheritance can't be voided

).

I also agree, Javascript is likely the only way to modify my text size, and I'll be looking more into it online at the w3 schools (I may end up picking up a text as well at some later point do to it's flexibility).

Thank you everyone for the help and wish me luck in implementing this thing!

-Pascal

PostPosted: **Sun Jul 22, 2007 3:25 pm**

._.
http://www.getfirefox.com

PostPosted: **Mon Jul 23, 2007 9:50 am**

IE below IE7 does not work with transparent PNGs. This is an established fact that has been around for... forever and I know of no hack that actually works to make it supporty them. Hence the reason most webmaster use JPEGs or GIFs.

The majority of the internet still uses IE (or at least that is true for my site visitors) so I continue to supporty IE and Firefox. It usually means you can't do as cool of stuff and that the websites look at little different in both browsers.

As for the font size I use 9-10myself because other wise it is too hard to read on larger screens. Most people have 1024x768 monitors or larger, and the people using 800x600 are used to seeing huge text so I wouldn't worry about it being too big for them.

There is a way to use clever CSS coding to send certain styles to IE and others to Firefox. You could check CSS Zen Garden for some resources/info.

PostPosted: **Mon Jul 23, 2007 9:20 pm**

MyrrhLynn wrote:As for the font size I use 9-10myself because other wise it is too hard to read on larger screens. Most people have 1024x768 monitors or larger, and the people using 800x600 are used to seeing huge text so I wouldn't worry about it being too big for them.

Indeed, and anyone using 1600x1200 (such as myself) has to have adapted to reading small text. Size 9 seems tiny if you haven't used 1600x1200 for long, but after a few days your eyes adjust.

PostPosted: **Mon Jul 23, 2007 9:27 pm**

I have these two big monitors at work, which means I have to FORCE fonts to be large enough for me to read them. I REALLY don't like forced layouts. I mean, if I have 30 inches of screen, and someone says, "no you can't have more than 550 px across," then I chose not to use their site.

PostPosted: **Mon Jul 30, 2007 2:13 pm**

Mithrandir wrote:I have these two big monitors at work, which means I have to FORCE fonts to be large enough for me to read them. I REALLY don't like forced layouts. I mean, if I have 30 inches of screen, and someone says, "no you can't have more than 550 px across," then I chose not to use their site.

Yet another reason why all those cutesy little IFrame layouts that take up about 1/6 the screen on 1280x1024 screens (that's including the special little scroll bar they always stick in there) need to be taken from the internet and thrown in the nearest volcano. (lol, I really don't like those things in case you didn't guess).

I think something that can be just as helpful for readability is how you use the colors on your site. If the font is small + a hard to read color people will get annoyed and leave. What's even worse is small + blinding or in some other ways painful to eyes.

If you make your text highly readable with the colors used for the foreground + background you can get by with a smaller font. You could use a size 16 font but if it's orange font on a red background people's eyes are going to tear up just trying to read it. :wow!:

Actually I think the day is very near when people won't bother coding for 800x600 screens anymore. Depending on your site stats (and a good tracker will let you know the screen resolution) you can decide if you want to code for it or not. Personally I'm going to be switching to 1024x768 layouts by the end of this year because only a tiny number of my visitors are still on 800x600. You shouldn't make the people with big monitors suffer just because 1% of the internet still on 800x600 would have to scroll.

PostPosted: **Mon Jul 30, 2007 2:44 pm**

I think everyone needs to learn to design sites with em.

PostPosted: **Mon Jul 30, 2007 5:16 pm**

*agrees with ML*

blkmage wrote:I think everyone needs to learn to design sites with em.

as in:

Code: Select all: <p>Hello, <em>USER</em>.</p>

...? That works for one thing, I suppose.

PostPosted: **Mon Jul 30, 2007 6:23 pm**

em, the unit.

The rationale behind designing with ems is that anything defined by an em scales with the text, if you choose to increase the font size in the browser. That way, the design is in the same proportion, but it doesn't force users using gigantic resolutions to use a site that only uses 10% of their screen.

CAA: Christian Anime Alliance

Website Problems\ resizable font and IE pngs...

Website Problems\ resizable font and IE pngs...