Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Help with CSS buttons and item placement

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #29524
    CCBB
    Member

    CSS newbie with some formatting problems for a home page. The navigation bar on the left is shifted to the right in IE. How do I add an IE exception to shift it to the right?

    I have 2 rollover buttons in the nav menu, a short button for single lines and a tall button for double lines. The short buttons are set to show left and right on hover. So are the tall buttons. I set span class = tall on the tall buttons’ left side to differentiate between them and the left side works but I can’t figure out how to make the right side work. As I wrote it, the right side of either the left or right buttons are messed up and show tall when it should show short or short when it should show tall. I commented the section which is causing the problem.

    Here’s a live example. http://www.myturbodiesel.com/indextest.htm

    Here is the css

    Code:
    body {
    background-image: url(“last6.jpg”);
    background-repeat: no-repeat;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    font-size: 17px;
    font-weight: bold;
    }
    #wrapper {
    min-width: 1000px;
    margin: 0;
    }
    #header {
    margin: 0px;
    min-height: 122px;
    padding: 0px;
    background-image: url(finallogo.png);
    background-repeat: no-repeat;
    }
    * html #header {height:90px} /* IE Min-Height Hack */

    #centercolumn { /* Parent Wrapper for inside boxes */
    margin: 0px 5px 0px 5px;
    display: inline; /* IE Hack */
    padding: 7px;
    width: 80px;
    float: left;
    }

    #rightcolumn {
    margin: 10px 3% 0px 0px;
    padding: 8px;
    display: inline; /* IE Hack */
    width: 550px;
    float: right;
    border: 4px solid #666666;
    background-color: #ffffff;
    color: #000000;
    }

    #footer {
    background-image: url(images/footer.jpg);
    background-repeat: no-repeat;
    margin: 500px 0px 5px 0px;
    display: inline; /* IE Hack */
    font-size: 11px;
    padding: 4px;
    float: left;
    width: 300px;
    }
    h1 {
    font-size: 19px;
    }
    h2 {
    font-size: 18px;
    }
    .border {
    font-size: 11px;
    border-top: 1px dashed #ddd;
    border-bottom: 1px dashed #ddd;
    background-color: #fbfbfb;
    padding: 7px 7px 7px 7px;
    margin: 7px 0px 7px 0px;
    }
    .mainnav {
    list-style: none;
    }

    ul {
    padding: 0px;/*padding for group*/
    width: 420px;
    list-style: none;
    }
    ul li {
    display: block; /*For ignore double margin in IE6*/
    margin: 17px 0px /*padding between elements, limited by font size+padding*/
    }
    ul li a {
    color: #ffffff;
    cursor: pointer;
    float: left;
    text-decoration: none;
    }
    /* button position */
    ul li a span {
    margin: 0px 30px 0px -10px;/*outer margin element, increases button visible*/
    padding: 12px 15px 12px 48px;/*pads the text*/
    position: relative; /*To fix IE6 problem (not displaying)*/
    float: left;

    }
    /* short button mouseover */
    ul.blue li a.current, ul.blue li a:hover /* this section is the same class in short and tall buttons and is causing the problem*/ {
    background: url(shortbutton.png) no-repeat right;
    color: #333333;
    }
    ul.blue li a.current span, ul.blue li a:hover span{
    background: url(shortbutton.png) no-repeat left;
    }
    /* tall button mouseover */
    ul.blue li a.current span.tall, ul.blue li span.tall a:hover /* this section is the same class in short and tall buttons and is causing the problem*/ {
    background: url(tallbutton.png) no-repeat right;
    color: #333333;
    }
    ul.blue li a.current span.tall, ul.blue li a:hover span.tall {
    background: url(tallbutton.png) no-repeat left;

    #79165
    virtual
    Participant

    To start with before anything else you need a doctype or IE will not play nice. See this http://www.w3.org/QA/2002/04/valid-dtd-list.html, I would suggest HTML 4.01 transitional which will allow you some leeway as a newbie.

    Your unique div tag is not closed.
    Your body tag is not closed, and you should be using the css to declare the body background colour. The font used should also be defined in the css in the body tag together with font-size and colour, and when you specify which font-family you should give a selection like this:

    Code:
    body {
    background: #333;
    font: 13px/1.5 Arial, Helvetica, sans-serif;
    color: #FFF;
    }

    You should also be defining your divs with id’s (used only once on a page) or classes (can be used several times on a page) and styling them accordingly with margins to space them out, not using <p>&nbsp;</p> for your spacing. Do not use capitals for html tags, as some of your <p> tags are. A typical layout would look like this

    Code:




    Name of your website and or page

    All the content of your site goes in here, this can be divided into 1, 2 or 3 divs for left, centre and right content.



    If you need some layout examples you can download them from this site http://www.code-sucks.com/css%20layouts/

    Lastly, as a newb always run your html through the validator http://validator.w3.org/ it will point out errors that you can’t see and help you correct your code.

    Sorry this really didn’t answer your questions, but it is best to get the basics right or things will become much harder to debug later on.

    #79160
    CCBB
    Member

    Thank you, I rewrote the html and css and now it passes.

    Now I have a new problem – IE shows the left navigation column to the right of where firefox and safari do. How can I shift it to the left in only IE?

    #79176
    virtual
    Participant

    I forgot to mention the css reset. If you are not going to be using all those Eric Meyer tags, you can just use

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

    I took a look at your site in IE6, 7 and 8 and Firefox, and your navigation is on the left, so I don’t understand your problem unless you fixed it in the meantime :?

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.