IE 5.5 PC turns my horizontal list out of wack

[bradyj]

Any ideas why it works on IE 6.0 but not on IE 5.5 properly? Looks like something with a defined width:
http://www.dotfive.com

Almost done, portfolio page tomorrow and some image adjustments. Refreshing the home page will give you some new images and text randomly.

[ReadMe.txt]

i'm just exploring the code for the list now, first thing i notice is the horrible compression on that header image though - I'd make it a trans PNG so that the gradient shows through ans erver up a GIF for IE.

ok, so thats a little weird - have you tried setting margin and padding to 0 on the #nav li a - the #subnav style are completely unused as far as I can see and you might wanna run it through the validator with fully warnings on - in one of the decs you use line-height twice, altho i forgot which one =/

[bradyj]

Here's the nav CSS:

/*main navigation*/
#nav {
clear: both;
position: absolute;
top: 160px;
left: 17px;
list-style-type: none;
margin: 0px;
padding: 0px;
width: 762px;
height: auto;
border: 2px solid white;
background: transparent url(images/header.jpg) no-repeat scroll -19px -50px;
z-index: 5;
}
#nav li {
display: block;
float: left;
}
#nav li a {
line-height: 24px;
display: block;
width: 127px;
color: #FFFFFF;
text-align: center;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: transparent;
text-shadow: none;
}
#nav li a:hover {
background-color: white;
color: #333;
text-shadow: 2px 2px 3px gray;
}


and the xhtml:

<ul id="nav">
<li><a accesskey="h" href="index.php">home</a></li>
<li><a accesskey="o" href="profile.php">company profile</a></li>
<li><a accesskey="p" href="printdesign.php">print design</a></li>
<li><a accesskey="d" href="digitaldesign.php">digital design</a></li>
<li><a accesskey="n" href="consultation.php">consultation</a></li>
<li><a accesskey="c" href="contact.php">contact</a></li>
</ul>


Are you just talking the black to gray gradient or are you talking about the shadow around the whole thing... or are you talking about the logo for the header?:)

[ReadMe.txt]

i mean the logo for the header - that JPEG outline is just ugly :(

(edited previous post btw)

[bradyj]

i'm just exploring the code for the list now, first thing i notice is the horrible compression on that header image though - I'd make it a trans PNG so that the gradient shows through ans erver up a GIF for IE.

ok, so thats a little weird - have you tried setting margin and padding to 0 on the #nav li a - the #subnav style are completely unused as far as I can see and you might wanna run it through the validator with fully warnings on - in one of the decs you use line-height twice, altho i forgot which one =/

subnav is the left content on the subpages, they're used. I saw that line height (fast find) now, thanks for that one:) it was in the footer ul li

I'll run it through the validator again, and I'm going to do a little:
http://flumpcakes.co.uk/css/optimiser/

If you haven't tried it, it's useful!

I've tried the margin, padding, how does that look for you?

...and you're right about the logo -- I'll give it more pop, hold on... thanks for the help, it's appreciated :D

[ReadMe.txt]

i didn't actually try it cos i didnt think it would work, for some reason IE5.5 is incrrectly reading the 762px width of the parent ul, cant see why tho - perhaps set the <li>'s width to 127px as well?

[bradyj]

i didn't actually try it cos i didnt think it would work, for some reason IE5.5 is incrrectly reading the 762px width of the parent ul, cant see why tho - perhaps set the <li>'s width to 127px as well?

I tried that and also figured it may be good to specify the UL in there as so:

#nav ul {
width: 762px;
height: auto;
margin: 0px;
padding: 0px;
}


Don't know why, but it may help.

[AaronW]

I've decided the best method for such things is to remove rules until the object looks the same in both browsers. Then add them back in one by one until they stop looking the same. Then go from there :)

Oh, and that big image should be either PNG or JPEG. GIF's not the way to go I don't think.

[bradyj]

Oh, and that big image should be either PNG or JPEG. GIF's not the way to go I don't think.

That's questionable sometimes -- I'd say that large images should be gif's if it requires a lot of crisp text or block colors... but you're right, for this I should have done a nice png, whick I'm going for right now.

Whoops :o I thought you said ALL big images should be either PNG or JPEG, never mind this response, can't read today.

