Need Code for a problem (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

JacieClaeys -> Need Code for a problem (8/13/2006 13:11:08)

Ok, I have worked on this page for a month. All bugs worked out but one. I am using the CSS Drop Down menu and the only problem I have is when the menu drops down (in IE only) the width of the drop down is all different sizes depending on the width of the type. It renders in a solid block in FF using the longest line for width, just like I want.

www.nrgsaver.com/temp/index.htm

I have an "if IE" statement that reads:

<!--[if IE]>
<style type="text/css" media="screen">
#menu{float:none;}/* This is required for IE to avoid positioning bug when placing content first in source. */
/* IE Menu CSS */
/* csshover.htc file version: V1.21.041022 - Available for download from: http://www.xs4all.nl/~peterned/csshover.html */
body{behavior:url(../css/csshover.htc);
font-size:100%; /* to enable text resizing in IE */
}
#menu ul li{float:left;width:50px;}
#menu h2, #menu a{height:1%;font:bold 0.7em/1.4em arial,helvetica,sans-serif;}
</style>
<![endif]-->

Is there a way to add to this statement that would make it render properly in IE since there isn't a problem in FF.

If not...where would I change the code and to what.
CSS is still very new to me and I have tried alot of different things to no avail.

Any help would be greatly appreciated.
PS: all pages involved validate



Tailslide -> RE: Need Code for a problem (8/13/2006 13:54:24)

Ok well I tend to avoid dropdowns because they're a big PAIN - as you've found out!!

BUT I think this works - if you add this into your IE only bit: 

#menu ul li li {width:8em;}


It should help.







JacieClaeys -> RE: Need Code for a problem (8/13/2006 14:28:42)

Very Nice. Thanks Tailslide. Worked like a charm.

I had that in my CSS menu but had to change it to px in order for IE to not render each catagory in the main menu the full width of the page. So this worked perfect in the "if IE" statement.

Many Many thanks.

PS: I know what you mean but it is a great way for me to learn CSS and my site has been up since 1997 so I have the time to do it the long hard way and I mean LONG HARD WAY for sure.

Jacie
"It's never the tigers that get you....it's the gnats!"



Lazykatz -> RE: Need Code for a problem (8/13/2006 17:06:08)

There is one bug, that I know of, in this menu, In Netscape browser, every 3-4 blocks have a gap between them 1-2px in height.

You can get all of the dropdowns the same width though, by putting the h2's in div's, and give a width for dropdown blocks.

Here is a sample, fell free to take a look.
(it is an old test page, the Netscape bug will show in your page because of colors)
http://new.lazykatz.com/

Grizz



JacieClaeys -> RE: Need Code for a problem (8/13/2006 22:07:08)

quote:

ORIGINAL: Lazykatz

There is one bug, that I know of, in this menu, In Netscape browser, every 3-4 blocks have a gap between them 1-2px in height.

You can get all of the dropdowns the same width though, by putting the h2's in div's, and give a width for dropdown blocks.



Thanks Grizz.

I just got my new PC a month ago and haven't had time to download any browsers but IE and FF. I will have to get all the rest so I can check in everything.

Will putting the h2's in div's get rid of the px between the blocks too? I had that problem in IE at first and you can't nav past the white space. So if a customer wants something below the white space it tough cookies for him/her.



Lazykatz -> RE: Need Code for a problem (8/14/2006 3:18:28)

quote:

Will putting the h2's in div's get rid of the px between the blocks too?

If you mean for the Netscape browser, No. It allows you to space your h2's evenly, and/or the white space between them, but at the same time allow all of your dropdowns be the same width. Currently your dropdowns have different widths.

I assume there is a solution, I did the same as you at 1st by just changing colors, I thought I was seeing things, so I put the default code on a dark page and it was there too in Netscape.

You have Firefox, do you know how to use the web developement tools? You can look at code, css, etc. with them, and can edit your work on your desktop with them too before publishing to web.

Open my test page above in Firefox, in the menu at top, click tools, click web developer, click css, click view.

Basically all I did was change colors of the default code, put the h2's in divs and sized them, they are the div's m1, m2, m3..etc.

To get the dropdowns the same width,

DEFAULT CODE:
DIV#menu LI:hover UL {
DISPLAY: block
}

