Help me cross-browser test...

DecemberGuild

New Member
Messages
107
Reaction score
0
Points
0
I just made a template that I'll be using for a few pages, but I'm not sure if it looks the same on all browsers..
If you're willing to help, just let me know if the template site looks different than the image, and let me know your browser and operating system. Also, specify what's wrong, such as no gradient, broken tables, etc.
Thanks in advance.

Template: http://www.december.x10hosting.com/template/index.php

Image: http://www.december.x10hosting.com/template/template.png

Edit: If you want to use the template, just save the index.php's source code, and [this CSS file] and [this javascript file].
You don't have to keep the copyright line there, but don't claim ownership of the design and layout.
 
Last edited:

Spartan Erik

Retired
Messages
6,764
Reaction score
0
Points
0
I can already tell you that it's messing up in Firefox: (click image to get full res)

 

DecemberGuild

New Member
Messages
107
Reaction score
0
Points
0
Ouch, that's bad.

Why can't there be a true HTML/CSS standard? :(
 
Last edited:

noerrorsfound

New Member
Messages
1,736
Reaction score
1
Points
0
Firefox 2.0.0.1 (Windows XP)


Opera 9.10 (Windows XP)


PS: Ignore the really ugly background gradient. I have Windows XP set to use 16bit color instead of 32bit, although 16bit is the default for some reason.

(I just set my color back to 32bit like I had it. I had it on 16bit for performance reasons but it doesn't seem to make any difference judging by RAM usage.)
 
Last edited:

DecemberGuild

New Member
Messages
107
Reaction score
0
Points
0
Well, it's clear that the problems IE, like I hadn't guessed that in the beginning.
Thanks guys. I'll be re-writing the code, or making an FF/Opera version.
 

Xenon Design

New Member
Messages
160
Reaction score
0
Points
0
Why use JS to create the gradients? PHP can do it better, using the GD class...i think. I think the JS is the problem here because its not 'repeat-x' the background. The PHP GD class is here http://php.net/image

Go through that and do some googling on 'PHP Image gradient generator' and see what comes up in the way of tuts.

EDIT:
Well PHP doesnt have a gradient function but why not use normal gradients that u make in Photoshop or whatever? Or is there a reason to the JS?

Actually heres a good PHP gradient generator for you...just look at the examples and download the code
http://frenchfragfactory.net/ozh/my-projects/images-php-gd-gradient-fill/
 
Last edited:

DecemberGuild

New Member
Messages
107
Reaction score
0
Points
0
Why use JS to create the gradients? PHP can do it better, using the GD class...i think. I think the JS is the problem here because its not 'repeat-x' the background. The PHP GD class is here http://php.net/image

Go through that and do some googling on 'PHP Image gradient generator' and see what comes up in the way of tuts.
The JS doesn't need to do a 'repeat-x' background because it's not making an image. All it's doing is setting a color.
Besides, based on the image, I can tell that the JS is working fine. It's my layout that's messed up..


I fixed up the code. If anyone can go back and test it again, it would be appreciated.
Thanks.

Edit: I'll look into the PHP thing too, incase I need to. Thanks.
 
Last edited:

Xenon Design

New Member
Messages
160
Reaction score
0
Points
0
Heres a shot of my Mozilla outlining all the block elements (DIVs) on your page. It may help you debug your problem because it looks messy at the top :s
 

Attachments

  • bock_element_outline.png
    bock_element_outline.png
    31.8 KB · Views: 50

DecemberGuild

New Member
Messages
107
Reaction score
0
Points
0
Heres a shot of my Mozilla outlining all the block elements (DIVs) on your page. It may help you debug your problem because it looks messy at the top :s
I see the problem, thanks.
It's the script. In MSIE, the script uses MSIE's gradient filter. In non-MSIE browsers, it uses multiple DIV/Span elements and copies the contents of the ones I made to a new element. It's messing up the layout bad.

Does anyone know of a way to do gradient without images? It's hard to explain, but something that would allow me to make a gradient without the use of images at all would be best.
 

Xenon Design

New Member
Messages
160
Reaction score
0
Points
0
Just use images? It would be quicker than a 1000 divs loading. Is there a reason for not wanting to use images?
 

DecemberGuild

New Member
Messages
107
Reaction score
0
Points
0
Just use images? It would be quicker than a 1000 divs loading. Is there a reason for not wanting to use images?
Well, a couple reasons.
1. As of right now, I can't create images is PS, because I lost my copy.
2. I want a gradient that will automatically fit to the table size. It will be constantly changing, and generating an image every time is not something I will do, even if I had PS.

So, if anyone knows a solution to generate an image with PHP that will automatically check the size of the element, that would help. :biggrin: Otherwise, I need a script, which, for no lack of searching, I cannot find.
I'm beginning to think gradients aren't really possible. :sad:
 
Last edited:

Xenon Design

New Member
Messages
160
Reaction score
0
Points
0
Well why not make it so the PHP image is just repeated on the x axis (repeat-x) in the CSS?
Code:
<div style="background: url(grad.php?type=vert&col1=#FFF&col2=#00CC00) repeat-x;">HELLO</div>

The PHP URL code is theoretical...it may differ to the example I showed earlier.
 
Last edited:

DecemberGuild

New Member
Messages
107
Reaction score
0
Points
0
Well why not make it so the PHP image is just repeated on the x axis (repeat-x) in the CSS?
Code:
<div style="background: url(grad.php?type=vert&col1=#FFF&col2=#00CC00) repeat-x;">HELLO</div>

The PHP URL code is theoretical...it may differ to the example I showed earlier.
That's not entirely what I needed. I needed it to detect the height of the element. But don't worry.

I've updated the code. Let me know how it looks.
 

the_king_dollars

New Member
Messages
153
Reaction score
0
Points
0
In Firefox, the layout is aligned to the left while in the image it is in the center.
Sorry, couldn't supply a screen shot.
 

DecemberGuild

New Member
Messages
107
Reaction score
0
Points
0
In Firefox, the layout is aligned to the left while in the image it is in the center.
Sorry, couldn't supply a screen shot.
That is a problem. I think I may have left something out in the code when I rewrote it.
Also, the "About" and "Navigation" bars should fade down. There should be no break in the coloring.
 

DecemberGuild

New Member
Messages
107
Reaction score
0
Points
0
Top