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 2 of 2 FirstFirst 1 2
Results 11 to 15 of 15
  1. #11
    Senior Member
    Join Date
    Feb 2011
    Location
    England
    Posts
    103
    Member #
    26718
    Liked
    3 times
    Thanks Ronald for your help. I'll study your CSS and see how it works. I used the selectors because being new to CSS I'm using various books, in this case one by Dan Cederholm, and that's the syntax he uses.

  2.  

  3. #12
    Senior Member
    Join Date
    Feb 2011
    Location
    England
    Posts
    103
    Member #
    26718
    Liked
    3 times
    Update - I've just updated to IE9 and everything works fine after I posted below. Do I have to worry about everyone else not running IE9?


    Okay, I've got the highlight and active tabs problem solved. However, the uneven spacing of the tabs still occurs in IE. If the page is viewed for the first time everything appears okay, however try clicking on one of the links and everything falls apart. I've cleaned up and simplified the CSS and html quite a bit. heres the html:
    Code:
    <body id= "index">
    <div id = "all">
    <div id= "title">
    17minutes Photography
    </div>
    <div id = "menu">
    <ul>
    <li id="indexcurrent"><a href = "#">Home</a></li>
    <li><a href = "gallery.html">Gallery</a></li>
    <li><a href = "mailto:lolowen999@gmail.com">Contact</a></li>
    <li><a href = "faq.html">FAQ</a></li>
    </ul>
    </div>
    <div id="indexpicture">
    <img src="images/Walkway.jpg" width="800px" height="540px"/>
    </div>
    </div>
    </body>
    and here's the CSS:
    Code:
    #menu     {
    
            width:810px;
            height:60px;
            color: #000000;
            font-size:200%;
            text-align: center;
            border-bottom: solid #333333 3px;
            }
    
    #menu li    {
    
            list-style-type:none;
            float:left;
            width:5em;
            text-align:center;
            padding-bottom:1px;
            margin-top:28px;
            }
    #menu a:link    {
                display:block;
                text-decoration:none;
                color:black;
                background-color:#666666;
                }
    #menu a:visited     {
                    text-decoration:none;
                    color:black;
                    background-color:#666666;
                    }
    
    #menu a:hover ,  /* body#index #indexcurrent, body#gallery #gallerycurrent refers to the <li> id's for those pages
                                in a parent-child format*/
    body#index  #indexcurrent a,
    body#gallery  #gallerycurrent a     {
                                    background-color:#FFFFFF;
                                    color:#000000;
                                    }
    #menu a:active    {
                    background-color:#FFFFFF;
                    color:#000000;
                    }
    Thanks, Lol

  4. #13
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Sometimes, when I'm having issues like this, I set an outline on all of the elements to help troubleshoot positioning and margins/padding.

    Outlines work, and are coded just like, borders, the only difference is that they're rendered inside the element and do not affect their size.

    Example:

    Code:
    #menu a {outline: 1px solid red;}
    So, set a different color for each element and see where the extra space is coming in. If the outline is around the extra space, there's a padding issue, if it's within the extra space, you have a margin issue. The different colors will also tell you if the extra space is around the a or li elements.
    AlphaMare likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  5. #14
    Senior Member
    Join Date
    Feb 2011
    Location
    England
    Posts
    103
    Member #
    26718
    Liked
    3 times
    Thanks Ronald I'll give that a try

  6. #15
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by Ronald Roe, post: 204499
    Sometimes, when I'm having issues like this, I set an outline on all of the elements to help troubleshoot positioning and margins/padding.

    Outlines work, and are coded just like, borders, the only difference is that they're rendered inside the element and do not affect their size.

    Example:

    Code:
    #menu a {outline: 1px solid red;}
    So, set a different color for each element and see where the extra space is coming in. If the outline is around the extra space, there's a padding issue, if it's within the extra space, you have a margin issue. The different colors will also tell you if the extra space is around the a or li elements.
    This is one of the handiest hints for troubleshooting positioning I've come across. I was doing something similar, by adding background colours to the various elements, but outlines are much easier on the eyes and still makes the positioning extremely visible and easy to understand.

    Thanks!
    Ronald Roe likes this.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!


Page 2 of 2 FirstFirst 1 2

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 11:47 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com