edit:
A nice PNG for you -- however, it looked the exact same with or without the transparency, so I just left it without and kept the hard gradient.

[AaronW]

Any image of a real life scene should be JPEG (or PNG). GIFs compression method relies on adjacent bits being the same. That is, you can create a 10000px wide, 2px tall gif with a 1px black horizontal line and a 1px white line, and the image will be like 4 bytes.

If you do 1px black and 1px white alternating vertical lines, the image will be much much larger :P This is why cartoons and such make good GIFs.

Wouldn't be surprised if this was common knowledge though... I just remember it whenever I'm saving an image.

[ReadMe.txt]

wouldnt it make sense to have a vertical compress version as well then?

[bradyj]

wouldnt it make sense to have a vertical compress version as well then?

Meaning in reference to Aaron's post? What do you mean by vertical compress? I would just think you'd make a 3px wide by 1px tall graphic and repeat it x and y then, that would do it.

Yeah, these are common knowledge... to some:)

GIF files for Indexed colors (specified color scales), JPEG for millions of colors (or over the indexed color scale), PNG can handle much of both with pure clarity and transparency, especially 32bit png -- which Photoshop can't do (it's only weakness I know of) and Fireworks can.

[mindlessLemming]

ROFL Brady!
I luv this image: http://www.dotfive.com/style/images/littlebaby.jpg

But I DON'T love its alt text...

The image “http://www.dotfive.com/style/images/littlebaby.jpg” cannot be displayed, because it contains errors.

huh?! :rolleyes:

Also, this is irresposible use of accesskeys
<ul id="nav">
<li><a accesskey="h" href="index.php">home</a></li>
<li><a accesskey="o" href="profile.php">company profile</a></li>
<li><a accesskey="p" href="printdesign.php">print design</a></li>
<li><a accesskey="d" href="digitaldesign.php">digital design</a></li>
<li><a accesskey="n" href="consultation.php">consultation</a></li>
<li><a accesskey="c" href="contact.php">contact</a></li>
</ul>


Reserved Keys
Reserved Keys in IE 5.5/6
F – File
E – Edit
V – View
A – Favorites
T – Tools
D – Address
H – Help

Reserved Keys in NS 7
F – File
E – Edit
V – View
G – Go
B – Bookmarks
T – Tools
H – Help
W – Window

Reserved Keys in Opera 7
F – File
E – Edit
V – View
N – Navigate
B – Bookmark
M – Mail
W – Window
H – Help

...and then you've got assistive technologies, which use almost all the keys...

Numbers are the only safe choice ;)
More info: http://www.clagnut.com/blog/193/

What was the actual problem I was meant to help with again? :o

[ReadMe.txt]

i think you've confused yourself a tad with the alt text mindless - i read that and i thought it looked suspect.

It's a BG image so there is no alt text - when opening an image on its own in mozilla the alt text defaults to 'this image cannot be..' etc so that if it's a bit dodgy you get that error message instead of a red x.

An the accesskey note, i would recommend underlining the letter of each link that is the accesskey for easier browsing.

[Antoniohawk]

Sorry to put salt in your wounds here Brady, but dotfive isn't looking too good resized in Firefox or IE in Windows. The left side of the site is cut off and you can't scroll over there to see the content. :(

[bradyj]

Sorry to put salt in your wounds here Brady, but dotfive isn't looking too good resized in Firefox or IE in Windows. The left side of the site is cut off and you can't scroll over there to see the content. :(

That's ok, it's learning a different layout -- funny, though, I've done quite a bit of CSS sites and it has to be mine that's the trouble maker.

I've made numbered access keys and skip navigation -- I'll underline accordingly and add an accesspage with the sitemap.

When you do a text resize you get this?

[mindlessLemming]

i think you've confused yourself a tad with the alt text mindless - i read that and i thought it looked suspect.

It's a BG image so there is no alt text - when opening an image on its own in mozilla the alt text defaults to 'this image cannot be..' etc so that if it's a bit dodgy you get that error message instead of a red x.

Doh! Of course.... ;)


An the accesskey note, i would recommend underlining the letter of each link that is the accesskey for easier browsing.
...and I would recommened NOT underlining the accesskeys.
If you do it the normal way (<span>H</span>ome), screen readers pause at the span and read it as "H - ome"; not "Home"
At the end of the day, accesskeys aren't worth it. There was a long running discussion on one of the W3C mailing lists about it and even they aggreed it wasn't worth it. That's why accesskeys have been replaced in XHTML 2.

[bradyj]

Doh! Of course.... ;)


