Grow your CSS skills. Land your dream job.

Help request! Funky gradient and misc. FF issue (SOLVED)

  • # December 19, 2008 at 4:55 pm

    Ok, everyone has been very helpful so far and you’ve gotten me moving from just the design side of things into the coding side (and I don’t like it one bit). Struggling with CSS is tough, struggling with IE6, IE7, IE8 and FireFox just add to the frustration.

    I now have my site looking pretty similar on both FF and IE 6-7, but I have a navigation issue with Firefox and I can’t seem to move the items within the navigation field. Compare the image from IE and FF to see what I mean.

    I’ve tried adding padding, removing padding, adding margins, removing margins, and just about everything else I could guess at. My point is, I can’t think of any ways to get the navigation field moved back up into the navigation field supplied (only in FF).

    Second problem. I have remove an unecessary image and now I have this random gradient thrown in just under the header. Both FF and IE render it but i cant seem to find it anywhere!

    Any and all help will be greatly appreciated!

    http://www.d2webdesigns.com

    Rob
    # December 19, 2008 at 7:07 pm

    Hey :)

    yea its your browser defaults. IE/FF and other browsers have a set default.css that renders elements as they think they would best be rendered. So for a h6 tag, FF obviously has quite a large margin set. If you want to do a quick fix, define the margins you want in the H6 styling. I tried:

    margin: 5px 0px 10px 10px;

    and it looked ok -

    Just so you know the order of the margin definitions in that shorthand is:

    margin: top right bottom left;

    for future reference the best way to get rid of these issues is with a browser reset – its just a bit of CSS that takes everything back to 0. A very quick way of doing this is with a bit of code like this:

    * { padding:0; margin:0; }

    the * is a universal selector, which means it will apply to everything. If you put that at the top of your CSS, then style things accordingly you will find it much more accurate across browsers.

    There are much better resets which you can find here: http://developer.yahoo.com/yui/reset/

    # December 20, 2008 at 8:30 am

    As always Rob, an immense help!

    Thank you so much.

    Rob
    # December 20, 2008 at 12:33 pm
    "Malice" wrote:
    As always Rob, an immense help!

    Thank you so much.

    No probs :)

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".