Display All Screwed up In IE, Firefox, and Safari

Well your XHTML doesn’t validate for starters. Could that have something to do with it? Try fixing the 18 errors first and then have another look. The very first error seems to be a clue as these misalignment problems are often div-related.

Yeesh. I am overwhelmed. I don’t even know how to read this…

Now, I didn’t make any changes, but it looks fine in Firefox, but it’s still messed up in IE. Sigh. Such a newbie, I don’t even know what I am doing. Thanks for your hlep. Looks like I’ll be buying a book this weekend and sitting down with it.

But…on HTML code…what is a line and what is a column? If there is a hard enter between two lines of code does that count as a line?

Y’all are really helpful. Thanks.

Coding XHTML/CSS for cross browser compatibility isn’t something you’ll pick up over a weekend, trust me. But learning the basics, so you can google IE bugs and make the adjustments is a good start.
Lines are defined by a hard enter as you put it.
Generally speaking, I’ll copy the “view source” and paste into a text editor that will show lines, and then trouble shoot the validation errors.

Great. Which text editor is good/reliable to use?

Thanks for the help.

Everyone has the choice, I’m on a mac, and use the freeware o/s app Smultron.

Glossary#Text_editor is a good list from the codex

For PC, check notepad2 from https://flos-freeware.ch – VERY vanilla, won’t throw extraneous garbage into your code, and does line numbers very nicely. Also will allow editing of js, vbscript, plain text, css, php, on and on.

And when you hit the validator at https://validator.w3.org, make sure when you get the first result page that you check the box next to “show source” – gives you a line number made into a link direct to that problem line.

ALMOST THERE! Woo-hoo. Okay. So it now says I have no errors and it looks fine in Safari and Firefox…but it still looks out of sorts in IE.

Any suggestions would be helpful. You guys have been so supportive and wonderful so far.

Thanks!

Ah, another instance of the classic “IE sidebar drop”. In general, that occurs due to IE’s failure to properly implement the box-model. The way to fix it is to reduce the widths of the components (left and right sidebars, center column) so that IE is happy and they all fit nicely. I’d start with the center section (#content maybe?), and see what happens.

And then once you’ve got it fixed, you have to be careful not to include any graphics that are wider than the section, because at the point where you do that, IE will drop the sidebar again….

Tried playing around with the widths and nothing happened. The widths became smaller but the sidebar never moved.
Hmmm…any other suggestions?

Well, sometimes you have to remove the padding to see if that’s where the problem is. If so, and the space is necessary, you may have to use margins where possible (not always possible), or hackish ways like non-breaking spaces etc. ( )

One thing you could try too would be to make whatever it is that has the 755px width 760px instead. 766px is about as wide as you want to go for IE; that will *usually* display okay for someone who’s viewing at 800×600, though sometimes will throw a horizontal scroll….

Maybe?:
WordPress Troubleshooting: What happened to my Sidebar??

Ohhh! Nice one, Yosemite! Bookmarked….

Thanks ;’)

It looks like I’m back to square one.

Not displaying correctly in Firefox, Safari, or IE.

But it’s all good with the validator thing.

Sigh…