Hi

Im pretty new to HTML and web design.

Im self learned, and have used WDG resources and HTML Dog pages extensivly to try to learn how to do this, and I think I have now grasped the basics.

I made a page in XHTML1.0 Strict and CSS2.1 and actualy was pretty happy with myself. I have even validated both the HTML and CSS files.

All this was done home and used IE8.0 and Firefox3.5.1 to see the result from my designing. And I was happy.

Then I went on vacation and brought along my laptop from work. It have installed IE7.0.

To my surprise my web page was displayed very distorted in IE7.0!!!! I changed both HTML and CSS to make it display correctly in IE7.0, but now it looks weird in IE8.0 and Firefox3.5.1

So I guess we are down to my question:

How do I fiddle with my HTML and CSS to make my web page display correctly in different browsers? They are both vallid, so should I then make them "unvalid"

What browser should I primarily worry about when designing?

In addition to writing valid HTML and CSS I suggest testing in all browsers you care about already from the beginning. When things don't work in one, consider a different approach or even a different layout. There are also ways to show different CSS for different browsers, the trick is to make the hiding tricks future-proof. When it comes to MSIE "conditional comments" seem like a safe way to give older version "unvalid" CSS: http://www.quirksmode.org/css/condcom.html


Depends on your time perspective, right now IE6/7/8 and Firefox2/3 seem to be used most: http://www.upsdell.com/BrowserNews/stat.htm

Future browsers seem likely to support the specs better and better.

I understand what you say, but this is pretty difficult to a freshmann
Damn, I was kinda proud when I managed to produce a web page I liked and it worked in both IE8 anf FF3. Imagine my surprise when I tried it in IE7

So there is no other way than just try and try until you make it fit then. Thinking of how I just use very basic HTML and CSS, I can just imagine how hard this is when you are designing a web page with high end solution.



Yeah, I was aiming for FF and IE. Little did I think of there should be differences between versions of the same browser!
It probably tells how little I know...

Thanks for your reply!

You may want to check it in IE6 as well, it has its own set of bugs and supports much fewer things.


Every new version of a browser supports more things and fixes a few of its old bugs, so yes, older versions can be very different. Fortunately IE4 and Netscape4 are not used anymore.


You're welcome!

The advice I've heard (and that I've followed) is to use a doctype that triggers standards mode and to design for the standards-oriented browsers first. Following the KISS approach helps; the more complex the design, the harder it is to deal with all the browser quirks. Once you've got it working in standards-oriented browsers, figure out what you need to do to get MSIE to display it acceptably.

And yes, the three versions of MSIE in use today (6, 7, and 8) behave differently.

Also keep in mind varying browser settings. Your visitors will have various sizes of browser windows, and some visitors will enforce minimum font sizes or will override your colors and background images. The page should still be usable in such browsing environments.

As a very novice HTML user, using the KISS approach is not only recomended, but rather needed


Yes I would like to be able to do this. Im using a static, pixel-based design so I think it should display correctly in most (?) situations. But realy the truth ATM is that if I manage to make my pages display nice in "regular" FF anf IE6,7&8 Im happy. Perfection will perhaps come later

Thanks for your advices

The key is often not to attempt pixel-perfect. If that includes pixel sized fonts it will be very breakable.

Web pages flow, change, rearrange themselves. It's better to work with that than against it.

And now Im confused.


Realy??
I first tried to make my page with everything in em and/or %. But failed misserably to get thing to display correct even in one browser
After I changed to px for everything I atleast managed to display everything correct in both IE8 and FF3.5. And in IE7 somewhat ok.

Yes I have come to understand this. Also at HTML Dog (my primary source) this is the adviced approach. But as I said, I misserably fail to get it to work at all

Well I guess that I perhaps should abort my atempt to learn HTML/CSS by myself. Perhaps it would be better to purchase a WYSIWYG editor??
Iv only used Notepad2 so far.

IME, a pseudo-WYSIWYG editor isn't going to help.

To see the problem with px-sized fonts, just increase the minimum font size in your browser configurations. If you're using MSIE, it doesn't have a minimum font size, but you can go to the Accessibility settings and configure it to ignore document fonts.

Ok, I tought breakable in terms of different browsers. Regarding users who deliberatley does what you suggest, I have concluded tough luck for them.

My take is that the majority uses standard configs, and as a rocky in "web-design" Im happy if I reach them. I could be wrong ofcourse, and am perfectly aware that my stance is pretty defensive...

Then again maybe I should give it another try with em and/or %

Btw, am I pestering the wrong forum? Am I to HTML illiterate to be here????

You and me alike.



Even when you change the text size in FF?





You must learn to let go of something. The canvas you use now isn't a limited one, like a sheet of paper is. You can't control size, width, height and position all at once. Things must go somewhere when they get too large. It's when you try to stop that the design breaks.





No, no, no, no, no! NO.

No, ofcourse not. But like I said to Darin, I kinda ignored that part...


Not easy when you are a controll freak
I think my main problem is knowing to little yet. And so far it seems easier to make a page that is static, pixel-based. Atleast it makes me feel like Im in controll

BrowserShots is used for viewing webpages in different browsers. See http://browsershots.org/

Oh, you can be a control freak anyway. You can try to make the perfect page that will work without flaw in any imaginable device! Just keep the control to things that relate to web matters and leave the print stuff to the book folks.

People who adjust the font size of their browser or who configure minimum font sizes aren't doing it because they want to break your design. They're doing it because that's what they need, given their browsing environment, eyesight, etc.

Yes I know. But I still am of the same opinion even if my use of language might have been a bit rough...
How much can you except from a novice anyhow?

Much. Very much.

