IWETHEY v. 0.3.0 | TODO
1,095 registered users | 0 active users | 0 LpH | Statistics
Login | Create New User
IWETHEY Banner

Welcome to IWETHEY!

New OK, so one of those kinks that needs working out...
As I mentioned in the other topic I resurrected about CSS in this forum...I've got a new stylesheet, and it's giving me some problems.

Developmental web page is...no longer in existence. Official web page is [link|http://www.mikevitale.com/|here].

Problem: in IE (version 6, so I'm told), the menu box is a solid orange box. The links show up as links if you hover over them, but not if you're not hovering on 'em. Screenshot from my friend's computer is [link|http://kraynight.com/misc/mv.gif|here]. Same screenshot from my PC is [link|http://www.mikevitale.com/images/screen.png|here].

I've tried a few things, but I'll be damned if I can figger it out. I can't run IE on my Windows partition and test my new web page, as that code is on my Linux partition, and, well, the two just can't be running on the same computer at the same time. And no, I'm not going to install Wine on my P2/333 just to run MSIE. :-P

Thoughts?

TIA,
-YendorMike

What if the hokey pokey really is what it's all about?
- Jimmy Buffett, June 20, 2002, Tinley Park
Expand Edited by Yendor Aug. 19, 2002, 11:31:45 PM EDT
New For one thing...
In Mozilla Page Info, Under General Tab Meta:

"MSSmartTagPreventParsing TRUE"

MS is just getting even. :)

Sorry, no help here.
Alex

"Television: chewing gum for the eyes." -- Frank Lloyd Wright
New I miss Duckman
Do you get free chicken?
Mike's Friends
...
Jason Alexander
DARFC

Darrell Spice, Jr.

[link|http://home.houston.rr.com/spiceware/|SpiceWare] - We don't do Windows, it's too much of a chore

New I think I see what it's doing
IE seems to be picking up the anchor colors from the main body style and applying them to the menu style. This is pretty confusing because you just happen to have defined the base link color in the body as the same color as the background in the menubox. This is also why the size of the text in footer is off.

I don't know what you can do to fix it though. I'm not sure if the problem is in the CSS text or in IE. Something isn't handeling the pseudo-classes the way you want.

Jay
New See if that works...
Spent a couple hours online with someone with an IE browser tonight. Here's what we did.

Removed the base "a" style definition, and turned replicated the code that was in there for each section. So now there's "#Content>a" "#Menu>a" etc.

But that still didn't really fix IE. Looked fine in Mozilla, so I left those in there. But IE was still broken.

So I added "class" definitions to all my <a> tags in the HTML itself, and then copied (again) all of my "a" CSS definitions. "a.menu", "a.content:link", "a.footer:visited", etc. Those are in addition to "#Menu>a", "#Content>a:link", "#Footer>a:visited", etc.

So basically, I've doubled my CSS code for links. In addition, all of the HTML <a> tags now have class definitions (<a class=menu>) as well as being inside a "div" tag of the same name.

Somebody, please tell me that there's a simpler way to do this than having to double your code inside all your files?

IE is really fucked up, and it's really starting to annoy the shit out of me...
-YendorMike

What if the hokey pokey really is what it's all about?
- Jimmy Buffett, June 20, 2002, Tinley Park
New Hard to say what's wrong.
I've noticed myself duplicating CSS for no apparant reason other than that seems to be what it takes.

But some thoughts for you to consider: You're not confusing ID selectors (e.g. #Menu and ID='Menu') with class selectors (e.g. .Menu and class='Menu') are you? Also, #Menu>A:link is more restrictive than #Menu A:link as the latter means you can put something else between the #Menu'ed tag and the A tag.

Wade.

"Ah. One of the difficult questions."

New Re: Hard to say what's wrong.
But some thoughts for you to consider: You're not confusing ID selectors (e.g. #Menu and ID='Menu') with class selectors (e.g. .Menu and class='Menu') are you? Also, #Menu>A:link is more restrictive than #Menu A:link as the latter means you can put something else between the #Menu'ed tag and the A tag.


No, I'm not confusing ID selectors with class selectors.

I first tried it with only ID selectors like <div id="Menu"> in my HTML, and #Menu>a:link in my CSS. In that particular instance, my pretty menu box that showed up with white links on an orange background in Mozilla was a completely orange box in IE.

What I did to fix it was add class="menu" attributes to all of the <a> tags in the HTML, and duplicate the "a" definitions in the CSS to be a.menu as well as #Menu>a.

I can't say as I truly understand why that works, but it does.

IE is borked.
-YendorMike

What if the hokey pokey really is what it's all about?
- Jimmy Buffett, June 20, 2002, Tinley Park
New Try this.
Make the div <div class='Menu'>. Make your CSS selector .Menu instead of #Menu. Change the #Menu>A:... selectors to .Menu A:... and remove the class= from the <A> tags. You should also be able to then remove the a.menu selectors.

In my reading, the W3C standard is a little unclear about how style elements cascade from ID selectors whereas class selectors are better defined in that regard. Then too, I haven't played much with ID selectors. :-)

Wade.

"Ah. One of the difficult questions."

New WOO!
That worked! Double-coding removed, and it reportedly still works in IE. Life is good, and Wade roX0rz.

Thankee sai.
-YendorMike

What if the hokey pokey really is what it's all about?
- Jimmy Buffett, June 20, 2002, Tinley Park
New *bows*
Nice to see my long hours of trying to fathom the W3C's CSS document is useful to someone else. :-)

I know it's a bit belated, but you might like to browse [link|http://yceran.org|my web site] for other CSS ideas.

Wade.

"Ah. One of the difficult questions."

New Re: *bows*
Looks good, Wade!

Browses quite nicely in Mozilla 1.0. You also reminded me to download Opera, if only to test that my site works in it. (It does.)

Kudos!
-YendorMike

What if the hokey pokey really is what it's all about?
- Jimmy Buffett, June 20, 2002, Tinley Park
New What I've been doing
I've been working on converting an internal application from MSAcess to a web app. I've taken the chance to update my web knowledge and update our internal standards. I'm still studing the CSS specs and examples, so there may be problems that I havn't encountered or understood yet.

But what I have been doing that has worked well so far is to use class based selectors for everything. My motivation for doing so was entirly based on the problems of sharing ID based sheets between multiple pages and programmers though, not anything to do with inheritance problems.

To me, ID based selectors seems to be for putting little page specific tweeks on top of your general style sheet.

Jay

New A few comments, etc.
Hey, Mike, the page looks REALLY good; I appreciate the cleanness of it.

A couple ideas:

1. Have you thought about making the ".Menu a" elements block-level instead of inline (with display: block)? Then you could get rid of the br's and also style the whole containing block instead of just the text (i.e. it would look like more padding; this would make the highlighted link easier to read).

2. Why not use h1 or h2 for the page title instead of a (named) div? If you really want the div, maybe clean up the .css file by removing the (unused) h styles.

3. Some browsers IIRC will need you to also set margin & padding to zero in the html element, not just the body element. Do both every time.

4. You don't have *any* images, or difficult lining-up of elements; if I were you (cough, cough) I'd use em's instead of px for almost everything (I'd keep 0px on 0px margins, etc). #1 reason being the font-size you chose for .Content is quite small in my browser :) As it is, changing text size through the browser only resizes the header and footer (since you didn't explicitly specify a font-size for those); the .Content and .Menu don't change size. Using em's would also allow the orange bars to resize with the text.

In all, a very nice site! Better than mine anyway (glad *you* have time ;)

Many fears are born of stupidity and ignorance -
Which you should be feeding with rumour and generalisation.
BOfH, 2002 "Episode" 10
New Re: A few comments, etc.
Hey, Mike, the page looks REALLY good; I appreciate the cleanness of it.

Thanks. :)
1. Have you thought about making the ".Menu a" elements block-level instead of inline (with display: block)? Then you could get rid of the br's and also style the whole containing block instead of just the text (i.e. it would look like more padding; this would make the highlighted link easier to read).

Tried it. Like it. Great idea. Didn't previously know about it. I basically just copied someone else's stylesheet (as my comments in the code indicate), and haven't looked around much for ways to improve upon it. And I'm not much one for reading specs anymore.

2. Why not use h1 or h2 for the page title instead of a (named) div? If you really want the div, maybe clean up the .css file by removing the (unused) h styles.

Well, I do use the h* styles in the stylesheet within my pages for the computer graphics course.

That being said, I suppose there's little difference between leaving it "as is" and making the "h1" style be what the .Header is now, and then changing all the Computer Graphics pages to use h2/h3/h4 instead of h1/h2/h3 as they are now.

"Leaving it as it is" wins out because it works, I'm lazy, and I don't see a reason to change it. Given all that I just said, would you still change it and why?

3. Some browsers IIRC will need you to also set margin & padding to zero in the html element, not just the body element. Do both every time.

Done. :)

