Forums

Give help. Get help.

  • # August 11, 2008 at 6:44 pm

    Website: http://studentseatfree.com/search.php

    Well, in FF my logo is somewhere in the middle, but in safari it is on the left side. I tried to fix it using margin-left and margin-right to push it around in firebug but it doesn’t do anything. If you are floating something does it ignore margins?

    Also, could someone help me figure out my rollover situation? On the listings I have it where it changes color on the rollover, but I can’t figure out how to get it to return to the default color when you move your mouse off. With onmouseout you have to specify a color. Is there some value for "default"?

    Thanks.

    HTML:

    Code:
    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


    SEF Search Results


    Sort by:

    Showing all coupons

    < 1 >
     All Listings

    Caliente Grille View map
      2 for $10 on Tuesdays

    Grand China Buffet View map
      10% Discount

    Little Tokyo View map
      10% Discount

    Spicy Pickle View map
      10% Discount



    CSS:

    Code:
    * { margin: 0; padding: 0; }

    img, div { behavior: url(iepngfix.htc) }

    body
    {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size:12px;
    }

    .back1
    {
    background:url(images/back1.jpg);
    background-position: left top;
    background-repeat:no-repeat;
    }

    .back2
    {
    background:url(images/back2.jpg);
    background-position: right bottom;
    background-repeat:no-repeat;
    }

    .searchbox
    {
    background:url(images/topgreen.png);
    background-repeat:no-repeat;
    margin:0px auto;
    height:30px;
    width:999px;
    }

    .everything
    {
    background:url(images/bg.png);
    background-position: center top;
    background-repeat:repeat-y;
    margin:0px auto;
    width:999px;
    display:block;
    }

    .villiesflyer
    {
    background:url(images/villiesflyer.jpg);
    background-repeat:no-repeat;
    margin:0px auto;
    height:1241px;
    min-height:1241px;
    width:959px;
    }

    .searchformbox
    {
    margin-top:-27px;
    margin-left:30px;
    }

    .sort-area {float:left;
    width:300px;
    }

    .search-area {float:right;
    width:240px;
    }

    .logobox
    {
    background:url(images/newlogo.jpg);
    width:175px;
    min-height:135px;
    height:135px;
    margin-left:0px;
    margin-top:33px;
    padding-left:10px;
    float:left;
    }

    .adtopbox
    {
    background:url(images/adtopholder.jpg);
    background-repeat:no-repeat;
    width:730px;
    min-height:90px;
    height:90px;
    margin-left:200px;
    margin-top:-120px;
    padding-right:65px;
    float:right;
    }

    .adbox
    {
    background:url(images/adboxholder.jpg);
    width:300px;
    min-height:250px;
    height:250px;
    float:right;
    margin-right:70px;
    margin-top:15px;
    }

    .skyscraper
    {
    background:url(images/skyscraperad.jpg);
    width:160px;
    min-height:600px;
    height:600px;
    float:right;
    margin-right:-223px;
    margin-top:294px;
    }

    .contentbox
    {
    width:560px;
    min-height:100px;
    padding: 5px;
    background-position: left top;
    margin-left:30px;
    }

    .comingsoon
    {
    background:url(images/comingsoon.jpg);
    background-repeat:no-repeat;
    margin:0px auto;
    height:600px;
    width:960px;
    }

    .description
    {font-size:16px;
    }

    .results
    {
    margin-left:30px;
    }

    .resultspadding
    {
    padding:5px;
    }

    .restname
    {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size:20px;
    font-weight:bold;
    }

    .floatleft {
    float: left;
    margin: 0px 10px 10px 0px;
    }

    .refine
    {
    background-color:#eeeeee;
    min-height:25px;
    width:890px;
    padding:5px;
    margin-left:30px;
    margin-top:60px;
    background-position: center top;

    }

    /*Footer*/

    #footer {
    padding:10px 0px 70px 10px;
    color:#0c0c0c;
    width:951px;
    background-color:#daf2c8;
    font-size:9px;
    text-align: left;
    line-height:12px;
    margin:35px auto 0px;
    }

    #footer img {
    float:left;
    margin-right:10px;
    }

    #footer span {
    display:block;
    float:left;
    width:300px;
    }

    #footer a {
    color:#9e8292;
    text-decoration:none;
    }

    img {border:none}

    div.clear { clear: both; }

    .boxlink
    {
    color:#000000;
    text-decoration:none;
    }

    # August 12, 2008 at 12:55 pm

    I’m not sure I entirely understand what your trying to do, so ignore me if I am totally off!

    But in the logobox class, get rid of your padding-left and replace with a margin left of 30px and it looks fine and dandy to me!

    p.s. footer could do with losing a px in width!

    # August 13, 2008 at 5:53 am

    Regarding the space between the logo and the green, its the .logobox class again – margin-top is on 29 – adjust that to desired value.

    To be honest your code is just a bit messy. If I were you I would try and recreate your site starting with fresh css and xhtml.
    To explain;

    • your first div is called back1 – these attributes could easily be added to your body attributes.[/*:m]
    • I am guessing search box is the holding div for the top green area… it doesn’t actually hold anything it just colours in the top area (and I’m not sure why you didn’t use a colour value for this)[/*:m]
    • None of your div’s have id tags, they all use class tags.[/*:m]
    • classes are filled to the brim with attributes; a fair few of these are not doing anything now but could mess things up in other browsers in the future.[/*:m]
    • You switch to tables soon as you hit content – could be worth sticking with divs.[/*:m][/list:u]

      Its a really nice looking site but I would watch the Converting a Photoshop Mockup and just re structure the site. You have all the images so it really shouldn’t take long. It will save you so much time in the future!

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

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag