Back Home

Open Designs

Community. Driven.

General Talk: CSS Help?

Bottom of Page

1 to 10 of 10

  1.  
    • CommentAuthordannisbet
    • CommentTimeFeb 18th 2007 edited by dannisbet on the 18th February 2007 at 10:42:45 EST
     
    Hey all! Been lurking around here for some time trying to get the hang of this CSS stuff; but now I've got a problem I need some help with!

    http://www.dannisbet.com/beta/

    On my menu, I have it working exactly like I want it to in Firefox; with white text and a red line showing when I hover over the link. However, IE is just turning it into a mess, and my futile attempts to fix it are just making it messier. I have my IE stylesheet here (http://www.dannisbet.com/beta/css/ie.css) to give you an idea of what I'm up against.

    Would appreciate any help to fix it! bakie
    •  
      CommentAuthorauhsoj
    • CommentTimeFeb 18th 2007 edited by auhsoj on the 18th February 2007 at 11:23:57 EST
     
    I believe you managed to go a little *too* selective with your rules.

    Follow the same conventions with your links that you did with your Firefox CSS. I don't see anything aside from that.

    EDIT:

    Your IE...

    #menu ul li a {
    border-bottom: 2px solid #cc0000;
    }

    #menu ul li a:hover {
    border-bottom: 2px solid #cc0000;
    }

    Your Firefox:

    /* Menu */
    #menu {
    float:right;
    font-size: 20px;
    }

    #menu a:hover {
    text-decoration: none;
    }

    #menu a {
    color: #FFFFFF;
    }

    #menu li {
    display: inline;
    margin-left: 15px;
    border-bottom: 2px solid #000000;
    }

    #menu li:hover {
    border-color: #CC0000;
    }

    #menu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    padding-top: 5px;
    }
    • CommentAuthordannisbet
    • CommentTimeFeb 19th 2007
     
    I'll give that a shot. For some reason, I thought changing the underline color would be an easier process than its ended up being lol!

    Thanks cool
    •  
      CommentAuthorauhsoj
    • CommentTimeFeb 19th 2007
     
    You're welcome!

    A common thing most CSS developers have is forgetting to maintain consistency throughout multiple stylesheets. If you access an element one way through one stylesheet, access it by the same primary method through another, only using one more identifier to get to it.

    My recommendation - for everybody who might happen to read this - is to always assign classes *and* IDs to significant elements in your page; things like the DIV element containing your navigation, or the container element holding your entire layout together, should have built in ways to access them with a higher selector.

    Aside from the fact, let me just commend you for not being a total moron by using IE, IE-Mac, and Opera hacks all in one stylesheet. I am completely annoyed by so-called "web designers" who use hacks to attain a working design.

    "If your design doesn't work without the hack, your design doesn't work."
    • CommentAuthordannisbet
    • CommentTimeFeb 19th 2007
     
    Appreciate the compliment! My intial thinking when I did that, was that I just wanted one CSS file to worry about for stuff that worked between the two browsers, and then a special CSS file for browser-specific stuff. Glad to know its the better way to do it! I've been visiting this site pretty much since its opened, and studying some of these templates has helped a lot getting me to this point!

    But since you mention it, what exactly is the difference (if any) between an ID and a class in CSS? I've used ID's all along...
  6.  
    IDs identify a specific element and therefore must be unique on the page – you can only use a specific ID once per document. Many browsers do not enforce this rule but it is a basic rule of HTML/XHTML and should be observed.

    Classes mark elements as members of a group and can be used multiple times, so if you want to define a style which will be applied to multiple elements you should use a class instead.
    •  
      CommentAuthorgnome
    • CommentTimeFeb 19th 2007
     
    My opinion on hacks: Keep the design simple enough to not need them.
    •  
      CommentAuthorauhsoj
    • CommentTimeFeb 20th 2007
     
    Yeah, but if the design gets too simple, every web site will look pretty much the same. Minimalism is still freakin' cool =D
    •  
      CommentAuthorauhsoj
    • CommentTimeFeb 20th 2007
     
    Btw, keep up the graphic work! You're definitely one of the top 10 best still 3D artists I've seen in a long time.
    • CommentAuthordannisbet
    • CommentTimeFeb 20th 2007
     
    Top 10 3D artists? Not sure I'm that good, but thanks lol! It helps me make a decent living to say the least :)

    http://www.dannisbet.com/beta/

    So what I ended up doing was take out the hacks and give up on the different color underline until I can find a suitable solution that appeases IE and Firefox. My next issue though, is that if you view the site in IE and Firefox, the padding-top attribute for the content area is doubled in IE (or so it seems- IE doesn't like playing nice with that paragraph tag in there). Is there a way around that?

    Appreciate all of the help so far! bakie

1 to 10 of 10

  1.