HTML content starts out being accessible. Rigid designs that rely on pixel-perfect layout break the accessibility that is built into HTML. It's easier to leave HTML content accessible than to break the accessibility by trying to implement a rigid design.

Yes I understand your point, and from my learning process Iv also come to understand that this is how it should be.

But that is rather a difficult posistion for me, as I ATM just cant seem to be able to design a page like that.
With jusing rigid design Im "barly" able to make a design that works (IMO ) resonably in both IE8 and FF3.5.
When trying to design accessible/floating, I cant even make a page that works in one of them!!!! Tough I havent given up quite just yet. I suspect there is something crucial that Iv missed

Like I said earlier, perhaps web design isnt the thing for me...

Edit: nasty spelling error

There's always a learning curve.

Tell me about it...

I think Darin meant that the default style of HTML (i.e. without any CSS applied) will be accessible by default. Of course such a page will have a very "predictable" design, though you can easily achieve subtle changes by tweaking colors, margins and similar (generally harmless) properties. It becomes more difficult when you want more drastic layouts such as ones with boxes, columns etc.

Oh, okey

I understand and this is kinda what Iv decided to implement. Im going to rewrite the HTML so that it is readable in its own. Then Im going to try to implement CSS afterwards.
Btw, Im most certainly not trying to design anything fancy

Edit: btw: I just would like to add that one of the reasons Im struggeling a bit is that HTML Dog wich Iv jused a great deal has a bit different approach to this. Those pages advocate as little "presentation" as possible in the HTML, and now I get the impression here that I should atleast put a little effort into the HTML part

That's good advice.


What you should do is create pages with a good semantic structure. Usually the HTML elements suitable for that have decent default styles. For example, compare this:


or this:


with this:


All three should look the same in most browsers, but the italicized text in the first two examples is only meaningful on screen or in print, while a search engine or voice browser may find the semantic information of the EM element in the third example more useful.

Using an accessible layout, I actualy think Iv managed to get it to behave acceptably in IE6-8
But using a "wide screen" in combination with very very small text in FF makes a section with text move around a bit

How conform shoul one expect to get a web page? Display perfectly in all browsers with all settings, or is "some" oddities acceptably. I realize that there aint no "laws" regulating this, but what should one realisticaly aim for?

Another question: what methode is used to test a layout in various browsers with different settings?
Myself I have IE8 and FF3.5 installed, so I try various settings in these. In addition I use MS Expression Web SuperPreview to check IE6-7.

I personally think it's OK that CSS breaks a little in older browsers as long as the page is readable and functional.

You could download Opera and Safari Windows. Then there are various screen cap services and the wonderful BrowserPool (note the free eternal trial!)
http://browserpool.de/




What's that? If it's free and gives true emulations of older IE I want it!

Duh, it just dawned on me. It's the new FrontPage, isn't it? Not free then. How good is the preview in different versions of IE? Can it be trusted?

Umm, something I found googeling It claims to display IE8, IE7 and IE6
Since you do not know about it, its probably not that useful/valid...

Have a look at it here and tell me if its ok: http://blogs.msdn.com/xweb/archive/2009/03...t-Explorer.aspx

No, its free.
But how good it is I do not know

Seems it's been remarkably quiet about this tool since its release. FWIW here's a review: http://accessify.com/news/2009/03/superpre...about-the-name/

Didn't it use to cost several hundred $? Or do they have two programs?

[EDIT]
I get it! The preview thing is a standalone application. I'm getting that one ASAP! Thanks for the tip, Oddball!

No problem. So now, would you design my web page for me????!

Wonder why it's 250MB.

BTW the page I linked to says

SuperPreview is a standalone application that lets you preview (or just view?) what your web page/site/app will render as in IE6, IE8 or IE8 in IE7 compatibility mode.

--if that's correct, can't you get the same IE7 compat mode in a real IE8? So in other words, SuperPreview only replaces IE6 and IE8, not the real IE7?

I don't have IE8 in the first place. But when reading the comments there I get the impression it isn't a live preview, more like screen caps? They talk about some other program. I'll check that out too.

250 MB? Because it's Microsoft, maybe.



You wouldn't want that. My taste is impeccably poor. Or rather my artistic skills are. I see what's good, but I can't create it myself.

Oooh, IETester! Didn't see that at first. Seems to work when I test it, but crashes easily (stilla an alpha release, of course).

Okey. I think Iv made a page that display ok in most settings and browsers (better in some, worse in others )
Iv tried to keep it as simple as possible (obviousley)

Since you people kinda tricked me into a adjustable design, Im now going to pester you with some nitpicks. Obviously you are welcome to point at major things Iv missed completely

Iv put my page up for test here: www.test.nemoria.info
OBS: the links in the navigation column does not work yet. This is only a test of the general layout of my pages!

Like I said I have a few nitpicks:

1. If I change the font size in a browser, how do I make an image change size also? I would like the flag in the upper left corner to be as wide as the navigation column if the font size changes

2. Can I and if so how, avoid the map image to move into the navigation column if the browser window gets very small?

3. If the browser window gets small enough the text in the heading will start to appear below the flag. How do I avoid this? I tried with putting the flag and text in two different "divs" but then I was unable to align the text to the middle of the flag.

You can specify the image width with CSS em units.


What do you want to happen instead?

How???? Iv specified the width in the HTML documet???? An IMHO that is needed to make it display ok without CSS.
Can I use em in the HTML document?

Arghhh, now Im confused again


I would like it to move leftwards until it meets the margin of the navigation column

If you specify a new width in the style sheet, that will override the width in the HTML.

Unless it's needed to accomplish some trick, keeping width and height for images in the HTML is good. Page loads nicer (even with CSS on).