...

View Full Version : Different renderings in IE and Mozilla



Antoniohawk
01-23-2004, 09:04 PM
http://www.graphics-forum.com/manicpyro/test1.html
http://www.graphics-forum.com/manicpyro/test2.html

The first page (test1) works exactly like i want it to in IE, but not Mozilla. The second page (test2) doesnt work in either, due to the fact that I have removed the xml declaration. I want it to look like the first page in Mozilla and IE without the declaration. How would I go about doing that?

liorean
01-23-2004, 09:08 PM
[:Edit:] no longer a 404...

The XML prolog throws iew into quirks mode, which is the cause for the difference.

Try changing it to incorporate this: these:
div#button {
margin: 0 auto;
}

div#button div{
display: block:
float: left;
}

div#Cont{
clear: both;
}

Antoniohawk
01-24-2004, 06:06 AM
A lot better, but still no go. :(

me'
01-24-2004, 11:36 AM
div#buttons div a {
width: 100%;
height: 100%;
text-decoration: none;
color: #424242;
display: block;
}a tags are inline by default.

Antoniohawk
01-24-2004, 09:08 PM
That doesnt change anything, and I wanted them inline by the way.

liorean
01-24-2004, 09:11 PM
If you have the a elements inline, only the text will be clickable. If you have the a elements as blocks, the entire tabs will be clickable. It's up to you, really, but I suggest you go with the block formatting.

Antoniohawk
01-24-2004, 09:12 PM
Oh ok i understand now, sorry bout that me'. It still isnt changing much in terms of the way they are layed out.

Paul Jr
01-24-2004, 09:31 PM
You might find these two links helpful:

