TSW 3.0 Preview, CSS Talk, & Why IE Sucks

[riverc0il]

so i have been talking about being dragged into the 21st century of web design kicking and screaming for some time now. but i lazily converted my site last year without researching CSS and kept my non-compliant butt in standard HTML. one of my summer projects was to learn CSS, something i should have done a LONG time ago. this stuff is sweet. frustrating at times, but really slick once it is tested and working right.

after two weeks of browsing sites and reading up, i ditched WYSIWYG editors and hand coded 100% from scratch. i always hated coding HTML, but with CSS, it really is the only way to go. you really spend most of your time on the style sheet rather than the main document any ways. once i figured out the syntax and how to "read" the flow of the sheet, it became pretty easy considering i have no prior programming language experience besides basic HTML.

so i have the basic foundation for the redisgn and am going for an xhtml strict version with no deprecated tags. it has been mildly frustrating giving up my tables but will be worth it in the end. without further ado, here is a sample of what i have cooking:

The Snow Way 3.0 In FireFox (woooooo!!!!!!!)

The Snow Way 3.0 In Internet Explorer (boooooo!!!!!)

when i compare the two, i am not sure whether to :lol: or uke: but in either case, internet explorer makes me :angry: !!! i even downloaded IE version 7 beta 3 to see if the suposed CSS improvements made much different... nope! i still haven't figured out a hack that works for this column issue. i have tried a few * / hacks but have been unsuccessful so far.

while learning CSS, i was simply blown away by microsoft's total and complete disregard for established internet standards. i was floored. i knew internet explorer was crap, but i had no idea just how bad it was. any one using internet explorer is relying on the good will of web site developers to spend 80% of their coding time figuring out how to get established standards to be hacked so that IE can read the code. it blows my mind. any good web site developer will develop a site that any browser can read correctly (those old "this site works best in netscape" crap really pissed me off back in the day!). but for the lazy coders, if you are using internet explorer, you are probably not seeing all sites as intended stylistically. so cheers to compliance with standards, probably going to take a month or so to edit all my old pages once the style sheets are the way i like them.

:beer:

 

[Greg]

Nice! It looks awesome. Wanna rework AZ for me?

I know you don't want to hear this, but I always approach design by making things look good in IE first, and then adapt to support other browsers. 75-80% of AZ's traffic still uses IE so you simply gotta support those users first.

 

[bvibert]

I'm always amazed by IE's blatant disregard for the standards too, it's pretty frustrating and I haven't done that much web coding.

CSS is definitely the way to go though. It makes keep the same same style across different pages so much easier, especially when you want to change something.

BTW, it looks good and props for sticking to the standards. So many sites just use whatever works for IE, which means it doesn't always work for compliant browsers like FF.

 

[YardSaleDad]

when i compare the two, i am not sure whether to :lol: or uke: but in either case, internet explorer makes me :angry: !!! i even downloaded IE version 7 beta 3 to see if the suposed CSS improvements made much different... nope! i still haven't figured out a hack that works for this column issue. i have tried a few * / hacks but have been unsuccessful so far.

Try the other IE7

http://dean.edwards.name/IE7/

 

[wintersyndrome]

I agree with the IE comments, Ive ben using Mozillas "camino" browser for Mac for some time now,
1st browser to introduce tabbed browsing
1st browser to store folders of "Quick links"
and a bunch of other features help to make it about 3x faster than IE.

I try not to be a total mac person, but when some companies are so big that they are lethargic on the development and innovation side, its hard to want to use a Windows PC

 

[kbroderick]

On my site, I actually do browser sniffing and send a different stylesheet and index page for IE vs. anything else (on the server side, with PHP, so I'm not relying on Javascript). I hate doing that, but it was the only way to get my main page laid out the way I wanted to without reverting to subpar HTML (except on the IE version, which has less-than-ideal HTML to make up for IE's less-than-ideal rendering engine). On my employer's site, I'm using a drupal module for menus that does dropdowns with CSS only...except for IE, in which case it sends Javascript.

