CSS Help

Da_iMac_Daddy

Da_iMac_Daddy

Not-so-Neo-DumbA$$
Hey guys,
I'm having some trouble with a menu I am working on. Nothing fancy just some divs whose background color changes when you hover over them. But the problem is that I want to adjust the height so that the text has little to no spacing between them and the border. When I use height and width the text is overlapped by the border. Another thing is, it seems like the text wants to stick to the bottom of the div but I want it to have even spacing all around. I've tried setting the padding of the text to 0px but that doesn't seem to work.

Any help is appreciated,
Nathan Coffield

P.S.- I don't have anywhere to host my page so I'm sorry that I can't show you the page.
 
Your best bet is to forget about the height, and use very small amounts of padding.

Copy and past the relative code into a seperate HTML file (with the css for the menu), and ZIP it. Then attach it to a post and we'll see what we can do with it. I think I have a vague idea of what you're trying to do, but not enough to help much.
 
I've attached the zip. two files 1 html and one css they're not very big.
 

Attachments

  • cssHTML.zip
    1.3 KB · Views: 10
Da_iMac_Daddy said:
I've attached the zip. two files 1 html and one css they're not very big.
Click to expand...


I renamed both files to keep them easily seperated. Wound up completely rewriting them since there's a major difference in the HTML4 and XHTML doctypes when the brower renders them, and I'm more comfortable in the later.

It should scale at least 2-3 times up or down properly (text zoom), with everything lining up. I didn't bother to put any fixes/hacks in for MSIE or the other buggy browsers, since I didn't know if this is where you were trying to go with it.

Changes made:
* XHTML Trans doctype
* Smarttags META (to prevent them)
* Container div to keep everything together properly, allow centering also
* Width adjusted to allow 800x600 user proper viewing
* Font-sizes using ems, body declared at 90%
 

Attachments

  • Archive.zip
    1.4 KB · Views: 6
OK I'm home now. Looks good in Mozilla Firebird. In IE 6 the menu still doesn't show up. Hmm. I had this working on my beaches page but my Mac is packed up in storage until I can get rid of this old pc I have in my new apartment.

Hey it looks great in a good browser but IE still just ruins it for the rest of em.
 
Wasn't worried about IE until I knew for sure that's what you wanted or not. I'll play with it this evening so it works and post it then.
 
I checked it out on my brother's Win98 machine with IE6, no menu of course. Firgures, but hey...it works in IE5.2 Mac and Firebird, Moz, etc! Heck, Lynx run in the Terminal even displays the navigation...COME ON MICRO$OFT! Get with the program! I need to get my testing station back up, that way I can check stuff on all the ancient browsers.

All kidding aside, I got stuck at work this evening until 11pm...instead of 5pm like I was supposed to. We're swamped, so it might be a day or two until I can look at that again.
 
It bothers me that the MOST used browser in the known world is probably the worst out there. ::sigh:: When will everyone learn that just because it works doesn't mean it doesn't need fixin' :\
 
mdkny your personal page is beautiful. Looks almost like moveable type. I am very impressed my friend. Where did you learn CSS and XHTML? I've looked on w3schools.com. Unfortunately there seems to be more to CSS than w3schools mentions. Like what is the difference between this .leftCol and this #leftCol?
 
Never had the chance to do much with that page, maybe one of these days I'll get around to it. Thanks though.

As far as learning it...just started with that homepage of mine, and kept screwing up until I figured it out. I've messed with HTML since I was like 10 or so, that helped a bit.

There's some excellent rescources on the web, including:
* ALA (http://www.alistapart.com)
* CSS Vault (http://www.cssvault.com)
* CSS Zen Garden (http://www.csszengarden.com)
* MaxDesign (http://css.maxdesign.com.au/index.htm)

Look at what others have done...especially stuff by Jeffrey Jeldman, Eric Meyer, Russ Weakley, etc.

.leftcol is a class, where #leftcol is an id. For more on the id vs. class thing, check out the Selectutorial at Max Design.
 
I have fixed the IE problem. The menu displays in IE now but I can in no way position the menu to my liking. I don't know what's up. Maybe someone can take another look and tell me what I'm doing wrong.
 

Attachments

  • webPage.zip
    1.4 KB · Views: 2
Figured it out. Stupid case sensitive classes. But now I still can't get the text to be set in the middle of the menu boxes.

As always any help is greatly appreciated.
 
It's all about padding. Check out what I did with it.

Couple things:
- Why didn't you just link to an online page, instead of putting them up as a zip?
- Why is the page named index.htm.htm?
 

Attachments

  • webPage.zip
    1.3 KB · Views: 2
Sorry about the .htm.htm WinXP sometimes screws me up. My webserver isn't back up yet I just renewed my account. I'll take a look at the page you created.

Thanks for the help.
 
Sorry about the lack of response, I've been sicker than a dog for the past few days.

There's a few issues with the site you need to address. First off is that menu...it's way to thin, and will be a pain in the U know what for users. The only way to make it that thin is to use images for the links, otherwise the differences in browsers/systems/base font sizes/text zooms/etc...well, it just won't be pretty.

Secondly is the doctype. You're gonna have alot of problems with the HTML 4 trans one using CSS layout. XHTML 1 Trans, or better yet Strict, is going to be better in the long run.

Third is accessibility. That can wait till later though. I'll post some screenshots to show you what I mean by that then.
 
hmm... Never thought of the menu being too thin. Actually it looks pretty good in IE and Mozilla Firebird and I'm really only worried about those two for now. I'll have to read up more on doctypes I have no idea what it means :p. Now I must go smash the weapon of ignorance and read up on doctypes. Keep the comments coming!

Thanks.
 
You must log in or register to reply here.
Back
Top