Help in CSS alignment! huhuhu

Discussion in 'CSS' started by jehzlau, May 11, 2007.

0
  1. #1
    I need help with my CSS, I don't know and I can't figure out what's the main cause of it. If I view it in IE, it looks just fine, but if I view it on firefox, it really sucks, the image in the center does not go inline with the right menu and the left menu...

    you can check my sample CSS based layout here:

    http://dostscholars.com/amdatex

    View it on IE, and it looks just fine, view it on firefox, and it doesn't look good :(

    I hope someone can point the root of the problem in my CSS. :(
     
    jehzlau, May 11, 2007 IP
  2. clicyu

    clicyu Peon

    Messages:
    22
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    #menuconr li.menurhhh {
    background: transparent;
    color: #000;
    font-size: 12px;
    font-weight: bold;
    }
    #menuconr li.menurr {
    margin: 2px 0pt 0pt;
    padding: 6px;
    }
    #menuconr li {
    background: #8188A4 none repeat scroll 0%;
    list-style-type: none;
    padding: 3px;
    }
    #menuconr li.menurh {
    background: #069B95 none repeat scroll 0%;
    font-size: 12px;
    font-weight: bold;
    list-style-type: none;
    padding: 22px 5px 10px;
    }
    #menuconr {
    color: #FFF;
    display: block;
    float: left;
    font-family: Arial;
    font-size: 12px;
    padding-top: 41px;
    }
    #learnmore {
    background:#478803 none repeat scroll 0% 50%;
    color:#CCC;
    font-size: 12px;
    padding: 35px 15px 36px 10px;
    width: 165px;
    }
    and if u wanna white background between li items on the right, u can put background-color: #fff; on UL element.I remove white borders on li elements.

    TIP: When u making a page, first thing u do is to remove default margins and padding (specially from UL and LI elements) becose IE have different margins and padding from firefox.You must define it yourself, or leave margin:0; padding:0;.The best way for good design is to remove default margins and padding from all elements.You must define it yourself
     
    clicyu, May 11, 2007 IP
  3. jehzlau

    jehzlau Active Member

    Messages:
    301
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    73
    #3
    wow thanks for this great advice.. a never knew that they have different margins and padding.. thanks clicyu! :)
     
    jehzlau, May 11, 2007 IP
  4. jehzlau

    jehzlau Active Member

    Messages:
    301
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    73
    #4
    Hi clicyu, i have tried the CSS that you've posted.. But now it doesn't look good in IE, only in FF... i have also tried to make the margin and padding zero and defined my own.. but it sucks in IE, and looks good in FF.. :(
     
    jehzlau, May 12, 2007 IP
  5. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #5
    Try applying display:inline; to any element which is floated and has a left/right margin. This is because IE doubles the margin. Sane browsers ignore the display:inline;.

    #headerlinks {
    float: left;
    margin-left: 300px;
    display:inline;
    }

    Also, why are you applying an htc to every img and div?

    img, div {
    behavior: url(iepngfix.htc);
    }
     
    soulscratch, May 12, 2007 IP
  6. jehzlau

    jehzlau Active Member

    Messages:
    301
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    73
    #6
    that HTC is for PNG images.. because IE6 doesn't support transparency of PNGs... :(

    The display inline still doesn't work.. but i have a solutions.. i use javascript to detect the user's browser then just load the appropriate CSS for the pages... I hope there is another way without this javascript :(
     
    jehzlau, May 15, 2007 IP