Grow your CSS skills. Land your dream job.

Critique my code, and find ie issue?

  • # December 18, 2008 at 3:12 pm

    I would be so grateful if someone would look over my code of my fairly simple site here I am working with and give me a good critique. let me know if anything is wrong and if anything is redundant. I think this will really help me learn.

    http://www.linkcreativedesign.com

    Also.. I am aware of an issue in ie7 (and Im sure below) where the horizontal navigation is WAY lower in IE. I checked IE for Mac, Firefox, Opera, and Safari and all is good there as far as this problem goes. its OF COURSE just an issue in IE.

    If anyone knows of good links/resources for handling the most common IE compitablity issues I would be greatful for that too!

    Thanks.

    Rob
    # December 18, 2008 at 5:51 pm

    Hey dude :) Gratz with the success so far, and I like the design :)

    As for your IE issue what I would do is take your menu bar out of the div its in, and then position it relative using top & left. You will find your IE issue will probably be down to the fact you have used the margin of the navbar div to position it instead of the positioning attribute. IE likes to look at margin in an "artistic" light. lol

    Actually I think my main point is dont use margin to position things, use the "position" and the "left" and "top" definitions – you will remove alot of issues between browsers then.

    looking deeper… don’t hate me but you should change alot of that or you will find you have issues… I will try and see if I can get it working via firebug a little better so you can see…

    (some time later)

    Here is a link to it live – see Code below. http://svgonline.co.uk/link/

    (I’ve tried to keep your code as recognisable as possible :))

    EDIT: before I forget – I added a footer div and styled your recent posts UL so they arnt just floating randomly :)

    Code:
    p, li {
    color:#CCCCCC;
    font-size:12px;
    line-height:14px;
    margin:0 0 10px;
    }
    a {
    color:#008DA5;
    text-decoration:none;
    }
    a:hover {
    color:#9DE4DC;
    text-decoration:none;
    }
    .floatLeft {
    float:left;
    }
    .floatRight {
    float:right;
    }
    .clear {
    clear:both;
    }

    div {position:relative;}

    body {
    background:#000000 url(http://www.linkcreativedesign.com/lkdgraphics/bodybg.jpg) repeat-x scroll left top;
    font-family:Arial,sans-serif;
    }
    #wrapper {
    height:100%;
    margin:0 auto;
    width:900px;
    }

    h1#toplogo {
    background:url(http://www.linkcreativedesign.com/lkdgraphics/Logotab1.png) no-repeat scroll left top;
    text-indent:-9999px;
    width:385px;
    height:198px;
    position:relative;
    float:left;
    }

    h1#toplogo a {
    display:block;
    height:198px;
    width:385px;
    }

    #mainnav {
    list-style:none;
    list-style-position:none;
    width:500px;
    height:46px;
    position:relative;
    top:98px;
    float:left;
    }

    #mainnav li {
    display:inline-block;
    width:107px;
    height:46px;
    float:left;
    }

    #mainnav li a {
    display:inline-block;
    height:46px;
    width:107px;
    text-indent:-9999px;
    }
    #mainnav li a:hover {
    background-position:0 -46px;
    }
    #about a {
    background:transparent url(http://www.linkcreativedesign.com/lkdgraphics/about.jpg) no-repeat scroll 0 0;
    }
    #blog a {
    background:transparent url(http://www.linkcreativedesign.com/lkdgraphics/blog.jpg) no-repeat scroll 0 0;
    }
    #contact a {
    background:transparent url(http://www.linkcreativedesign.com/lkdgraphics/contact.jpg) no-repeat scroll 0 0;
    }
    #hire a {
    background:transparent url(http://www.linkcreativedesign.com/lkdgraphics/hire.jpg) no-repeat scroll 0 0;
    }

    #content {
    width:900px;
    height:auto;
    float:left;
    }

    #blog {
    height:auto;
    float:left;
    left:70px;
    width:400px;
    }

    ul#recentpost {
    width:400px;
    height:auto;
    float:left;
    position:relative;
    top:20px;
    left:70px;
    margin-bottom:40px;
    }

    #footer {
    width:900px;
    float:left;
    height:40px;
    text-align:center;
    }

    Code:

    LinkCreative practice

    It Starts

    December 16th, 2008

    There are many variations of passages of Lorem Ipsum availavble, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn’t anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the

    Posted in Uncategorized | 1 Comment »

    # December 18, 2008 at 10:22 pm

    Wow.. Thank you so much! You went above and beyond. I cant tell you how great this is.. its totally fine tunning what I am learning. I see what you did, and you make good points. Im new at this but Im catching on, especially with help from the more experiences

    Thank you SOO MUCH!..

    # December 18, 2008 at 10:46 pm

    would you mind keeping that up for a while? Maybe through tomorrow so I can make the adjustments and study it more? If you can I would understand. Thanks! I want to compare to see what I did wrong.

    Rob
    # December 19, 2008 at 4:29 am
    "LinCSS25" wrote:
    would you mind keeping that up for a while? Maybe through tomorrow so I can make the adjustments and study it more? If you can I would understand. Thanks! I want to compare to see what I did wrong.

    yea sure no worries dude :) Im glad it helped you out – personally I always found things like this more useful for learning than trying to figure out through tutorials :)

    It will be up there for a while probably lol I forget about this for a while, then have a big clean out :)

    # December 19, 2008 at 3:09 pm

    Great!

    I got a question for you if you have time. Im studying and making the changes you gave.. Im at the section for the "recentposts" and I was wondering.. did you ad the ul id div to the html or did you find it in the HTML to ad the styling div?

    This is a Word Press site and Im going to now attempt to learn how to style the PHP stuff so that its styled but still functions with WordPress. If that makes sense!
    So the most recent posts is a widget I added through wordpress.. I cannot find where it is in the HTML of the PHP files to style. I know on the web it only shows one HTML document but for WP they are all broken up under different PHP files.. Sorry if this is confusing. Im thinking you didnt. because I see the ul and divs for it under mine too.. I just cant find it in my files to style.

    Thanks again. Im having a blast seeing what silly things I did.

    Rob
    # December 19, 2008 at 7:15 pm

    Hi Lin,

    the UL I just styled in the HTML that was generated from your wordpress page code – so I dont know if your theme has it in a UL or what as I cant see your footer.php file :)

    There is no div, its just the UL – remeber a UL can be styled just like a DIV, you dont need a div to wrap it, to make it into a block element :)

    If you can paste up what you have in your footer.php (I suspect its in your footer.php anyway… although it could be in your index.php at the bottom, depends :D where you put it lol) then I can have a look :)

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

You must be logged in to reply to this topic.

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