4. You don't have *any* images, or difficult lining-up of elements; if I were you (cough, cough) I'd use em's instead of px for almost everything (I'd keep 0px on 0px margins, etc). #1 reason being the font-size you chose for .Content is quite small in my browser :) As it is, changing text size through the browser only resizes the header and footer (since you didn't explicitly specify a font-size for those); the .Content and .Menu don't change size. Using em's would also allow the orange bars to resize with the text.

Hmmm. 11px is small for you in your browser? First time I've heard someone complaining to me that something on their screen is too small -- I've got a 1600x1200 resolution set on my 19" monitor. :)

Hmmm, ok. I'm fooling around with em and en and things of that nature. I'm not liking how the content is now showing up in my browser. But I suspect that the extended portability of it with em or whatever I decide on will make me happier than the current 11px/20px setting I have it at now.

Header is converted to using em. Footer will be. Will have to fiddle with Menu and Content.

In all, a very nice site! Better than mine anyway (glad *you* have time ;)

Thanks again. Of course, I only really have the time because I'm still looking for a job, and therefore have lots of time to fiddle with it late at night when I'm not on the job sites as I am during the daytime.

Thanks for your comments! I do appreciate them.
-YendorMike

What if the hokey pokey really is what it's all about?
- Jimmy Buffett, June 20, 2002, Tinley Park
New Spit and polish
> > ...making the ".Menu a" elements block-level

