Grow your CSS skills. Land your dream job.

Slew of layout problems – Firefox

  • # February 21, 2009 at 6:20 pm

    Back again…

    So obviously I still have some things to learn because as I’m developing this site, I’m having problems in Firefox. I typically have issues with IE, but everything is looking pretty good in IE6. Could someone please help with the following?

    First off, the link:
    http://www.stonescapesofcincinnati.com

    1.) In FF, why is my navigation bar off center? This is aligning properly in IE, and in Dreamweaver.
    2.) How come my background image for my container is not repeating vertically? I have set the repeat-y in my style sheet.

    Here is my CSS:

    Code:
    /* CSS Document */

    body {
    background: url(top_head_bg.jpg) repeat-x left top;
    background-color: #E8E4D6;
    margin: 0;
    padding: 0px;
    }

    .centeredImage {
    text-align:center;
    margin-top:20px;
    margin-bottom:0px;
    padding:0px;
    }

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

    div#header {
    background: url(top_head.jpg) no-repeat left top;
    height:150px;
    width:768px;
    margin:0 auto;
    }

    ul#nav {
    background: url(nav_bg.jpg) no-repeat;
    height: 38px;
    width: 768px;
    margin: 0 auto;
    list-style: none;
    }
    ul#nav li {
    display: inline;
    float: left;
    }
    ul#nav li a {
    text-indent: -9999px;
    display: block;
    height: 38px;
    }
    ul#nav li a.home {
    background: url(images/nav_home.png) no-repeat bottom center;
    width: 148px;
    left: 10px;
    margin-left: 14px;
    }
    ul#nav li a.services {
    background: url(images/nav_services.png) no-repeat bottom center;
    width: 148px;
    }
    ul#nav li a.about {
    background: url(images/nav_about.png) no-repeat bottom center;
    width: 148px;
    }
    ul#nav li a.diy {
    background: url(images/nav_diy.png) no-repeat bottom center;
    width: 148px;
    }
    ul#nav li a.contact {
    background: url(images/nav_contact.png) no-repeat bottom center;
    width: 148px;
    }
    ul#nav li a.home:hover, a.home:active,
    ul#nav li a.services:hover, a.services:active,
    ul#nav li a.about:hover, a.about:active,
    ul#nav li a.diy:hover, a.diy:active,
    ul#nav li a.contact:hover, a.contact:active {
    background-position: top center;
    width: 148px;
    }

    div#container {
    background: url(sides.jpg) repeat-y;
    height: 13px;
    width: 768px;
    margin: 0 auto;
    }

    div#bottom {
    background: url(bottom.jpg) no-repeat;
    height: 29;
    width: 768;
    margin: 0 auto;
    }

    div#left-main {
    float: left;
    width: 400px;
    padding-left: 5px;
    padding-top: 10px;
    text-align: center;
    font-weight: bold;
    }

    Rob
    # February 22, 2009 at 6:49 am

    Ok

    1) never use dreamweaver design view. It will make you want to destroy things… no matter how easy it looks you will never be able to make something in design veiw that works in all browsers – if it even works in one. Your menu isnt centred because you have not reset the default indent of your UL list. just add padding:0; to your ul#nav

    2) Your background container is repeating the image, its just set to height: 13px; so its only 13px high… :)

    To be honest, if you don’t know how to code HTML/CSS it would be quicker for you to learn how than to try and design something with a WYSIWYG editor. Never trust dreamweavers design view to tell you "its working" because trust me, it wont. lol

    # February 22, 2009 at 11:26 am

    did some testing of your code:

    1) put all images into the imges folder and changed the pointers accoedingly
    2) made changes to HTML code, changed code is below, added page-wrap to HTML code and made it
    768px wide and other changes

    Code:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam faucibus mi eu purus. Sed
    commodo, ante non feugiat blandit, sem est sodales purus, sit amet tincidunt est libero id
    quam. In arcu. Aenean viverra rutrum est. Cras lorem nibh, commodo sit amet, dignissim non,
    mollis sed, odio. Sed sagittis, ante non lobortis hendrerit, ante eros porta nulla, sit amet
    tempus dui ante vel felis. Integer auctor, dui sit amet tristique molestie, dui elit lacinia
    nulla, vitae placerat ligula turpis non ante. Duis a velit eu diam suscipit aliquet.
    Suspendisse potenti. Morbi mollis. Cras quis ligula malesuada quam suscipit pretium. Aenean
    aliquet odio id justo.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam faucibus mi eu purus. Sed
    commodo, ante non feugiat blandit, sem est sodales purus, sit amet tincidunt est libero id
    quam. In arcu. Aenean viverra rutrum est. Cras lorem nibh, commodo sit amet, dignissim non,
    mollis sed, odio. Sed sagittis, ante non lobortis hendrerit, ante eros porta nulla, sit amet
    tempus dui ante vel felis. Integer auctor, dui sit amet tristique molestie, dui elit lacinia
    nulla, vitae placerat ligula turpis non ante. Duis a velit eu diam suscipit aliquet.
    Suspendisse potenti. Morbi mollis. Cras quis ligula malesuada quam suscipit pretium. Aenean
    aliquet odio id justo.

     

    3) made some changes to CSS code

    Code:
    /* CSS Document */

    body {
    background: url(images/top_head_bg.jpg) repeat-x left top;
    background-color: #E8E4D6;
    margin: 0;
    padding: 0;
    }

    .centeredImage {
    text-align: center;
    margin: 0;
    padding: 20px 0;
    }

    .justify {
    text-align: justify;
    }

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

    #header {
    background: url(images/top_head.jpg) no-repeat left top;
    height: 150px;
    width: 100%;
    margin:0 auto;
    }

    ul#nav {
    background: url(images/nav_bg.jpg) no-repeat;
    height: 38px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    }
    ul#nav li {
    display: inline;
    float: left;
    }
    ul#nav li a {
    text-indent: -9999px;
    display: block;
    height: 38px;
    }
    ul#nav li a.home {
    background: url(images/nav_home.png) no-repeat bottom center;
    width: 148px;
    left: 10px;
    margin-left: 14px;
    }
    ul#nav li a.services {
    background: url(images/nav_services.png) no-repeat bottom center;
    width: 148px;
    }
    ul#nav li a.about {
    background: url(images/nav_about.png) no-repeat bottom center;
    width: 148px;
    }
    ul#nav li a.diy {
    background: url(images/nav_diy.png) no-repeat bottom center;
    width: 148px;
    }
    ul#nav li a.contact {
    background: url(images/nav_contact.png) no-repeat bottom center;
    width: 148px;
    }
    ul#nav li a.home:hover, a.home:active,
    ul#nav li a.services:hover, a.services:active,
    ul#nav li a.about:hover, a.about:active,
    ul#nav li a.diy:hover, a.diy:active,
    ul#nav li a.contact:hover, a.contact:active { background-position: top center;
    width: 148px;
    }

    #container {
    clear: both;
    background: url(images/sides.jpg) repeat-y;
    /*height: 13px;*/
    width: 100%;
    margin: 0 auto;
    margin-top: 0px;
    }

    #left-main {
    float: left;
    width: 360px;
    padding-left: 25px;
    padding-top: 10px;
    font-weight: bold;
    display: inline; /* For IE6. DM Bug */
    }

    #right-main {
    float: right;
    width: 330px;
    padding-right: 25px;
    padding-top: 10px;
    font-weight: bold;
    display: inline; /* For IE6. DM Bug */
    }

    #bottom {
    clear: both;
    background: url(images/bottom.jpg) no-repeat;
    height: 29px;
    width: 100%;
    margin-top: 0px;
    margin-bottom: 20px;
    margin: 0 auto;
    }

    tweaked it up a bit,
    how does that look h2o skier?

    Al

    # February 22, 2009 at 2:59 pm

    Robskiwarrior,

    Thanks for the pointers. I don’t use Dreamweaver Design View, just use the code view, so I’m only using HTML/CSS. I suppose I could just as easily use Notepad ++ or whatever else.

    Rob
    # February 22, 2009 at 3:04 pm
    "H2oskier" wrote:
    Robskiwarrior,

    Thanks for the pointers. I don’t use Dreamweaver Design View, just use the code view, so I’m only using HTML/CSS. I suppose I could just as easily use Notepad ++ or whatever else.

    Thats the best news I have had all night :D

    # February 22, 2009 at 3:09 pm

    al_m473,

    That looks great! Thank you for taking a look at this as well. I need to go back and see what the both of you did so I can learn from my mistakes.

    # February 22, 2009 at 3:20 pm
    "Robskiwarrior" wrote:
    "H2oskier" wrote:
    Robskiwarrior,

    Thanks for the pointers. I don’t use Dreamweaver Design View, just use the code view, so I’m only using HTML/CSS. I suppose I could just as easily use Notepad ++ or whatever else.

    Thats the best news I have had all night :D

    You must be having a very slow night.

    …If you’re still online, could you make a suggestion on what is the best way to create a drop down box? For the ‘Our Services’ drop down, I need to have a list that contains like 6 options. I know I could go with Javascript, PHP, or CSS (or combination there of), but still learning this, what would be easiest? I’ll obviously be looking around the net for sample code to help me along the way.

    # February 22, 2009 at 5:15 pm

    Multilevel Dropdown Menu
    http://www.kriesi.at/archives/create-a- … via-jquery

    here is an example of a Multilevel Dropdown Menu, jquery is used to accommodate IE6,
    used this when I wrote the web site http://www.kingsvillecurling.com

    Al

    Rob
    # February 22, 2009 at 6:16 pm

    I would agree with Al.

    CSS only is a good option but you do need a JS for IE’s rediculas "im not going to let :hover work on anything but links" crap… :)

    # February 24, 2009 at 10:12 pm

    Al,

    Thanks for that link, it was real helpful. I’m about 95% done with figuring out everything in the drop down, but I’ve run into 2 small formatting issues. Both of these need to be looked at in Firefox as I’ve not tried implementing the jQuery part of the code yet (although my formatting is off in IE too!).

    1.) On the right side of my navigation screen, you can see the nav icons don’t extend all the way across the nav bar. This is especially noticeable if you rollover the ‘Contact Us’ link.
    2.) Rolling over ‘Our Services’ you can see the drop down menu is wider than the nav icon (which is set at 148px). I can’t figure out why, but I have a feeling that both of these issues are related.

    I think I’ve identified the problem with the #nav li a.home { call in my CSS, but I can’t figure out what to do with it. Can someone take a look?

    Link:
    http://www.stonescapesofcincinnati.com

    CSS

    Code:
    body {
    background: url(images/top_head_bg.jpg) repeat-x left top;
    background-color: #E8E4D6;
    margin: 0;
    padding: 0;
    }

    .centeredImage {
    text-align: center;
    margin: 0;
    padding: 20px 0;
    }

    .justify {
    text-align: justify;
    }

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

    #header {
    background: url(images/top_head.jpg) no-repeat left top;
    height: 150px;
    width: 100%;
    margin:0 auto;
    }

    /*START NAVIGATION*/

    #nav {
    background: url(images/nav_bg.jpg) no-repeat;
    height: 38px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    list-style-position: outside;
    position: relative;
    }

    #nav, #nav ul{
    margin:0;
    padding:0;
    list-style-type:none;
    list-style-position:outside;
    position:relative;
    line-height:36px;
    }

    #nav a:link, #nav a:active, #nav a:visited{
    display:block;
    border:1px solid #333;
    color:#fff;
    text-decoration:none;
    background-color:#615B4A;
    }

    #nav li{
    float:left;
    position:relative;
    width: 148px; /*I added to make tabs 148 px wide*/
    }

    #nav ul {
    position:absolute;
    display:none;
    width:148px;
    top:38px;
    }
    #nav li ul a{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    width:148px; /* I think this sets the dropdown width but it’s appearing too wide*/
    float:left;
    padding: 0px 5px;
    line-height: 30px;
    }

    #nav li ul a:hover {
    color:#ffffff;
    text-decoration: underline;
    }

    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
    }

    #nav li a.home {
    background: url(images/nav_home.png) no-repeat bottom center;
    width: 148px;
    /*left: 10px;*/
    margin-left: 14px;
    text-indent: -9999px;
    }
    ul#nav li a.services {
    background: url(images/nav_services.png) no-repeat bottom center;
    width: 148px;
    text-indent: -9999px;
    }

    ul#nav li a.about {
    background: url(images/nav_about.png) no-repeat bottom center;
    width: 148px;
    text-indent: -9999px;
    }
    ul#nav li a.diy {
    background: url(images/nav_diy.png) no-repeat bottom center;
    width: 148px;
    text-indent: -9999px;
    }

    ul#nav li a.contact {
    background: url(images/nav_contact.png) no-repeat bottom center;
    width: 148px;
    text-indent: -9999px;
    }

    #nav a.home:hover,
    #nav a.about:hover,
    #nav a.services:hover,
    #nav a.diy:hover,
    #nav a.contact:hover {
    background-position: top center;
    }
    /*END NAVIGATION*/

    #container {
    clear: both;
    background: url(images/sides.jpg) repeat-y;
    width: 100%;
    margin: 0 auto;
    margin-top: 0px;
    }

    #left-main {
    float: left;
    width: 360px;
    padding-left: 25px;
    padding-top: 10px;
    font-weight: bold;
    display: inline; /* For IE6. DM Bug */
    }

    #right-main {
    float: right;
    width: 330px;
    padding-right: 25px;
    padding-top: 10px;
    font-weight: bold;
    display: inline; /* For IE6. DM Bug */
    }

    #bottom {
    clear: both;
    background: url(images/bottom.jpg) no-repeat;
    height: 29px;
    width: 100%;
    margin-top: 0px;
    margin-bottom: 20px;
    margin: 0 auto;
    }

    # February 27, 2009 at 4:32 pm

    Sorry to bump this up, but I’m still facing issues with my navigation bar, button sizes.

    # February 27, 2009 at 11:38 pm

    I made the following changes to the CSS:

    1) #nav, #nav ul ==> line-height: 38px
    2) #nav ul ==> width: 151px (still needs work)
    3) #nav ul ==> width: 138px (compenstaes for 5px padding left and right)
    4) #nav li ul a ==> width: 138px

    this solves some of your problems with the layout. still working on the nav stuff

    Al

    # February 28, 2009 at 2:22 pm

    after changes I have made, the nav looks a little better.

    HTML:

    I added an ID to enclose the UL basically to use it to add the background and then keep the ul separate from it.
    This allows me to centre the ul and give it a width of 740px, 5×148.

    CSS:

    Code:
    body {
    background: url(images/top_head_bg.jpg) repeat-x left top;
    background-color: #E8E4D6;
    margin: 0;
    padding: 0;
    }

    .centeredImage {
    text-align: center;
    margin: 0;
    padding: 5px 0;
    }

    .bannerLeft {
    text-align: left;
    margin: 20px;
    padding: -5px;
    }

    .justify {
    text-align: justify;
    }

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

    #header {
    background: url(images/top_head.jpg) no-repeat left top;
    height: 150px;
    width: 100%;
    margin:0 auto;
    }

    /*START NAVIGATION*/

    #navbar {
    background: url(images/nav_bg.jpg) no-repeat;
    height: 38px;
    width: 768px;
    margin: 0;
    padding: 0;
    }

    #nav, #nav ul{
    width: 740px;
    margin: 0 auto;
    padding: 0;
    list-style-type:none;
    list-style-position:outside;
    position:relative;
    line-height:38px;
    }

    #nav a:link, #nav a:active, #nav a:visited{
    display:block;
    border:1px solid #333;
    color:#fff;
    text-decoration:none;
    background-color:#615B4A;
    }

    #nav li{
    float:left;
    position:relative;
    width: 148px; /*I added to make tabs 148 px wide*/
    }

    #nav ul {
    position:absolute;
    display:none;
    width:138px;
    top:38px;
    }

    #nav li ul a{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    width:138px; /* I think this sets the dropdown width but it’s appearing too wide*/
    float:left;
    padding: 0px 5px;
    line-height: 30px;
    }

    #nav li ul a:hover {
    color:#ffffff;
    text-decoration: underline;
    }

    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
    }

    #nav li a.home {
    background: url(images/nav_home.png) no-repeat bottom center;
    width: 148px;
    /*margin-left: 14px;*/
    text-indent: -9999px;
    }
    ul#nav li a.services {
    background: url(images/nav_services.png) no-repeat bottom center;
    width: 148px;
    text-indent: -9999px;
    }

    ul#nav li a.about {
    background: url(images/nav_about.png) no-repeat bottom center;
    width: 148px;
    text-indent: -9999px;
    }

    ul#nav li a.diy {
    background: url(images/nav_diy.png) no-repeat bottom center;
    width: 148px;
    text-indent: -9999px;
    }

    ul#nav li a.contact {
    background: url(images/nav_contact.png) no-repeat bottom center;
    width: 148px;
    text-indent: -9999px;
    }

    #nav a.home:hover,
    #nav a.about:hover,
    #nav a.services:hover,
    #nav a.diy:hover,
    #nav a.contact:hover {
    background-position: top center;
    }

    /*END NAVIGATION*/

    #container {
    clear: both;
    background: url(images/sides.jpg) repeat-y;
    width: 100%;
    margin: 0 auto;
    margin-top: 0px;
    }

    #left-main {
    float: left;
    width: 360px;
    padding-left: 25px;
    padding-top: 10px;
    font-weight: bold;
    display: inline; /* For IE6. DM Bug */
    }

    #right-main {
    float: right;
    width: 330px;
    padding-right: 25px;
    padding-top: 10px;
    font-weight: bold;
    display: inline; /* For IE6. DM Bug */
    }

    #center-main {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    padding-left: 30px;
    padding-right: 30px;
    }

    #bottom {
    clear: both;
    background: url(images/bottom.jpg) no-repeat;
    height: 29px;
    width: 100%;
    margin-top: 0px;
    margin-bottom: 20px;
    margin: 0 auto;
    }

    I have included all of the CSS even though I have only made a couple of changes, added id of #navbar, and dropped
    margin-left on home tab, and set element widths.

    Al

    # February 28, 2009 at 3:10 pm

    to get rid of the 2 pixel overflow of the nav bar on the right side, take the border off the tab:

    #nav a:link, #nav a:active, #nav a:visited{
    display:block;
    /*border:1px solid #333;*/
    color:#fff;
    text-decoration:none;
    background-color:#615B4A;
    }

    now the tabs line up on both the left and right sides

    Al

    # February 28, 2009 at 3:14 pm

    put the border on the other a elements

    #nav li ul a{
    border:1px solid #333;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    width:138px; /* I think this sets the dropdown width but it’s appearing too wide*/
    float:left;
    padding: 0px 5px;
    line-height: 30px;
    }

    Al

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.

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