Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

FireFox and Navigator layout rendering problems 1

Status
Not open for further replies.
strivejason

strivejason

Programmer
Jan 22, 2005
10
CA
Hi,
I'm quite at the end of creative ideas on how to solve my browser compatability issues. I have two sites ( & that both display perfectly in IE, but the DIV layers mess up in FireFox and Navigator. At least, I think it's the DIV layers. I don't know what to look for.

Could anyone give a helping hand in pinpointing my problems? I'd appreciate it.

Jason
 
Sort by date Sort by votes
I'm looking into your problems. I like your design concepts - very professional. However, something I see everyone missing with regard to the css switch, is a complete doctype. You've got a partial.

The first thing I did was add this doctype to your northernhardwood page:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

Notice what happens to the right column once you do that...

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
Thanks cLFlaVA,

Hmmm... I added the full doctype, and now my right column is entirely messed up, and the whole page is off-center. Why is that? What does XHTML Doctypes do that is different? Obviously, I'll have to take some time to nail out all the differences with the new doctype for everything to work again...

Jason
 
Upvote 0 Downvote
Basically, it's not what a complete doctype does differently, rather, it's what an incomplete or non-existent doctype DOESN'T do.

Without a complete doctype, a page is forced into quirks mode, which basically means there are no standards, and most browsers handle html differently. With CSS, there is no clear-cut way to make two columns cascade properly. You need to use sneaky work-arounds.

Take a look at this article: For an example of two-column css layouts, you can view the alistapart source, or you can check out my site, which is currently under construction. The home page, though, should give you a good idea of what to do.

If you want, I can dumb it down for you (no offense intended at all). Let me know what you think.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
I think I need it dumbed down a bit for the first bit, anyway. At AListApart, he added another (?) background color code to his body tag, which would function as the white background on northernhardwood, right? So, how do my columns not match up, then? I would still background-colour them with the brown, but do I have to play with the pixel widths of the divs to get it to fit properly?

I appreciate your help immensely!
 
Upvote 0 Downvote
no problem. specifically what do you need help understanding?

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
DocTypes say that "This page conforms to this version of the standard" without one or with an incomplete one your saying "this is some HTML, intrepret it as you will" which means that different browsers will do drastically different things.

As for the alignment problem... you may want to try turning some of the divs into tables (the leftcontent and right content) and giving the tr or the td the style -- then using relative positioning as opposed to absolute. Absolute positioning makes assumptions about your vistor's veiwing habits, computer and platform. If the person browses at a lower resolution, or with windows not maximized then the user has to use vertical and horizontal scroll as opposed to just vertical scroll. horizontal scroll means that he has to scroll back and forth on each line... After a little while of this he/she will get fed up and find another conpany to spend his/her money with.

The tables will format arround the text and images nicely no matter how the user browses if you use relative sizes and positions.
 
Upvote 0 Downvote
Thanks all for your helpful posts! I've got lots of ideas to start working with. A question for you, jstreich: I've tried to learn relative positioning, but it was always very confusing and hard to figure out. How do you think I could implement it on my pages? (If you need something to use as an example, pick on
Thanks.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
816
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
224
lmcate
lmcate
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
226
tyutghf
tyutghf
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
693
PeDa
PeDa
dvannoy
  • Locked
  • Question
Simple Layout
Replies
3
Views
167
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top