Making IE/FF compatable web pages.

I have quite the dilemma. Every time I redesign my web site, it seems IE doesn't like it. For the most part I didn't care, seeing as my web site isn't frequented that much, and it's mostly by friends who I have converted to something other than Internet Explorer.

Well, now I might actually have to deal with this problem. EACTE (tech education thing in my county) requested a site be designed for them. I'm all for it, and I already have a design in mind. The problem is, I want to make it look good in Firefox (or any compliant browser) and IE.

I need someone to tell me how to make this page look like this screen (from Firefox).

I have limited knowledge of CSS, and I don't want to have to use pure CSS to fix this (I don't have time to learn it unless I absolutely have to). I'd prefer to know any alternative coding to produce the same result. If CSS is the only way then I'll do that but I'd like to avoid that until after the deadline.

Thanks ahead of time.

#326692

I didn't navigate the other pages, but it looks like the only problem is the Navigation bar...am I correct?

-NC

P.S: The way to fix this probably WILL be CSS, but I haven't looked too much in to the workings of your site .

#326694

I didn't navigate the other pages, but it looks like the only problem is the Navigation bar...am I correct?

-NC

P.S: The way to fix this probably WILL be CSS, but I haven't looked too much in to the workings of your site .

Yah, for the most part. The height attribute of the

Anywho, could you enlighten me to the CSS fix?

#326697

Maybe you can try forcing the height of TDs with some inline CSS?

blah

#326702

Maybe you can try forcing the height of TDs with some inline CSS?

blah

That did it man, thanks!

EDIT: Actually, it fixed the doubling of the bottom image in the nav bar, but the height is still uncontrolable.

#326717

Erm... maybe I'm not reading the code carefully enough, but it seems like your TD with the menu part is in the same TR as the TD with your desktop image. The TD height property only goes so far to control the height. The first thing the browser considers is what the size of the biggest TD in the given TR is, and then every TD gets that height. The TD's aren't independent "boxes"--they're like cells in a spreadsheet. Stretch one, you stretch them all. The solution, again, assuming I'm reading your code correctly, would be to nest the entire menu into it's own table.

This isn't so much a "browser incompatibility" as much as Firefox is being weird by rendering it the way you want it to be rendered.

#326730

Yah, I was thinking of an embeded table, but I figured there had to be a less bloated way considering Opera and Firefox both rendered it right. *goes off to make an embeded table*

#326758

Yah, I was thinking of an embeded table, but I figured there had to be a less bloated way considering Opera and Firefox both rendered it right. *goes off to make an embeded table*

Guess what? I did something slick. My old web design teacher would be proud of me. Check the site, then check the code.

#326764

#326801

Meh, I'll never accept that CSS should be used to position everything. Tables are so much easier to read for the basic relative positioning of elements major elements. I absolutely accept the fact that CSS is more suitable for positioning smaller elements, but for what tables are being used for here, I don't see a problem. And it's not like the site has four levels of nested tables.

#326838

Thats true. I guess it's just personal oppinion on this sort of stuff. But as you already could tell i'm a css fan, so I like to use css for everything

#326974

Meh, I'll never accept that CSS should be used to position everything. Tables are so much easier to read for the basic relative positioning of elements major elements. I absolutely accept the fact that CSS is more suitable for positioning smaller elements, but for what tables are being used for here, I don't see a problem. And it's not like the site has four levels of nested tables.

I don't agree. Although tables look nice in a WYSIWYG editor compared to some CSS (Adobe GoLive CS handles my layouts done in CSS positioning and does a nearly 100% job at displaying the layout), CSS makes things easier once you actually look at the code. It also reduces the amount of tags in your code.

#326983

I also think CSS is the best method, but I'md efinitely having to take everything one step at a time, but hey, I taught myself HTML, why not CSS?

Oh, and I'll check out the extra HTML tags and such.

EDIT: Fixed the extra page tags. Quite curious how they got there though. O.o

#326999

I also think CSS is the best method, but I'md efinitely having to take everything one step at a time, but hey, I taught myself HTML, why not CSS?

That's the spirit. Don't forget a list apart has many helpful articals.

#327025

Regarding CSS-based design, I found the wierdest part was going back to writing really basic HTML.

Things like:

* Using heading tags properly

* Having main navigation in a basic unordered list

* Not having any interface images in the HTML

* Severely reducing the amount of HTML that needs to be written

* Building logical content flow

It feels really odd putting your skills aside and going right back to basics.

You end up with a page that looks great in print, but looks like a giant turd on-screen...

...then you add the CSS, and the magic happens

#327055

And it truly is magic--some amazing things can be done. Try disabling the CSS on the more advanced web design sites--A List Apart, hicksdesign, MezzoBlue, etc.

It's really pretty neat.

-nC

P.S: My "path" was somewhat weird. I started in FrontPage many years ago, moved to DW, sorta learned some HTML through osmosis, and then I ended up learning HTML and CSS at the same time (in the weirdest fashion...I simply read the "CSS Pocket Book" and "HTML Pocket Book" that O'Reilly puts out. It works for me.

#327077

... Try disabling the CSS on the more advanced web design sites--A List Apart, hicksdesign, MezzoBlue, etc...

#327210

Yah I noticed the oe on Geek Tech and hicksdesign is also a very well designed website.

Even without going deep into CSS using basic HTML attriburtes already feels weird to me.

#327215

an easy way is to have another stylesheet that only ie will load

#327232

CSS answers all doesn't it? Thanks

#327242

css is definately the only way to go, none of that pre-2000 tables nonsense..

i always write my css aimed at opera and then fix for firefox, and IE.

makes life so much easier (as there are loads of css hacks you can implement to fix rendering bugs in ff/ie).

#335220

I use CSS too. But here's what i usually do when designing a website/page. I do my pages using Dreamweaver, so after I'm contented with a page:

1. I open it in Firefox and 100% of the time i don't get errors.

2. I open it in IE next, then errors show up. I fix it again but this time only the minimal parts that caused the IE problem until everything is solved.

Sometimes when i can't fix it anymore i pull my hair and go nuts! To the extent of cancelling my page designing.

#335225

You should get rid of tables and use div's and css for the layout.

An example my latest site:

The Farewell Reason

#335226

Did you try CSSVista program? In the Same window, you can see both browsers (IE/FF) css view.

#335343

css is definately the only way to go, none of that pre-2000 tables nonsense..

i always write my css aimed at opera and then fix for firefox, and IE.

makes life so much easier (as there are loads of css hacks you can implement to fix rendering bugs in ff/ie).

Yah, I've now transfered to all strict, makes compatability a lot easier. That's about the last thing on my list, still haven't learned that much about CSS for ti to replace tables.

I use CSS too. But here's what i usually do when designing a website/page. I do my pages using Dreamweaver, so after I'm contented with a page:

1. I open it in Firefox and 100% of the time i don't get errors.

2. I open it in IE next, then errors show up. I fix it again but this time only the minimal parts that caused the IE problem until everything is solved.

Sometimes when i can't fix it anymore i pull my hair and go nuts! To the extent of cancelling my page designing.

I did that almsot to the Tee, but then I switched to strict and it always ends up looking identical in all browsers.

You should get rid of tables and use div's and css for the layout.

An example my latest site:

The Farewell Reason

First on my lsit when my new hard drive gtets here, old one messed up, having to use the linux backup computer.

Did you try CSSVista program? In the Same window, you can see both browsers (IE/FF) css view.

I'll take a look at it.

#335367