Am I unique?

[audiopro]

Or do all web designers spend far too much time getting web pages to render the same in both IE and FF.
I am not getting into the debate as to which one is best, I just need to be able to code for both without having to nail bits of code into pages to make it all work properly.
As IE is the most common browser I use it to test and develop my pages. I have the clearfix in place but still suffer from divs positioning themselves in the most unlikely places, usually half way up a page on top of other content. Is there a definitive way of telling the browser to start a div at the the very bottom of a page. Most of my pages are created dynamically so their length is unknown at design time. Oh for the days of tables when pages stretched to accomodate their contents.
I have a particular page which is causing me serious problems. It is essentially

Keith

http://www.studiosoft.co.uk

 

[monksnake]

Or do all web designers spend far too much time getting web pages to render the same in both IE and FF.

I'm not old school, but you get better and faster at it the more you do it.

Eventually, by habit, you start writing code that looks the same cross-browser.


<.

 

[Vragabond]

I am with monksnake. Although I would suggest you write for and initially test in FF (or even IE7 would be ok) and then try to accommodate it for IE6. Because FF does follow the standards the closest and will make your code the most correct.

By default, using the correct code and non-bloated approaches will mostly result in a code that will show more or less the same across several browsers. If the page is really complex (usually that is not the case), then some more work will be necessary. And probably you will have to play around a couple of obvious IE6 bugs.

On average, I would say I don't spend a whole lot of time getting the pages to look the same in different browsers. Usually I make it for FF and it looks good in IE6 as well. I have however come to expect where IE6 might cause problems but I am also not fussing about pixel perfect things. If the element is slightly off but still works with the design, I am happy with it.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[BabyJeffy]

Choose a doctype (strict if possible) and ensure your code validates - the HTML as well as the CSS.

Learn about the box-model problems present in IE... and learn about "quirks mode" and how that affects other browsers differently.

If you don't understand some CSS, then take to bits and figure it out... DIVs don't position themselves - they follow the directions you gave them in your CSS (but they do behave unexpectedly if the CSS or HTML is not valid).

Develop in Firefox and test a design early on across your target browser matrix. I find that if I develop in Firefox and then test against IE6, I get Netscape, Opera, Safari and IE7 "for free" (well... most of the time this is true).

Learn about conditional comments (faq215-6625).

And as monksnake mentions... over time you get better at it

You might want to ensure you test against IE6 and IE7 before you go live... IE7 is very different in the way it renders HTML than IE6.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[1DMF]

Personally I code for IE7, it more or less usually works in FF & Opera, and then I fix IE6.

The biggest problem I find with IE6 over the others is the pseudo class :hover for drop down menu's and the min-width / width attributes.

But if you code for IE7/FF , then use the holy IE6 hack * html , it usually comes to your rescue to fix IE6.

and if all else fails, there are a bunch of seriously tallented guys/gals (most have already replied to your question) who will get you on the right path ;-)

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[Foamcow]

It gets easier. You learn what to look out for and with experience you will often be able to create something that just works in both with minimal fixing.

It often comes down to your document structure. Again, experience will allow you to see that structure in a more 'matrix' sort of way.

I described CSS layout to someone once as being 'Zen like'. I still stand by that. You will reach a point where it just clicks into place.

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[audiopro]

What is quirks mode?
Is IE7 and improvement on IE6 or are the bugs just different?

All the tutorials I have read, and they number quite a few now, deal with a simple model but I have yet to find articles on the correct way to fit it all together.
For example - I have a page which is three columns, any one of the columns could be the longest. To prevent them wrapping at smaller screen sizes I have enclosed them in a container. I thought the three columns would sit side by side as their combined widths total less than the container width but they display vertically.
To get them to sit side by side, I have floated them all left. This then makes the longest over lap the bottom of the container and messes up the layout of the rest of the page. I fixed it with the clearfix routine suggested by some of you guys.

Is there a better way to lay out a page of this sort?

Keith

http://www.studiosoft.co.uk

 

[monksnake]

quirks mode is essentially the "mode" your are in when you don't use a DOCTYPE.

IE7 is much better than IE6 in terms of standards compliance.

To get them to sit side by side, I have floated them all left. This then makes the longest over lap the bottom of the container and messes up the layout of the rest of the page. I fixed it with the clearfix routine suggested by some of you guys.

Is there a better way to lay out a page of this sort?

Not that I know of off the top of my head.



<.

 

[audiopro]

I use a doctype but I am never sure which one to use.
I have read up on them but the explanations are as clear as mud in many cases.
This is the one I have been using and my code validates on every page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]

Strict has been mentioned above so I am perhaps using the wrong type. Is there a simple guide you could point me to?

Keith

http://www.studiosoft.co.uk

 

[monksnake]

I usually just use XHTML1.0 Strict for right now. I use XHTML1.0 Strict because it keeps me strict in my HTML coding.

The only reason I'd ever change my DOCTYPE is if I need to use frames, which I never do, but if I did, I'd use the Frameset DOCTYPE.

Here's a list of a bunch of DOCTYPES

http://www.w3.org/QA/2002/04/valid-dtd-list.html

Here's a small explanation about DOCTYPES

http://www.w3schools.com/tags/tag_doctype.asp

<.

 

[Vragabond]

Keith, it's really not that important which doctype you use -- use the one that best reflects your coding style (run your page through the validator and see if you experience a lot of errors with certain doctypes). The important thing is to have one (that is complete and valid), not to have a specific one.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[BabyJeffy]

Keith, there is an article I wrote on "How to choose the right doctype" on my blog... maybe it will help.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[audiopro]

With regards to overall layout, if I take the 3 column example above a stage further, within each column there are distinct sections with different background colours, borders, font sizes etc. (The page is not like Joseph's coat but with subtle colour differences).
Is it normal practice to embed numerous divs within each column in order to achieve the final layout? I also use a few floated divs to allow the text to wrap round certain paragraphs which works fine on all browsers. This method looks like the sort of bloated solution which the 'sperts would frown upon but it is the only way I know.

I have a Flash video which caused me problems. The video is controlled by some javascript which replaces the contents of a div after checking that the flash video is available. It works fine when in a simple layout but does it's own thing when placed in the more complex page.

I am keen to create the code myself as I think that is the only way to learn but I am looking for some overall guidance from you guys.

Keith

http://www.studiosoft.co.uk