ALA: Taming Lists (http://www.alistapart.com/articles/taminglists/)
css.maxdesign.com.au (http://css.maxdesign.com.au/)

lavalamp
01-25-2004, 03:45 AM
I came accross this thread and I noticed that you were having CSS layout problems, I'm quite good at creating valid cross-browser CSS layouts so I thought I'd help out.
Unfortunately, I'm not very good at fixing other people's layouts, so I completely re-wrote it. I tried to incorporate as much of your CSS as possible into mine and leave your HTML alone, although the HTML got altered a bit and you should notice a few inline styles around the links, I also replaced your alt tags in the links for title tags, since the alt tag is only supposed to be for specifying alternate text for images.

The layout works perfectly in all of these browsers:
IE 5.5 6.0, Moz 1.4 1.5, Moz FB 0.6 0.7, NN 6.22 7.02 7.10, Opera 7.23

Breaks a tiny littly bit in:
IE 5.0, Opera 7.11 (In both of these browsers, the cont div runs a little longer than the welcome div, no big deal.)

Fails catastrophically in:
NN 4.79, Opera 5.02 6.00 (You can't have everything :).)

If you would still rather use your own layout then I understand, I would also rather publish what I'd written myself, so I won't feel put-out if you choose to carry on fixing your own, honest ;). All browser testing was done on this PC, Win XP Home.

Edit: When I make my own layouts I never use ID's, only classes, so I like to use very specific CSS selectors. With this layout, even though there are ID's everywhere I have still used very specific selectors, they aren't really neccesary so you might as well just delete them. I used them here because to me it makes the code more readable, since that is what I'm used to.

coder_seth
01-25-2004, 08:50 AM
perhaps you could help me then. i'm working on this site at work:

http://www.esultants.com/d/dsm/

now, i've been desining for IE6 and FB.7 mostly. the latter because it's my personal choice, and a good representation of a standards compliant browser, as i understand it. but i also understand that IE6 is a considerable improvement over past versions in that department. i checked this site in IE, and it comes up rendering in strict CSS 1 mode. FB claims the same.

but the layouts have several subtle differences that are beyond me. see this page and browse this section in particular for examples of the two. be sure to check between browsers.

http://esultants.com/d/dsm/index.cfm?p=boats

even worse, is that IE5 totally ruins it because of inappropriate sizing of some of the main DIVs, i believe. i haven't adequately investigated it yet though. but i really just wanna tell my boss at work to upgrade his stupid browser, and tell him that since it's free, everybody else should too! gah..

mindlessLemming
01-25-2004, 02:53 PM
Hey man, you shouldn't hijack old threads :o
Your only reducing how many people see your problem by not posting a fresh thread.

p.s. welcome to the forums :D

edit: While I'm replying to your post, I should at least provide some sort of help.
On your boats navigation (New, used,...)
your buttons become totally white for a second or two even on fast broadband. What you need to do is combine the two images (menu_li_bg.gif + menu_li_over_bg.gif) and during the :hover state, move the background-image-position:; so as to reveal the hover bg.
This is (basically) the fabled "Pixy CSS Rollovers"

me'
01-25-2004, 03:52 PM
And, if you didn't follow Andrew's description, here's the documentation (http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/).

coder_seth
01-26-2004, 05:23 PM
thanks guys, but that won't work for dynamic widths!

one solution i read of but haven't tested yet is setting the background images i want to "preload" as actual IMG tags at the beginning of the document. then using styles, just set their display to "none" or give them a position that would render them off screen. that way, they are already cached when those buttons use them for the background.

and i didn't post in a new thread because i know how sometimes forum readers don't like unecessary clutter. but thanks.

mindlessLemming
01-27-2004, 03:56 AM
Yes it will. Think about it, and if you can't work it out, I'll tell you.

coder_seth
01-27-2004, 04:36 PM
ooh. saucy! hehe.. but okay! i'll think about it. and get back to you. :cool:

coder_seth
01-27-2004, 08:03 PM
okay, d00d..

i've given it part of the day, and i still only have the one solution that i had at first glance: that the background image would be longer than i know any of the buttons could possibly be, to account for dynamic widths. but that just seems like a waste!

i think this other method seems to work okay: putting IMG tags in the very beginning of the body for whatever images i wanna load first, and styling them to be positioned off screen.

obviously, the ideal would be javascript, but i don't know javascript well enough to write even a simple rollover script, really. i'm trying to get away from built in Dreamweaver stuff.

lavalamp
01-27-2004, 09:03 PM
No JavaScript involved in preloading. All you have to do is this:




<img src="abd.gif" style="width:100px;height:100px;display:none;" alt="This preloads image 1">

Edit: I must say that I think moving the background image is a brilliant idea and so I will be using that from now on.

coder_seth
01-28-2004, 12:12 AM
no i know about the method you just illustrated. in fact, i'm certain that if you actually read the posts here, you'll see i was talking about already having tried that!

my mention of javascript was meant to say that that's the obvious solution most would come up with, i would presume.

so where's the dood with this moving background image on variable widths solution? :)

mindlessLemming
01-28-2004, 09:29 AM
Your gonna slap yourself when you see how simple it was.
For your benefit, I'm hosting this example (studentwork.qantm.com.au/akrespanis/bits/DansBoatMenu.htm) .

Does that code look familiar? It should :D

Have a look at the background image
http://studentwork.qantm.com.au/akrespanis/bits/buttonSlice.gif

lavalamp
01-28-2004, 07:28 PM
I hate to mention it, but those rollovers take about a decade to load every time.

coder_seth
01-28-2004, 08:15 PM
for some reason i didn't think you could tile it and adjust the positioning.

*slaps self*

thanks man. and those rollovers would take a decade if you're connection is complete ****. if so, i'm sorry. seek help.

coder_seth
01-28-2004, 08:34 PM
http://www.esultants.com/d/dsm/

can anybody please PLEASE help me out.

i understand that my layout is ****ed in IE5 because of the box model problems. i also am aware of the Tantek hack, but not entirely clear on how to implement it. i already know of his site explaining it, but what i'm asking i guess, is if somebody could look at my layout in IE5, and explain what properties, rules, etc. in particular need to be changed.

this project has been nothing but a nightmare. today i was yelled at, insulted, and treated like **** by the neanderthal salesman that sold it, because it hasn't been going smoothly. most of that is NOT my fault. what is a result of my actions, is this flawed layout in IE5, and i'm just trying to get it to work, while dealing with a million other stresses at this point. i would just like some help, please.

sob story, i know, and i can understand if your reaction is, "why should i do your work for you?" but maybe somebody understands what it's like to deal with anxiety and depression and get easily overwhelmed. at a point, no matter how smart or determined you are, you just can't compute, and so again.. i am very respectfully asking for help on this one.

thanks.

seth thomas rasmussen

Paul Jr
01-29-2004, 12:50 AM
Originally posted by lavalamp
I hate to mention it, but those rollovers take about a decade to load every time.
Pffft, pick yourself up a real (http://www.mozilla.org/products/firebird/) browser. :rolleyes:

IE sucks...

mindlessLemming
01-29-2004, 01:16 AM
Originally posted by lavalamp
I hate to mention it, but those rollovers take about a decade to load every time.
ROFL! 364 bytes took a decade to load! :eek:
I'm sorry your poor browser was unable to access its own cache.:o

coder_seth: I'm sorry man, I'm too busy doing my own work and getting ymf (http://www.yourmusicforums.com/index.php) up and running. I looked at your site in IE 5.5, and it looks fine. I looked at it in IE 5.0 and you don't need the box hack, but your menu is totally unusable :( Check out the screen shot to see what I mean.

Andrew

lavalamp
01-29-2004, 01:54 AM
Those poor browsers include IE 5.0 5.5 6.0 & NN 6.22, in case you were wondering, the IE browsers service most of the web-browsing public.

Perhaps I should get some more browsers, I musn't have as many as all of you:

http://www.fsg-uk.com/leavealone/browsers.png

By the way coder_seth, I have a 56Kbit/s, I'm not sure of the statistics but I think that most of the web-browsing public will have the same. Please forgive me oh merciful one for having such a lowly connection.

coder_seth
01-29-2004, 04:19 AM
ha. really? do you have any references on those statistics?

i don't think the broadband demographic is as small as you think. at any rate, the person before you made a very good point. LESS THAN 1k IS NOT TOO BIG. it's 2004 for ****s sake.

and to the person telling me i don't need the box hack, you must have seen the site after some beautiful soul in Brooklyn from the CSSCreator.com forums was kind enough to help me out. now i understand how to use the box model hack too. i love this anonymouse man.

thanks for the replies though, peoples.

Paul Jr
01-29-2004, 04:38 AM
Lol, lavalamp, man... I thought I had issues. :p

I'm jus' kiddin'. :D

On a site note: I have not been able to get IE 5.0 installed! :mad: It's makin' me mad, mad, mad! I have followed instructions at http://www.ryanbrill.com/ plus a few others, yet I have had noooo success!

coder_seth
01-29-2004, 04:42 AM
hmm. i hadn't even noticed, but even in IE 6, you are correct.

man, what the **** is that ****.. ****. :)

seriously though, the image is being called before the markup for that menu is ever seen. goddamn Microsoft..

ah well, i'll just use that Pixy trick.

lavalamp
01-29-2004, 07:30 PM
As much as I hate to admit it, Pyro the great paoched the idea straight off someone else's page, it looks like he's copied what the other person wrote and changed a few words. He did include a link at the bottom of the page to the original site though.

The same site that I got IE 5.0 and 5.5 from, follow this link (http://www.insert-title.com/web_design/?page=articles/dev/multi_IE#downloads) then just download, unzip and run.

By the way, I don't have issues, I like to test. I don't want my site to look like **** in Mozilla just because I couldn't be arsed to download it (even on my ****ty 56Kbit/s connection).

364b is not a very big file I agree, it would take approximately 0.07 seconds to download. But each time IE has to download it, it sends a request to the server to send the file and the server sends the file back, this also adds the ping time on to the time for the image to appear. I pinged qantm.com.au and got all time-outs so God knows what the ping is, must be big though.

lavalamp
01-29-2004, 10:47 PM
Here is an updated layout for Antoniohawk. This layout works flawlessly in these browsers:

IE 5.0 5.5 6.0, Moz 1.4 1.5, Moz FB 0.6 0.7, NN 6.22 7.02 7.11, Opera 7.11 7.23

It's pretty disasterours in these though (these three are always the ones that cause problems):

NN 4.79, Opera 5.02 6.00

coder_seth
01-30-2004, 04:51 PM
this is actually a much better resource:

http://www.skyzyx.com/downloads/

simple ZIPs that you need only to unzip and use. though my IE 4 at home that i got off that site has a bug that makes it inoperable. IE 3 works though, and boy is that funny..

coder_seth
01-30-2004, 06:05 PM
p.s. sorry to have sort of hijacked this thread.. but thanks for everybody's help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum