Grow your CSS skills. Land your dream job.

Mis-alligned

  • # February 3, 2009 at 3:27 am

    Hey everyone,

    I have been following Chris’s tutorial on Photoshop to CSS, and found that I get this issue between FF and IE7. Now I have tried doing this on 2 differnent machines, and at some point it all goes well… but then weirds out and I get this:

    [img]http://img24.imageshack.us/img24/5981/fromfffx1.th.png[/img]

    The above image is in FF and below is how it looks in IE:
    [img]http://img10.imageshack.us/img10/6492/fromierk1.th.png[/img]

    Sorry the header is not WOW as I am still designing, but you’ll see what the issue is anyway.

    and then here is a snippet of code *I’m working in Visual Studio* But can’t see that it should be a problem.
    HTML:

    Code:
    < %@ Page Language="vb" AutoEventWireup="false" CodeBehind="Login.aspx.vb" Inherits="bmaintranet._Default" %>

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    Welcome

    Content

    login:

    Couple of buttons



    And the CSS:

    Code:
    /* CSS Document */
    *
    {
    margin: 0 0 13px 0;
    padding: 0;
    }

    body
    {
    font-size: 12px;
    font-family: Ariel, Helvetica, Verdana, Sans-Serif;
    color: #666666;
    background: url(images/body-bg.jpg) repeat-x top #ffffff;
    background-color: #3A362F;
    }

    h1
    {
    font-size: 3.0em; margin-bottom: 0.8em; text-transform: uppercase;
    padding-top: 5px;
    }
    h2
    {
    font-size: 2.0em; margin-bottom: 0.4em; text-transform: uppercase;
    padding-top: 5px;
    }

    .clear
    {
    clear: both;
    }

    div#page-wrap
    {
    width: 800px;
    margin: 0 auto;
    }

    ul#nav
    {
    height: 203px;
    background: url(images/header-bg.jpg) no-repeat;
    list-style: none;
    margin: 0 auto;
    }
    ul#nav li a
    {
    display: block;
    width: 130px;
    float: left;
    margin-top: 120px;
    color: White;
    font-weight: bold;
    }

    div#main-content
    {
    padding-bottom: 50px;
    background-color: #3A362F;
    }
    div#main-content div#left-col
    {
    float: left;
    width: 232px;
    height: 250px;
    border: 1px solid #545454;
    background-color: #282520;

    }

    div#main-content div#left-col2
    {
    float: left;
    width: 232px;
    top: 200px;
    height: 250px;
    margin-top: 10px;
    border: 1px solid #545454;
    background-color: #282520;

    }
    div#main-content div#right-col
    {
    float: right;
    width: 540px;
    border: 2px solid #282520;
    line-height: 30px;
    background-color: #DEDEDE;
    padding-left: 5px;
    }

    Everything else looks fine, it is just that the header is not alligning in FF, but is doing pretty ok in IE. Any Ideas?

    # February 5, 2009 at 2:15 am

    can you upload the body background image or give the link of the site

    # February 5, 2009 at 2:36 am

    Gavin,

    could you post a link to the test page, then I can get firebug over it to see whats wrong?

    # February 19, 2009 at 3:33 am

    Sorry for the late reply, been offline for some time.

    I managed to sort the issue out, it seemed that my firefox was causingthe issue. I had to reload my notebook, and once I reinstalled all applications it sorted it out, I haven;t seen the issue again.

    thank you all for trying to help.

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".