...and I would recommened NOT underlining the accesskeys.
If you do it the normal way (<span>H</span>ome), screen readers pause at the span and read it as "H - ome"; not "Home"
At the end of the day, accesskeys aren't worth it. There was a long running discussion on one of the W3C mailing lists about it and even they aggreed it wasn't worth it. That's why accesskeys have been replaced in XHTML 2.

I could do a first character underline, but that CSS wouldn't be recognized by IE. Vile coding...

[ReadMe.txt]

how about using :after and content: in some way to label the access keys - if you have to check link properties or source i dont really see the point.

[Antoniohawk]

Sorry Brady, I should have been more specific. When you resize the browser window it throws the page into wacky cut-off mode.

[bradyj]

Ah, that's probably my use of the absolute positioning center -- or do I need to assign an overflow element to the page that I'm missing :confused:

Otherwise, I can center with easier methods.

I also believe I'm going to swing this over to em fonts and adjust the positioning better for text resize.

edit: overflow visible on the body seems to do it justice now in my firefox, you?

[Antoniohawk]

Nope, still no go man.

[bradyj]

Hmm, well, is the CSS Auto method supported by IE or is it going to puke it out?
http://www.bluerobot.com/web/css/center1.html

[ReadMe.txt]

<body>
<div id="all">
...
</div>
</body>


css:
body {
text-align: center;
}
div#all {
width: 60em;
margin: 0 auto;
text-align: left;
}

That'll work in IE5+ and pretty much anything else decent - make sure you throw IE6 into strict *cough* mode however. Width must be defined btw.

EDIT: typed that then clicked the link. in short then - yes.

[Antoniohawk]

That method should most definitely work in IE, I've used it before.

[AaronW]

Could underline accesskeys with an image set to position with ems or something maybe?

I still don't use them. You can either type the first few letters of a link FF to go there, or tab through them.

[ReadMe.txt]

aha, tabindex for accessibility - that what i reading the other day. if only i could remember where....

[bradyj]

aha, tabindex for accessibility - that what i reading the other day. if only i could remember where....

Oh, I got that for the form and I've read it just about everywhere:)

[mindlessLemming]

