[rozwado1]

http://www.nickroz.com

Above is my test page for a new layout/style on my site. I've designed it with Safari in mind and it looks great, but our PC with IE6 on win98 displays it horribly. I don't have access to XP, but I'm hoping it will do a better job.

Looks good in:
Safari 1.2.3
Mozilla 1.6 (mac)
Firefox 0.8 (mac + win)
IE 5.2 (surprisingly - mac)

F*çks up in:
IE 6.0 (win 98)

I could also use a check in :
AOL
Opera
Camino

I get 65% of my visitors from IE6 on XP, so I'm worried I'm gonna have to F*çk up my page to account for that. I'll reimburse the hits you guys give me - just post a link to your page. Nick


edit: fixed the link.

[turtle777]

Well, I don't know how it is supposed to look under Safari, but it looks ok under IE 6 / XP.

In general, you should cut back on the different font sizes and fonts. It just doesn't look consistent.

-t

[rozwado1]

Safari:


The main prob with IE6 on 98 is that it pinches the sidebar out of the top, and displays it below the actual blog content. Something with the margins and width in the CSS.

[effgee]

Originally posted by rozwado1:
The main prob with IE6 on 98 is that it pinches the sidebar out of the top, and displays it below the actual blog content. Something with the margins and width in the CSS.

not only win 98 ... same with ie6 (whatever version it is being upgraded to after applying sp2) under win xp ... like so:

• 

• 

• 

[Mediaman_12]

A good start is getting the page to Validate (but that is no way to guarantee <IE6 compatibility).
If you think that the issue is with borders, margins etc. in IE (and looking at the above screen shot it is), then it could be IE's broken Box Model, that is to blame.

The way padding, borders & margins are applied according to the W3C spec is to ADD them to the width (ie. if you set a width of 20px then apply a 1px border and 5px padding the item will take 32px in the page) MS on the other hand decided to take a more imaginative method, but throw the guidelines out of the window. In IE the above example will only take up 20px in the window ( the 20px width INCLUDES the 1px border & the 5px padding)

[rozwado1]

Originally posted by effgee:
not only win 98 ... same with ie6 (whatever version it is being upgraded to after applying sp2) under win xp ... like so:
<snip> <snip> <snip>

FCUK.

Thanks for the screens eff.

@mediaman: i've tried validation, but IE stays the same. I'll look into the box model hack. Thanks

[effgee]

Originally posted by rozwado1:
FCUK.

He, he, he ... always a pleasure

Here's the working version ... and here's the CSS file ... I checked it in Safari, Firefox (OS X and Win XP) as well as IE 6 under XP ... purrs like a kitten.

[effgee]

(edit 1):... not awake ... double post deleted ...

(edit 2): ... well, since I already have this somewhat useless post lounging around here, I might just as well put it to good use ...

The reason why the layout exploded in IE was the margin setting for your "links" div - as long as both of your columns fit next to each other (width-wise) within your "content" div, it's usually safest (compatibility-wise) to declare your CSS styles like so ...

• (left column) {
  float: left;
  clear: none;
  }
  
  (right column) {
  float: right;
  clear: none;
  }

... plus any additional thingamagingies (border, margin, etc., etc.) you need for your layout, of course

[rozwado1]

Thanks eff. I owe you one.

[storer]

Fine on Firefox XP

[effgee]

Originally posted by rozwado1:
Thanks eff. I owe you one.

no problem ... glad I could help.

[rozwado1]

Site redesign is done - any comments?
Please be harsh (on the design - not my writing).

Click my sig.

[Zimmerman]

It looks nothing like the Safari pic on Firefox 1.0rc XP Pro... just white text background with bulletted text with pictures. Looks like it was done by a novice HTMLer who knows how to use <ul>, <br>, <b>, and <img src...> tags.

[storer]

Originally posted by Zimmerman:
It looks nothing like the Safari pic on Firefox 1.0rc XP Pro... just white text background with bulletted text with pictures. Looks like it was done by a novice HTMLer who knows how to use <ul>, <br>, <b>, and <img src...> tags.

remove the trial.html part.

[AB^2=BCxAC]

I think you've got your CSS working just fine. Looks good, but I can't for the life of me understand why you use that SWF file header for your global navigation menu, except that it looks cool the first time you see it, and that you must be having fun with Flash MX. The links (home, photos, search, categories, contact) should all be text with css. It's like saying you're going to make your home wheelchair accessible, and you build ramps everywhere in your house, except at the front door.

[djohnson]

Those images of Kerry are great! You should start a new thread in the Pol forum with those pictures. They should also be all over the news.

[rozwado1]

Originally posted by AB^2=BCxAC:
Looks good, but I can't for the life of me understand why you use that SWF file header for your global navigation menu, except that it looks cool the first time you see it, and that you must be having fun with Flash MX.

Yeah, I'm starting to realize that it's kind of a pain to navigate. I just got Flash and that's my first legit "creation," so I'm gonna let it ride for a little bit (but I know it needs work).