IE is the suck.

 

[skibum9995]

This sounds familiar. I have been working on a pure CSS site for my hiking TRs and pics. How are you doing your nav bar? Is eash menu item in a div? Are there any dropdown menus? I have a single row of divs that make up my menu and it works fine in IE and everything else without browser sniffing (example). If you are using the method of using a list and the display:inline property there is a hack to make it work in IE using a .htc file. You can find more info here. If you have no dropdowns it makes much cleaner code to use a row of divs instead of the list, but with dropdowns the list method is the way to go. I have a site I made with CSS dropdown menus using the list method and I can give you some code if thats what you are trying to do.

 

[riverc0il]

i tried the .htc file hack but it didn't work for some reason. i will have to play around with it. first, IE prompted me that the site was trying to run an unknown file (instant issue because most people will not allow unknown files to be accessed when loading a page). even when i clicked okay, it didn't load right. i am not using drop downs (yet). i would like to, but only my trip report nav button merits a drop down ( reports > years > dates ). each menu item is all part of one div... skibum, is your question suggesting each menu item should be in its own div? i could always make a seperate IE only style sheet for the nav, that is the most likely option at this point.

 

[skibum9995]

skibum, is your question suggesting each menu item should be in its own div?

Yes. Something like this:

<div>
  <div class="nav">menu item 1</div><div class="nav">menu item 2</div>
</div>

Then set the nav class to display: inline in your stylesheet and it'll put everything in a line.

 

[riverc0il]

word. i figured out an easier way. i didn't set height/width for my table nav bars. firefox and opera automatically adjusted everything by IE didn't. i simply divided my width of the div by the 7 list items to get a width for each. viola, test site is online for those interested. i need to go through my css file and REALLY clean house now. i put it together a la carte and added/subtracted stuff willy nilly so there is a lot of wasted code. i need to add the css equivelent of the <!-- -- stuff to notate what all the code is for as well.
http://www.thesnowway.com/test.htm

 

[riverc0il]

mental note: i need to put the article headlines inside their own divs and do something to spurce the headlines up a big.

 

[Greg]

http://www.thesnowway.com/test.htm

Looking slick, but you need to clean up that header graphic. The text (color and clarity) is fugly. Maybe just overlay some actual text vs. making it part of the image itself. The photo iteself is pretty blurry too. I would also standardize on a font in the body. Looks like you have a combination of Verdana and Times, and maybe some Arial in there...

 

[riverc0il]

yea, the header graphic was an old test i created last year when i originally was doing my last redesign. i scaled it down to fit the 750px format so the resize blurred the picture a bit. i actually like the text and color, personal preference i guess. but it is blurry. the body font is all verana with exception of the headline and date of the report/article leads which were intentionally made a different font to make them stand out as titles. it looks kinda blah all uniform text. it is the same way i had the text setup on my last site. i'll play around with a single font to see if it works. thanks for the feedback.

 

[skibum9995]

Looks good. One suggestion I have is to set the border of the W3C image to 0 to get rid of that blue box around it.

 

[Marc]

I would suggest more scantily clad women.

 

[skibum1321]

Yes. Something like this:

<div>
  <div class="nav">menu item 1</div><div class="nav">menu item 2</div>
</div>

Then set the nav class to display: inline in your stylesheet and it'll put everything in a line.

I've been really busy at work lately so I haven't been around much and I'm going to keep this brief. I'll take a stab at the dorky discussion though. It should be something like this:

<ul>
<li>menu item 1</li>
<li>menu item 2</li>
</ul>

Then just style the list using CSS. For some good CSS/Web design reading:
http://www.alistapart.com
http://www.sitepoint.com
http://www.thinkvitamin.com

And to just look at some good CSS and see how they do it:
http://www.csszengarden.com

 

[ctenidae]

I would suggest more scantily clad women.

40 Helens agree.