tabindex: Opera (I thing it's opera...might be IE) pukes if you have tabindex on some links but not all.

[]|V|[agnus]

Minutia, yes, but hey, every little bit counts:

display: block; on your #nav <li>s is redundant and unecessary.

Glad I could help... :p

[]|V|[agnus]

Also, images still look unecessarily low in quality... why?

[]|V|[agnus]

Also, and this has to be blunt, but know I respect you: why is your site so boring? That splash page you had up for like 8 years was more exciting. And your site features the terms "expert", "high-end", "increase productivity" and "corporate this branding that" so many times that they ought to outlaw the words so that they retain any meaning for future historical texts about the folly of 20-21st century business. :D Why not set yourself apart and write some copy with meaning? Write something with personality that comes across as honest and let the work do most of the talking. Most of your copy reads like 800 million other vision statements and corporate manifestos... but I dunno, it's likely just me and a few other "special" folks that would even think twice about it, so, play to your audience, I guess? :rolleyes:

I dunno.

[ReadMe.txt]

|V|[agnus']Minutia, yes, but hey, every little bit counts:

display: block; on your #nav <li>s is redundant and unecessary.

Glad I could help... :p

well not really, since the default property of an <li> tag is list-item...

[]|V|[agnus]

:rolleyes:

Pardon me: *unecessary*, but not redundant.

He it setting list-style-type: none on the <ul>, so the optional marker box created in addition to the principal block with any item of the display type "list-item" is, well, opted against... hence, the declaration is not really necessary as the boxes will behave as if they were block already.

(To be fair, I wasn't thinking of the distinction between "list-item" and "block" when I made my initial comment, but turns out my point stands. Good thing experience and a million and one people NOT explicity declaring display: block on their <li>s didn't let me down... :rolleyes: again)

[bradyj]

Heh, let's answer them all -- and I do like harsh criticism, it's the designer's way:), and it makes things better since it's not sugar coated 'well it looks good but...'

I'm putting the glass work I did for my personal site now -- bradyjfrey.com at the moment links up to dotfive, but that'll change here soon. I've made this site corporate boring so that I have a marketing point since I want it to be used as a corporate front not too harshly mixed in with my personal work. Alot of my money making clients that pay much better are aligned with this (ATT, ComEd, Snap-on, etc.) -- there will be four different versions, though -- style sheet switcher soon... but my high end, non corporate design will go through bradyjfrey.com when I get that setup.

The images are low quality since I'm testing the size versus output -- I agree the images need to be better, and that'll happen very soon.

The text is redundant I agree as well -- this was more of a starting point to re-edit and build; and it bares no resemblance to my personal publications and rants because I wanted it to be corporate and not in the first person. Sprucing it up and adding *less* will be the next step.

Think of it more as a test of marketing -- where to target and when. I'll let my personal site push my design I like, and dotfive push the design that's corporate.

I always have a problem with putting the display block on li's -- however, it's needed for the navigation li's or else the full width and height will not be clickable like a button, it'll only target the text as the link element.

[bradyj]

As a side note, though, THAT's the type of criticism I like because it makes my work better -- and I welcome it:)

offtopic, I was checking out your site, and if you get a chance, find Bill Hick's live audience appearance in chicago in 94' -- he flips out royally on some businessman in a way that would make Dick Cheney cry.

[]|V|[agnus]

Oh, I'm very familiar with that performance. Almost as good as the time he rips this guy who yells "Free Bird!" a much deserved new one. How can you top a performance where the performer screams, "Hitler had the right idea, he was just an underachiever!" in the heat of passion?

Now <em>that's</em> tough love. :cool:

Another observation: the graphics with more color make or break the design in large part. Ones like the guy's disgruntled forehead and even, though I hate to say it, the one with the giant baby head (:( I know, I'm sorry...) leave everything feeling sort of flat. Perhaps it is the imbalance more than anything that irks me? If they were all one way or the other it might seem all right.

Then again, my aversions could all be rooted in how much I hate Arial for anything other than extended passages of text... :)

[mindlessLemming]

|V|[agnus']Also, and this has to be blunt, but know I respect you: why is your site so boring?

Like Brady said, there are going to be multiple themes... and with me on the staff, one of those may just end up being some rediculously bright, ultra cartoon theme ;)

[bradyj]

Like Brady said, there are going to be multiple themes... and with me on the staff, one of those may just end up being some rediculously bright, ultra cartoon theme ;)

:eek:

That's one of the things I posted to everyone, I feel that the images are imbalanced to the layout -- digital design section has that filler image at the moment, and it doesn't blend well. Those will be adjusted.

[]|V|[agnus]

Oh, I apologize. I admittedly only *scanned* some replies. :[

Site looks nice though. I look forward to the Thundercats vs. Voltron theme.

[bradyj]

He-man is really what's hip now, don't forget it.

[mindlessLemming]

He-man is really what's hip now, don't forget it.
Pfff...Go back to the 80's, and take He-man's mullet haircut with you.
We all know that the next theme for dotfive is going to be The Snorks
:D

[bradyj]

Pfff...Go back to the 80's, and take He-man's mullet haircut with you.
We all know that the next theme for dotfive is going to be The Snorks
:D

Mullets are tight (http://www.mulletsgalore.com/).

[brianszep]

[QUOTE=bradyj]Here's the nav CSS:

/*main navigation*/
#nav {
clear: both;
position: absolute;
top: 160px;
left: 17px;
list-style-type: none;
margin: 0px;
padding: 0px;
height: auto;
border: 2px solid white;
background: transparent url(images/header.jpg) no-repeat scroll -19px -50px;
z-index: 5;
/*new code */
width: 764px;
voice-family: "\"}\""; /* ie5win fudge starts */
voice-family: inherit;
width: 762px;
}/* end new code*/



Brady,

Looks like you forgot some code for the nav.css to get ie 5.x to play nice.
:)
I didn't add the html>body stuff because it is already in you style.css. The 764px width did allow the nav bar to be one line. Which is what I think you want.

Later,

-Brian