Confusing header related browser issues

Ive been designing sites for about 4 months. Im designing a site for a client and it is fully functional on Safari, yet Chrome, IE, and firefox cut off the header section of the website, so that the navigation bar is flush with the top.
Its not a code error because the site has no issues in Safari, i just might be missing some information that would allow the other browsers to render my page correctly.

this is the site
1st California Law, Inc.

any reason why this would happen? body position? im clueless.

this is my first post on sitepoint, so if im not providing enough information please let me know how to include my css or html in a post. thanks much for anyone that might feel like helping me out. I have a deadline of friday afternoon if thats more motivation to lend a hand. Appreciate it!

What is it suppose to look like?
And it appears you have quite-a-bit of errors: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.abundantplane.com%2F

on safari you can see the site in its entirety. the other browsers display the site with the navigation bar along the top.

it SHOULD have a 300px high banner for the company (as on safari).
Its a 1300x300 blue banner with company name.

The header div appears to be missing on all browsers but safari, and margining the body down 300px just shows an empty space.

Well… as mentioned the endless HTML errors could be a possible culprit, but I’d not rule out the jquery in there to intentionally break page accessibility with the “pageloads are evil” paranoia, the nonsensical heading orders, the non-semantic markup, nasty case of divvitus, fictional made-up tags, IE conditional chicanery, and host of other design flubs.

The fictional made-up tags in particular could be wreaking all sorts of havoc.

Of course, inlining the style on it, and using images for text pretty well shoots the usefulness of that phone number up top in the foot too… and the flash for NOTHING a static jpeg couldn’t handle likely isn’t helping matters much either.

As Shadow pointed ou, ther are some serious mark up issues…

<TemplateHeader>?? but I woudl take a look at unfinished tags as well :


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/divfade.js"[B]>[/B]</script>

forgetting to close a tag can ruin even good mark up and cause inconsistencies like the one you mentioned as each UA has it’s own way of dealing with mark up errors.

Also… I wouldn’t use a transitional doctype… that is BOUND to lead to headaches with IE.
try something like:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

and style your Hx so as not to use <BR> for space… tho maybe that’s coming from the CMS. Maybe.

Tranny does not actually behave any differently compare to STRICT on IE… It just lets you get the validator to give you a big green checkmark when using tags and attributes that shouldn’t be used on new websites after 1998, and have no business being in your HTML after sometime around 2003 when we finally kicked nyetscape 4 to the curb.

… which is why it’s called “transitional” – it means you’re in transition from HTML 3.2 to HTML 4; or as I like to say, slapping a HTML 4 doctype on your HTML 3.2.

i think you’re using Safari as your default browser in testing your site. Make it work first on Mozilla and then check it to all browsers. Use firebug add-ons to debug issues

thanks everyone, i resolved the issue and the site works on all browsers i believe.

funny sidenote, using a jquery 1.3.1 library allowed the scripts to work in all browsers while the newest (1.6.1) library only worked in safari.

Shadow,
I was under the impression that bot incorrect DocTs and Tranny DocTs sent IE in to quirks, thus giving you a different box model to deal with… also IE7 doesn’t do :hover on elements other than anchors if you use a tranny DocT. Maybe am off?

Tranny and even most invalid or made up doctypes tend to act no differently on IE6+ than Strict. See the HTML 5 lip service for that.

Not sure on the :hover in IE7 – but it’s been six years since I coded using Transitional. Well, easy enough to test… I’ll just slap a Loose 4 Tranny doctype on my menu demo here, fire up VirtualBox…

Yup, works fine, box model behaving as expected in IE 6 & 7, Hovers working in IE7.

… and that’s with the XHTML closing style still in there.

IE6+ doesn’t need a valid doctype, it just needs A doctype; ANY doctype as the first thing in the HTML.

Though the riot of it is, OTHER browser makers are more likely to fail with a invalid or made up doctype; see, some of them will do this crazy thing and try to follow the URL to find the rules for the made up one – that’s WHY a URL is part of a full doctype in the first place. If it fails to find it, poof – quirks.

… and remember, IE isn’t the only browser to have a “quirks” type rendering mode. See FF and Opera’s behavior without DTD’s. I think the only reason the “lip service” HTML 5 one works is it doesn’t include a URL.

Tranny tripping the box model is part of why Transitional is often called “HTML 3.2 with a 4 DTD”, since the ONLY major advantage over saying “screw it” and just vomiting up HTML 3.2 is the box model change on IE6+… well, unless you count the two dozen tags few people vomiting up Tranny actually uses like ACRONYM, BDO, DEL, INS, FIELDSET, LEGEND… or the ones that pre-date HTML 4 and were browser specific like NOSCRIPT, IFRAME, BUTTON, etc…