MY CODE:
DIV#menu LI:hover UL {
WIDTH: 118px;
DISPLAY: block
}

You have the latest version of the menu, all they did was condense some of the code.

YOUR DEFAULT CODE:
div#menu li:hover ul,
div#menu li li:hover ul,
div#menu li li li:hover ul,
div#menu li li li li:hover ul
{display:block;}

NEW CODE:
div#menu li:hover ul {
WIDTH: 118px; (change/add width here)
}

div#menu li:hover ul,
div#menu li li:hover ul,
div#menu li li li:hover ul,
div#menu li li li li:hover ul
{display:block;}

Also, at top of menu code, remove the width 100% from #div menu, just leave float left.

I am using this menu on my new site. If/when I do tackle the menu problem in Netscape, I'll PM you or post it here with the solution, if you want me too.

It is the least of my worries right now. I also just got a new pc not long ago after my old pc crashed with over a year of developement of my new site, scrambling to get 1000 pages done all over again from scratch. [:@]

Grizz



JacieClaeys -> RE: Need Code for a problem (8/14/2006 9:08:33)

quote:

ORIGINAL: Lazykatz


You have Firefox, do you know how to use the web developement tools? You can look at code, css, etc. with them, and can edit your work on your desktop with them too before publishing to web.

Open my test page above in Firefox, in the menu at top, click tools, click web developer, click css, click view.



I have FF 1.5.0.6(I think the latest) and it doesn't have any Web Developer in the tools. Do I need to download it separate?
quote:


DEFAULT CODE:
DIV#menu LI:hover UL {
DISPLAY: block
}

MY CODE:
DIV#menu LI:hover UL {
WIDTH: 118px;
DISPLAY: block
}


Interesting. I tried to add width too, but put it in the wrong place (#menu ul- for the primary menu) and it fixed IE but then Mozilla was all scrunched up.

So in the "if IE" statement I changed

DEFAULT
#menu ul li{float:left;height:1%;}

to

MY CODE
#menu ul li{float:left;width:50px;}
and now they render the same in IE and FF.

I will try your code and see if it will evenly space things in the h2 code. I have about 15 picas at the right that, no matter what I do I can't get rid of, because if I change the width of border at all it knocks the last box onto the next line in IE.

The 8em code that Tailslide gave me fixed the problem nicely in IE except for those 15px at the right

I would really like to find a way to make the drop down boxes a little less in height because the list is so long it goes beyond the bottom of the window. I have split the list into catagories as much as I could, but some just can't be broken out any more, like the Fluorescents. That will just have to wait for another day I guess.

Many thanks for all the info. Everyone here is always so helpful which means a great deal when you are CSS "challenged" like me.

Jacie

"It is never the tigers that get you....it is always the gnats!"



Lazykatz -> RE: Need Code for a problem (8/15/2006 7:49:11)

Hmmmm.. all I did was download Firefox and the developer tools were there, I've added nothing.

Top of browser.. File, Edit, Bookmarks, Tools, Help

Web Developer is in Tools, has a popout menu with options.

You do NOT have to change anything in the IE statement, unless you change font size and/or go into a more intense menu.

You HAVE TO put the h2's in divs and size them, and then change/add code for width of dropdown. Quite simply.

List to long... they can be shortened by using sub-menus, and as many sub-menus as needed/wanted, you can go 100 wide if you wanted.

Dropdown boxes a little less in height... you can remove some of the padding, border thickness, and/or use smaller font, use normal font instead of bold. Font changes do require an edit to the IE statement.

I saved your page, along with the current css files, and 20 minutes later came up with this.

NOTES:
1. h2's are in div's
2. dropdowns are sized evenly
3. h2 and <a> classes are separated, meaning you can edit different colors, fonts, size etc
4. slight modification to IE statement to accomindate the h2/a class seperation
5. dropdown HID BULB, abbreviated this a bit to this to make it fit, Self-Ballast Merc. Vapor
6. the menuh.css no longer exist, added into center-box-layout1.css
7. attached below are the new files (html and css), copy to NOTEPAD first, then copy/paste into page and css file
8. I didn't have or get the cross pic for dropdowns, but code attached is the same as it was, should work
9. Netscape bug fixed, I plastered a note on wall to remember it for my code.. hehe

I only did the menu, don't know what kind of editor you're using, but alot of your page style can be put into the css file. For help/ideas, check this thread out.

Enjoy,
Grizz



jaybee -> RE: Need Code for a problem (8/15/2006 8:06:37)

quote:

ORIGINAL: Lazykatz

Web Developer is in Tools, has a popout menu with options.

Try looking in View> Toolbars and see if you have the web developer option in there. If so, tick it.

If it's not there you can download it as an extension
Tools> Extensions then at the bottom of the pop up choose, Get More Extensions. Search for Web Developer toolbar.



JacieClaeys -> RE: Need Code for a problem (8/15/2006 11:05:43)

Hi Grizz

Oh WOW! Talk about "changes made easy" in the future for me. I really like just one css style sheet and it will make it great for making a template for my product pages . Thank you so much for taking the time to do this. Should make download time quicker too.

It looks great in both IE and FF except the drop down menu doesn't drop down in IE (at least for me it didn't). Do I need to add something to the IE statement?

BTW...I now have Web Developer in FF. Thanks to you and Jaybee

I think I am going to love CSS once I learn what all it can do.

I downloaded Expressions Sunday (14 hours on dial-up) and can't wait to play with it soon. Got to get this worked out first tho.

Tons of thanks for all the help.

Jacie

"It's never the tigers that get you.....it's always the gnats"



Lazykatz -> RE: Need Code for a problem (8/16/2006 0:47:38)

CHIT! microchit! Sorry.. had to let off a little steam.


Your welome...

Your menu does/did work in IE, in this post and a previous one.


Try this..... in the IE statement of the new html attached above, change this (it's how it was on your page, forgot to put it back the same way)

body{behavior:url(csshover.htc);

TO THIS

body{behavior:url(../css/csshover.htc);


or.. if you don't want to change the code, just move the csshover.htc into
the same folder as page and css file.

I did not have the version of csshover.htc that is listed on your page, or could
get it from site. It is one of the older versions, hopefully it will work when you
put it all together, if not, hang in there, there is always a fix for msn's ****.

I've never had my old test page open on with IE with new pc,
menu stopped working there too.. grrrr. Everything works on desktop in
all browsers, but apparently another msn bug in windows xp w/sp2. I'll
be reading up on it later here.

Losing everything on old pc and "my" memmory lost just kills me. I should of thrown
pc in lake looooooooong ago.. hehe This has been a very challenging for me to redo
a large site done completely in CSS, and I'm hand coding, so now I write notes in ledger.

I'll get cracking on this, might be a couple days, because I need/want it to work too,
work is backing up around here.
.

Grizz



JacieClaeys -> RE: Need Code for a problem (8/16/2006 2:33:08)

Not a problem. I can handle that. I will put it up on my site tomorrow and let you take a look.

I really, REALLY like the way it looks with the div's. Everything is spaced so nicely. Nice and tidy[:D]

A bottle of scotch is on the way!!!!!

Mucho gracias, as we say in Texas.

Jacie

"It's never the tigers that get you....it's always the gnats!"



JacieClaeys -> RE: Need Code for a problem (8/17/2006 0:02:50)

All fixed, tested and validated in IE and FF and....As TacoBell would say
"Good to Go"[:)]

http://www.nrgsaver.com/temp/index.htm

I really love how it renders and can't thank you enough for the changes.

It is 100% better than before. I tweaked the menu colors some, but most of all I like having the drop downs within the page.

And I can even view it in my FP browser without type all scrambled everywhere. It is fun hanging out with the "pro's".

Jacie
"It's never the tigers that get you...it's always the gnats!"



Lazykatz -> RE: Need Code for a problem (8/17/2006 3:12:49)

So changing the location for csshover.htc worked?

Kewl! Loooooks Great! (even in IE)

Your Welcome!

I am in no way a Pro though, learn alot by trial/error, searching and learning online,
and I can't count how many times I found a resolution to a problem right here in this forum.

quote:

I think I am going to love CSS once I learn what all it can do.
quote:

A bottle of scotch is on the way!!!!!

You may want to keep that next to computer, nice thing to have in arms reach
to settle your nerves. [:D]

Good Luck,
Grizz



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125