19 replies [Last post]
Anonymous
Anonymous's picture
Guru
calgary,alberta
calgary,alberta

http://www.ofadam.com/krister/josh

So there it is. And it looks just like i want it to in IE. But in Netscape, the topbox and leftboxes are all discombobulated. The top box in particular - i know that is not 80 px. what am i missing?

Anonymous
Anonymous's picture
Guru

Cross-browser compatibility

and, yes, the logo is washed out on purpose...

d3signmonk3y
d3signmonk3y's picture
Offline
Enthusiast
Toledo, Ohio
Last seen: 19 years 35 weeks ago
Toledo, Ohio
Timezone: GMT-4
Joined: 2003-07-29
Posts: 59
Points: 0

Cross-browser compatibility

It looks like part of the problem is due to IE getting the box model incorrect. The following link describes the problem.

http://css-discuss.incutio.com/?page=BoxModelHack

Basically, IE may be displaying what you want, but it's not displaying it the way your code should be displayed.

It looks like there may be something else throwing your layout off too though, I'll look at it some more.

d3signmonk3y
d3signmonk3y's picture
Offline
Enthusiast
Toledo, Ohio
Last seen: 19 years 35 weeks ago
Toledo, Ohio
Timezone: GMT-4
Joined: 2003-07-29
Posts: 59
Points: 0

Cross-browser compatibility

If you use a box model hack for the height and add

margin: 0;

to .topbox, it should fix the problem.

Kristersaurus
Kristersaurus's picture
Offline
newbie
Last seen: 19 years 34 weeks ago
Timezone: GMT-5
Joined: 2003-08-04
Posts: 9
Points: 0

designmonkey saves the day again

Im using IE 6.0.28 and its botching the box model. I thought 6 was supposed to get it right? Its also evading all my attempts at model hacks.

KnightWolfJK
KnightWolfJK's picture
Offline
Enthusiast
Washington, DC
Last seen: 15 years 41 weeks ago
Washington, DC
Timezone: GMT-5
Joined: 2003-06-10
Posts: 210
Points: 0

Cross-browser compatibility

I don't have Netscape so I can't verify what you're seeing... I don't suppose you tried </discombobulation>?? Laughing out loud

I did, however, notice a javascript error- check the attachment for specifics.

Good Luck

Diplomacy is the art of letting someone have your way

insin
insin's picture
Offline
Enthusiast
Belfast, NI
Last seen: 19 years 47 weeks ago
Belfast, NI
Joined: 2003-05-07
Posts: 57
Points: 0

Re: designmonkey saves the day again

Kristersaurus wrote:
Im using IE 6.0.28 and its botching the box model. I thought 6 was supposed to get it right? Its also evading all my attempts at model hacks.

IE6 only gets the box model right when you provide a full and valid doctype (which forces it to use standards compliance mode) - your page doesn't have a full doctype :

Your Page wrote:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

See here for some full, valid doctypes to use - this should fix your IE rendering:
http://www.alistapart.com/stories/doctype/

A Pedant Writes...
Into the mountain,
I will fall.

Kristersaurus
Kristersaurus's picture
Offline
newbie
Last seen: 19 years 34 weeks ago
Timezone: GMT-5
Joined: 2003-08-04
Posts: 9
Points: 0

urge...to...smash...rising...

discombobulate: 1; isn't supported by IE. Maybe in the next release. ha. I tried every valid doctype (though the one i probably want is strict xhtml, right?) and...well...everything exploded. IE 6: http://www.ofadam.com/krister/ie6.jpg Netscape 7.1/Mozilla 5.0: http://www.ofadam.com/krister/nes71.jpg

the html is here: http://www.ofadam.com/krister/josh

I want to throw things

Kristersaurus
Kristersaurus's picture
Offline
newbie
Last seen: 19 years 34 weeks ago
Timezone: GMT-5
Joined: 2003-08-04
Posts: 9
Points: 0

java

I believe that java error is due to the timelines crap dreamweaver keeps choosing to throw into the code. I cant figure out why it feels the need to do that, as no animations are defined in the timeline anyway.

d3signmonk3y
d3signmonk3y's picture
Offline
Enthusiast
Toledo, Ohio
Last seen: 19 years 35 weeks ago
Toledo, Ohio
Timezone: GMT-4
Joined: 2003-07-29
Posts: 59
Points: 0

