Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Ok, I was creating a site for myself and I decided to code it in IE, and then when I was finished look and see if it was displaying properly in FF. And of course it wasn't. I've got a 2 column layout - a menu on the left and content on the right. I want them to display side by side. So I floated them both to the left and it all works cool in IE7. I've got a footer, and with FF the footer is pushed up just below the menu. I'm also having trouble removing the bullets on my nav menu in FF. I've done list-style-type: none; but it won't work in FF.

    I've tried searching the net but all the examples everyone gives don't seem to work. Can anyone help? This is probably a noob question, but I do want to get this done properly.

    The site is at: http://diddy29.110mb.com/index.html

    Any help is very much appreciated, thanks.

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    First of all, you can find an example of the CSS layout you are using
    by picking from a site like this: http://layouts.ironmyers.com/

    You have a typo in your "style.css" ...
    list-sytle-type: none;

    For your header, you should specify the dimensions so FF knows
    how much to fill the space. You have no height specified.



    .


  4. #3
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Your footer is at the bottom on my machine, did you fix it?
    You can add- clear: both; to your footer div and that will push it to the bottom.

    Also mlseim is right about the spelling error.

    You should put your a: links in this order when declaring all four at once in your css.
    a:link
    a:visited
    a:hover
    a:active

    Failure to do so may result in errors with some browsers.

    You should also avoid using dashes with your id's too.
    Use an underscore.

  5. #4
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Thanks guys that worked. I feel sto stupid. But anyway, I know how to do it right now.

    I didn't know about the underscores in the id's. Thanks for that.

    ===============================

    I also have another problem that is very weird. When you click on the links, or hold your mouse over them, they suddenly appear on a line by themselves with the underline underlining the whole line. It pushes the content below it down even further. I've never seen this before. This works in IE and FF. Can anyone see why this may be happening? This happened both before and after I made those changes. The page is now updated on the same link, so you can now view the updated page.

    Thanks.

  6. #5
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    You got me working tonight Diddy. It took me a while but I narrowed it down to a part in your css that was incorrect. I removed the commas in this css snippet.

    div#navcontainer ul li a:link a:visited a:active
    {
    display: block;
    background: #ffffff;
    font-family: century gothic;
    color: #990000;
    padding: 5px 0px 2px 0px;
    text-decoration: none;
    border-bottom: 1px solid #990000;
    }

    When the commas were there, it puts those declarations by themselves and does not group them with the others like you wanted. Since they are further down in your css than your a:link a:visited a:hover a:active declarations are, they recieve precedence over those. Hard to explain.
    Basically commas will seperate your declarations, no commas will group them so they only apply for that id.

    Did I confuse you yet?
    I didn't test in IE but it should work.

  7. #6
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Ok, that worked for the random link problem, but that removed the formatting in the nav bar, where you asked me to change the commas. (it's the same in IE and FF)

  8. #7
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    That should be minor. I deleted your code from my computer and I don't have time do figure it out. Your in school right? It will be good practice for ya! If you really get stuck with that, let me know.

  9. #8
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Yeah, I'm still in school. i"ll try some more on it. Thanks for all your help.

  10. #9
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Ok, I got it working. Basically what the problem was that the nav bar's grouped a's were messing things up, so i had

    Code:
    div#navcontainer ul li a:link, a:visited, a:active
    {
    
    }
    
    div#navcontainer ul li a:hover, a#current
    {
    
    }
    I tried removing the commas, that fixed the link problem but it messed up most of the formatting in the nav bar. So what I decided to do, was to not group the a's at all, and that worked. So I had

    Code:
    div#navcontainer ul li a:link
    {
    
    }
    
    div#navcontainer ul li a:visited
    {
    
    }
    
    div#navcontainer ul li a:active
    {
    
    }
    
    div#navcontainer ul li a:hover
    {
    
    }
    
    div#navcontainer ul li a#current
    {
    
    }
    Quite a bit more css to sift through, but it did work.

    So thanks guys for all your help! I'm glad I got that fixed.

  11. #10
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    I knew you'd figure it out. Although grouping those should do the same thing. Remember the order of appearance when grouping, that may have had something to do with it.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:58 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com