Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   html cross-browser help (http://www.velocityreviews.com/forums/t590041-html-cross-browser-help.html)

Kevin Audleman 02-07-2008 02:09 AM

html cross-browser help
 
Hi,

I've written some code that works fine in Firefox and Safari, but not
IE 6 on the PC. I can't seem to figure out what is wrong with my code,
especially because the other browsers render it just fine.

I was wondering if anybody could take a look and tell me -OR- point me
in the direction of a good reference for browser compatibility issues.

The site is here: http://quick2m.com/izzy/index.php

And the header is the issue (big gaps show up).

Thanks,
Kevin

dorayme 02-07-2008 02:33 AM

Re: html cross-browser help
 
In article
<ccdb2339-9b75-4fff-bd00-1499fe741895@y5g2000hsf.googlegroups.com
>,

Kevin Audleman <kevin.audleman@gmail.com> wrote:

> I've written some code that works fine in Firefox and Safari, but not
> IE 6 on the PC. I can't seem to figure out what is wrong with my code,
> especially because the other browsers render it just fine.
>
> I was wondering if anybody could take a look and tell me -OR- point me
> in the direction of a good reference for browser compatibility issues.
>
> The site is here: http://quick2m.com/izzy/index.php
>
> And the header is the issue (big gaps show up).


Look at
<http://validator.w3.org/check?verbos...A%2F%2Fquick2m.
com%2Fizzy%2Findex.php> first and fix what you can.

--
dorayme

rf 02-07-2008 02:37 AM

Re: html cross-browser help
 

"Kevin Audleman" <kevin.audleman@gmail.com> wrote in message
news:ccdb2339-9b75-4fff-bd00-1499fe741895@y5g2000hsf.googlegroups.com...
> Hi,
>
> I've written some code that works fine in Firefox and Safari, but not
> IE 6 on the PC. I can't seem to figure out what is wrong with my code,
> especially because the other browsers render it just fine.
>
> I was wondering if anybody could take a look and tell me -OR- point me
> in the direction of a good reference for browser compatibility issues.
>
> The site is here: http://quick2m.com/izzy/index.php
>
> And the header is the issue (big gaps show up).


You are abusing tables for layout and this is one of the hazards. You can
*not* ensure that those cells containing the images will not expand to
contain their content.

Watch what happens when you increase your font size a few notches, even with
Firefox. Everything falls apart.

Why are you using images of text? The is a severe accessibility problem.

--
Richard.



Kevin Audleman 02-07-2008 04:55 PM

Re: html cross-browser help
 
On Feb 6, 6:37 pm, "rf" <r...@invalid.com> wrote:
> "Kevin Audleman" <kevin.audle...@gmail.com> wrote in message
>
> news:ccdb2339-9b75-4fff-bd00-1499fe741895@y5g2000hsf.googlegroups.com...
>
> > Hi,

>
> > I've written some code that works fine in Firefox and Safari, but not
> > IE 6 on the PC. I can't seem to figure out what is wrong with my code,
> > especially because the other browsers render it just fine.

>
> > I was wondering if anybody could take a look and tell me -OR- point me
> > in the direction of a good reference for browser compatibility issues.

>
> > The site is here:http://quick2m.com/izzy/index.php

>
> > And the header is the issue (big gaps show up).

>
> You are abusing tables for layout and this is one of the hazards. You can
> *not* ensure that those cells containing the images will not expand to
> contain their content.
>
> Watch what happens when you increase your font size a few notches, even with
> Firefox. Everything falls apart.
>
> Why are you using images of text? The is a severe accessibility problem.
>
> --
> Richard.


Richard,
I'm somewhat new to this and didn't realize I was abusing tables. I
tried increasing font size in Firefox and just like you said my design
fell apart. Yikes! Is there a better method for doing this?

A lot of the text-in-images is just there as a placeholder. In the end
the only text that will be an image is the logo.

Kevin

P.S. dorayme thanks for pointing out the validator to me!

Travis Newbury 02-07-2008 05:15 PM

Re: html cross-browser help
 
On Feb 7, 11:55 am, Kevin Audleman <kevin.audle...@gmail.com> wrote:
> I'm somewhat new to this and didn't realize I was abusing tables.


Well that only depends on who you are talking to. There are several
divisions here. One is over using tables for layout. There are those
that say it is ALWAYS a no-no, and those that say "why deal with all
this browser incompatibility CSS crap and go with tables until the
browsers get it right." You decide.

You should probably try to work with CSS design, but if you are
between a rock and a hard place remember that MOST of your visitors
will be arriving using IE.

> I tried increasing font size in Firefox and just like you said my design
> fell apart. Yikes! Is there a better method for doing this?


Again, that depends. If you want your layout to look about the same
on everyone's computer, then no, you are doing it right. A few people
that come to your site with ridicules large font setting may not see
your site the way you want them to. But remember they deal with this
on a daily bases and are very used to making adjustments as needs (or
they just leave your site and never return) Will them leaving hurt
your business? Maybe, that depends on what you are selling. No one
can answer that for you but you.

Now, If you don't care how things are laid out, and are only concerned
with the content that is there, then yes, there is a better way.
Google flexible design and you will receive a ton of examples.




dorayme 02-07-2008 09:19 PM

Re: html cross-browser help
 
In article
<e66c58c6-70a2-400e-bb6a-08c94a8c50c0@q39g2000hsf.googlegroups.co
m>,
Kevin Audleman <kevin.audleman@gmail.com> wrote:

> > The site is here: http://quick2m.com/izzy/index.php


> didn't realize I was abusing tables. I
> tried increasing font size in Firefox and just like you [...rf...] said my design
> fell apart. Yikes! Is there a better method for doing this?
>
> A lot of the text-in-images is just there as a placeholder. In the end
> the only text that will be an image is the logo.
>
> Kevin
>
> P.S. dorayme thanks for pointing out the validator to me!



There is no inherent reason that a table layout should "break"
when you enlarge text size. This sort of breaking is usually
caused by the author trying to too heavily constrain the table
layout with cell size dimensions. Being fluid and using tables
are not quite incompatible bedfellows.

nevertheless, you might read:

http://www.sitepoint.com/article/tables-vs-css

--
dorayme

Sam UK 02-08-2008 03:13 PM

Re: html cross-browser help
 
dorayme wrote:

> There is no inherent reason that a table layout should "break"
> when you enlarge text size. This sort of breaking is usually
> caused by the author trying to too heavily constrain the table
> layout with cell size dimensions. Being fluid and using tables
> are not quite incompatible bedfellows.
>
> nevertheless, you might read:
>
> http://www.sitepoint.com/article/tables-vs-css


That article is a bit misleading due to its all-or-nothing approach. In
reality, you have the option of using mostly CSS for layout but relying
on tables to achieve things that are unreasonably difficult to do with
CSS, such as side by side columns of equal height or footers that are
aligned to the bottom of the browser window.

Most of my sites are pure CSS except for tabular data, but given the
choice between messing around with fiddly and over-complex CSS hacks
like faux columns to achieve an effect that is trivial with a table, I
don't feel much guilt about using a table.

dorayme 02-08-2008 07:57 PM

Re: html cross-browser help
 
In article <6139tiF1teebkU1@mid.individual.net>,
Sam UK <sam@fakeaddy.co.uk> wrote:

> dorayme wrote:
>
> > There is no inherent reason that a table layout should "break"
> > when you enlarge text size. This sort of breaking is usually
> > caused by the author trying to too heavily constrain the table
> > layout with cell size dimensions. Being fluid and using tables
> > are not quite incompatible bedfellows.
> >
> > nevertheless, you might read:
> >
> > http://www.sitepoint.com/article/tables-vs-css

>
> That article is a bit misleading due to its all-or-nothing approach. In
> reality, you have the option of using mostly CSS for layout but relying
> on tables to achieve things that are unreasonably difficult to do with
> CSS, such as side by side columns of equal height or footers that are
> aligned to the bottom of the browser window.
>
> Most of my sites are pure CSS except for tabular data, but given the
> choice between messing around with fiddly and over-complex CSS hacks
> like faux columns to achieve an effect that is trivial with a table, I
> don't feel much guilt about using a table.


That is fair enough. The interesting question is how difficult is
it to achieve the column look? For many standards compliant
browsers, there are many strategies that any keen person or
professional author should be able to manage without too much
trouble. A lot depends on the details of what is wanted and the
requirements for cross browser purposes can lead to mess and
fiddle.

You should feel even less guilt when you realise that it is
pretty hard to make first class semantic markup and columns
without tables.

There is another approach you can take. Go as much as your skill
allows for semantic markup, design as much as you can without
needing the visual look of equal length columns that have their
own coloured backgrounds. And when you do fancy to have such,
keep the requirements simple so that you can at least reduce the
fiddle to a minimum.

As it happens, I am looking into this business of equal columns
and have a small set of pages at
<http://netweaver.com.au/floatHouse/> which only yesterday was
added to with a page 10. I am in the middle of making a page on
faux columning too, and more on this are planned as it is seems
so popular a desire to make columns that look like such.

I am aware that it is one thing to expound on some of the
possible strategies and real world applications, that maybe it is
because it is a bit fiddly that it makes for a nice hobby. <g>

--
dorayme

Ben C 02-08-2008 09:41 PM

Re: html cross-browser help
 
On 2008-02-08, dorayme <doraymeRidThis@optusnet.com.au> wrote:
[...]
> As it happens, I am looking into this business of equal columns
> and have a small set of pages at
><http://netweaver.com.au/floatHouse/> which only yesterday was
> added to with a page 10. I am in the middle of making a page on
> faux columning too, and more on this are planned as it is seems
> so popular a desire to make columns that look like such.


Your nested three-column design (Fig 2) is interesting, but it does
require that the text in the pink column is shorter than the higher of
the yellow and green ones, and that the text in the yellow column is
shorter than that in the green.

dorayme 02-08-2008 10:14 PM

Re: html cross-browser help
 
In article <slrnfqpj4l.9b9.spamspam@bowser.marioworld>,
Ben C <spamspam@spam.eggs> wrote:

> On 2008-02-08, dorayme <doraymeRidThis@optusnet.com.au> wrote:
> [...]
> > As it happens, I am looking into this business of equal columns
> > and have a small set of pages at
> ><http://netweaver.com.au/floatHouse/> which only yesterday was
> > added to with a page 10. I am in the middle of making a page on
> > faux columning too, and more on this are planned as it is seems
> > so popular a desire to make columns that look like such.

>
> Your nested three-column design (Fig 2) is interesting, but it does
> require that the text in the pink column is shorter than the higher of
> the yellow and green ones, and that the text in the yellow column is
> shorter than that in the green.


Actually, I have just this minute uploaded some changes, mainly
to the explanatory spiels within the columns on this one. I only
made this page yesterday and am putting in some extra details as
I see fit.

In the engine for this technique - the iterative use of "nuclear"
families - it *is* true that one must know, for each nuclear
component, which of the two siblings within is the longest in
advance.

The text in the pink column certainly needs to be less than the
higher of the two children in the first nuclear family - as you
say.

A severe general limitation for some sites that are under a lot
of development! But in many cases, it just is known which is
longest of a number of columns and so some people might find this
sort of technique useful.

If I had the power to influence, I would advise people not to be
over keen on equal height table style cols.

(I think page 11 will be on using that background image technique
one reads about. I have made some demos already and it is a lot
of fun and quite easy to do.)

--
dorayme


All times are GMT. The time now is 02:54 PM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.