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?
Cross-browser compatibility
and, yes, the logo is washed out on purpose...
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.
Cross-browser compatibility
If you use a box model hack for the height and add
margin: 0;
to .topbox, it should fix the problem.
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.
Cross-browser compatibility
I don't have Netscape so I can't verify what you're seeing... I don't suppose you tried </discombobulation>
??
I did, however, notice a javascript error- check the attachment for specifics.
Good Luck
Re: 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.
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 :
<!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/
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
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.
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.
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...
Cross-browser compatibility
I just caught that after your post before this one. It doesn't seem to have any effect. Thank-you, though.
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?
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/
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
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?
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?
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%.
Cross-browser compatibility
theres a 1 px border, but the box extends a few hundred px off-screen
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
#menu li a
Hope that helps
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.