> Tried it. Like it. Great idea.

Next trick: Now that the "a" element is block-level, you should be able to set padding and margin on it, instead of on the containing div. If you set padding: 0px on the .Menu and "padding: 0.25em 2em; margin: 0px; width: 100%;" on the ".Menu a" you should get the highlight on the links to fill the whole block horizontally. That's what I meant before by better readability; the highlight doesn't just fit the text, it fills the whole block.

> h*

I would leave it then. I just prefer the h* since that already has intrinsic meaning within the markup language (ie HTML). It's a personal preference.

Final tip of the week (thank you, Eric Meyer): while you work with alignments etc, it can help to start your .css file with a (temporary) line:

* { border: 1px dashed grey }

or other color of your choice. It'll immediately show you where your boundaries are. Just make sure you remove it before publication. :D

Many fears are born of stupidity and ignorance -
Which you should be feeding with rumour and generalisation.
BOfH, 2002 "Episode" 10
New Re: Spit and polish
Next trick: Now that the "a" element is block-level, you should be able to set padding and margin on it, instead of on the containing div. If you set padding: 0px on the .Menu and "padding: 0.25em 2em; margin: 0px; width: 100%;" on the ".Menu a" you should get the highlight on the links to fill the whole block horizontally. That's what I meant before by better readability; the highlight doesn't just fit the text, it fills the whole block.

Cool! Setting "width:100%" does not appear to be necessary; in fact for this it looks undesirable in Mozilla. That makes the menu box flow over my Content. That is Not A Good Thing™.

Final tip of the week (thank you, Eric Meyer)

Thank you, tseliot! :)
-YendorMike

What if the hokey pokey really is what it's all about?
- Jimmy Buffett, June 20, 2002, Tinley Park
     OK, so one of those kinks that needs working out... - (Yendor) - (15)
         For one thing... - (a6l6e6x)
         I miss Duckman - (SpiceWare)
         I think I see what it's doing - (JayMehaffey)
         See if that works... - (Yendor) - (7)
             Hard to say what's wrong. - (static) - (5)
                 Re: Hard to say what's wrong. - (Yendor) - (4)
                     Try this. - (static) - (3)
                         WOO! - (Yendor) - (2)
                             *bows* - (static) - (1)
                                 Re: *bows* - (Yendor)
             What I've been doing - (JayMehaffey)
         A few comments, etc. - (tseliot) - (3)
             Re: A few comments, etc. - (Yendor) - (2)
                 Spit and polish - (tseliot) - (1)
                     Re: Spit and polish - (Yendor)

I think coming back from the summit was the rather more important achievement.
63 ms