Cross-browser compatibility

From my personal experience I'd recommend starting with XHTML 1.0 transitional and then maybe jump into strict when you're more comfortable with it.

<!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">

I'm pretty sure the above is correct. Somebody please correct me if I missed something.

d3signmonk3y
d3signmonk3y's picture
Offline
Enthusiast
Toledo, Ohio
Last seen: 19 years 35 weeks ago
Toledo, Ohio
Timezone: GMT-4
Joined: 2003-07-29
Posts: 59
Points: 0

Cross-browser compatibility

Not sure how long this has been like this, but I just caught this in the top of your page

<html></html>
<head>

That can't be good... Wink

Kristersaurus
Kristersaurus's picture
Offline
newbie
Last seen: 19 years 34 weeks ago
Timezone: GMT-5
Joined: 2003-08-04
Posts: 9
Points: 0

Cross-browser compatibility

I just caught that after your post before this one. It doesn't seem to have any effect. Thank-you, though.

Kristersaurus
Kristersaurus's picture
Offline
newbie
Last seen: 19 years 34 weeks ago
Timezone: GMT-5
Joined: 2003-08-04
Posts: 9
Points: 0

Cross-browser compatibility

Also, the disappearance of the leftbox in IE after implementing doctype completely baffles me. If nothing else, does anyone have any idea why this has broke?

d3signmonk3y
d3signmonk3y's picture
Offline
Enthusiast
Toledo, Ohio
Last seen: 19 years 35 weeks ago
Toledo, Ohio
Timezone: GMT-4
Joined: 2003-07-29
Posts: 59
Points: 0

Cross-browser compatibility

I'll try and look into it more when I get a chance, but for now I'd suggest running your files through the w3c validation and addressing any issues it points out.

If your page and CSS both validate and there are still issues, it will be easier to track them down I think.

http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

Kristersaurus
Kristersaurus's picture
Offline
newbie
Last seen: 19 years 34 weeks ago
Timezone: GMT-5
Joined: 2003-08-04
Posts: 9
Points: 0

yup

The page validates. Still no go.
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ofadam.com%2Fkrister%2Fjosh%2F

It looks like its supposed to in Netscape...whats up with IE?
Heres a screenshot of what it should look like:
http://www.ofadam.com/krister/netscape.jpg

Kristersaurus
Kristersaurus's picture
Offline
newbie
Last seen: 19 years 34 weeks ago
Timezone: GMT-5
Joined: 2003-08-04
Posts: 9
Points: 0

Cross-browser compatibility

It seems when an element has height or width property set to 100%, it renders as 100% of the screen size, and is then offset, making it extend beyond 100% of the actual screen size. How can I fix this?

insin
insin's picture
Offline
Enthusiast
Belfast, NI
Last seen: 19 years 47 weeks ago
Belfast, NI
Joined: 2003-05-07
Posts: 57
Points: 0

Cross-browser compatibility

Kristersaurus wrote:
It seems when an element has height or width property set to 100%, it renders as 100% of the screen size, and is then offset, making it extend beyond 100% of the actual screen size. How can I fix this?

Are you applying any other properties to the element?

Don't forget that the final box size is:

margin + border + padding + width

...so if you set the width to 100% and then apply additional padding, margin, or borders, the element's width will be larger than 100%.

A Pedant Writes...
Into the mountain,
I will fall.

Kristersaurus
Kristersaurus's picture
Offline
newbie
Last seen: 19 years 34 weeks ago
Timezone: GMT-5
Joined: 2003-08-04
Posts: 9
Points: 0

Cross-browser compatibility

theres a 1 px border, but the box extends a few hundred px off-screen

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Cross-browser compatibility

Hi Kristersaurus,
What I usually try when stuck is comment out sections of code until I find the culprit.
I was just trying that out and found if you remove the width from

Quote:
#menu li a
the menu lines up with the image in ie.

Hope that helps

Kristersaurus
Kristersaurus's picture
Offline
newbie
Last seen: 19 years 34 weeks ago
Timezone: GMT-5
Joined: 2003-08-04
Posts: 9
Points: 0

Cross-browser compatibility

thats awesome. I had to tinker some with some other attributes, but that worked. Now I just have to figure out why leftbox wont show up. Argh.