Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jan 2010
    Location
    England
    Posts
    35
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question li and ul navbar hover problem in Chrome and Safari

    hello peeps ive just joined the site today and have 2 seperate topics so ive made 2 posts this is my 2nd

    im doing browser compatibilty testing on my prototype and i have a problem in chrome and safari. The css that ive written to give a navbar li and ul tags a hover ability works in all areas ive used it on IE and opera but not the above and i cant figure out why this would be, for example i have the typical nav bar at the top of the page with home button etc and the hover there works on all the browsers but ive also used the same tags to give other buttons hover ability ones placed below a pic gallery with a description (ie products that u can press to add to cart) and that works exactly as id planned in ie and opera but not in the above

    here is the css and xhtml i used to do this feature im hoping u can tell me why it wont work on all


    here is the navbar css

    #navcontainer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;

    }

    #navcontainer ul li {
    display: inline;

    }

    #navcontainer ul li a {
    text-decoration: none;
    padding: .2em 1em;
    color: white;
    background-color: #AAAADD;

    }

    #navcontainer ul li a:hover {
    color: #fff;
    background-color: #AABBBB;

    }

    here is the gallery css in case its this thats causing the hover not to work on all

    div.img {

    border:1px solid #AAAADD;
    height:auto;
    width:auto;
    float: left;
    text-align:center;


    }

    div.img img {
    display:inline;
    border:1px solid #AAAADD;


    }

    div.img a:hover img {
    border:1px solid black;
    }

    div.desc {
    text-align:center;
    font-size: 15px;
    width:129px;
    margin:1px;
    background-color: #AAAADD;
    color: blue;


    }

    div.desc a:hover {
    color: white;
    display: block;
    background-color: #AABBBB;


    }


    and here is the xhtml for the navbar and 2 of the gallery hover bits

    <div id="navcontainer">
    <ul>
    <li><a href="homepage.html">Home</a></li>
    <li><a href="restaurants.html">Restaurants</a></li>
    <li><a href="outdoors.html">Outdoor Activities</a></li>
    <li><a href="indoors.html">Indoor Activities</a></li>
    <li><a href="spas.html">Spa Treatments</a></li>

    </ul>
    </div>

    <div class="img">
    <a target="" href="orders.html">
    <img src="images/cateyes.jpg" alt="Cafe Francais" width="101" height="90" />
    </a>
    <div class="desc"><strong>Cafe Francais</strong> £10.00 booking fee, refundable against cost of meal.<br><a href="orders.html">ADD TO SHOPPING CART</a></div>
    </div>
    <div class="img">
    <a target="" href="orders.html">
    <img src="images/infinity.jpg" alt="Bellissimo Italiano" width="101" height="90" />
    </a>
    <div class="desc"><strong>Bellissimo Italiano</strong> £10.00 booking fee, refundable against cost of meal.<br><a href="orders.html">ADD TO SHOPPING CART</a></div>
    </div>



    when makin this post i noticed that the css is for li ul and a tags but on the gallery hover part that i wanted iv only used an a tag so i thought this could be the issue but ive since enclosed that gallery hover part `add to shopping cart` in ul and li tags as well as the a href and it just added a dot and messed up the layout and still didnt have the hover effect

    hope ya can help people

  • #2
    New Coder
    Join Date
    Jan 2010
    Location
    England
    Posts
    35
    Thanks
    4
    Thanked 0 Times in 0 Posts
    heres is a picture of one of the pages the top and bottom nav bars hover effect to grey as planned but the ADD TO SHOPPING CART bit will only hover grey effect in ie and opera
    Attached Thumbnails Attached Thumbnails li and ul navbar hover problem in Chrome and Safari-hoverprobs.jpg  

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    heres is a picture of one of the pages the top and bottom nav bars hover effect to grey as planned but the ADD TO SHOPPING CART bit will only hover grey effect in ie and opera
    Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New Coder
    Join Date
    Jan 2010
    Location
    England
    Posts
    35
    Thanks
    4
    Thanked 0 Times in 0 Posts
    hi again, i dont have to host the site on a server as its just a university assignment so ive packed all the files up in a zip and uploaded to here for you to have a look at

    thanks

    http://www.megaupload.com/?d=V84KSIWJ

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,684
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Hello venom6pak,

    We should be careful here since this is homework. http://www.codingforums.com/rules.htm

    Have you heard about validating? Check out the links about validation in my sig below. It could be the cause is in one of those errors and, even if it's not, you will have learned a lot by fixing them anyway.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Jan 2010
    Location
    England
    Posts
    35
    Thanks
    4
    Thanked 0 Times in 0 Posts
    yes i had read the rules about homework but i didnt think it applied to this scenario as i have alrdy completed the project in full by myself with no help from anyone, the problem i have posted here is only minor and doesnt effect the way my site works but id still like to resolve the issue if possible

    i wouldnt say its me handing my homework for ppl to do? ive done all of that myself can i not get help?

    i have read a little about validation but on wc3 schools it appeared that i had to give them a link to my site which i dont have as its for the uni intranet and its not online?

    also i used operas built in validate feature and it brought up 107 errors i was shocked but then i looked at the errors and what it pulled up made no sense at all they were not even errors in my oppinion and when i made the changes it pointed out it was incorrect

    any advice on validating? also please can we not try resolve the hover effect?


  • #7
    New Coder
    Join Date
    Jan 2010
    Location
    England
    Posts
    35
    Thanks
    4
    Thanked 0 Times in 0 Posts
    ahh ive just clicked on one of your signature links excavator and found the file uplaod part of wc3, it wouldnt let me upload my styles.css becasue it said it was using a text/css ?? i dont undertstand (edited ... i see now it has a seperate page for css and html markup oops )

    but anyway i uploaded my home page only and 99% of the errors it piks up are because i have the odd <!-- ---------------------- --> in my code to make it easier to read and its picked up every `-` as an error lol and also it says that <br><br><br> has an element closed early? and it underscores one of the > i dont understand that either lol but from what i can see whatever is in my comments is irrelevant for the code as its commente out and i dont see whats wrong with <br> being used when i need a gap between my elements but hey im still learning

    but during this process ive just noticed that it pointed out id used the navcontainer function alrdy on that page and it says if used multiple times must have a diff value, now then does that mean that this hover issue could be resolved by renaming and makin an extra nav function for the diff places imusing it on the page?

    because if that is the case it does not explain why i alrdy have it on 3 places on same page and 2 of the places work and 1 doesnt?

    come on guys give me a little help please ive done well to get this far by myself i dont get taught web devel at uni i have to learn myself for this particular module
    Last edited by venom6pak; 01-08-2010 at 09:04 PM.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,684
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Quote Originally Posted by venom6pak View Post
    yes i had read the rules about homework but i didnt think it applied to this scenario as i have alrdy completed the project in full by myself with no help from anyone, the problem i have posted here is only minor and doesnt effect the way my site works but id still like to resolve the issue if possible

    i wouldnt say its me handing my homework for ppl to do? ive done all of that myself can i not get help?
    Oh certainly you can get help! I was only wanting to make sure you realized that if someone provided too thorough of an answer that it could be viewed as cheating. I did not realize that the assignment was already completed - kind of makes it not so much homework now... more extra curricular instead.

    I didn't mean to sound like I was being critical.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,684
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    i have read a little about validation but on wc3 schools it appeared that i had to give them a link to my site which i dont have as its for the uni intranet and its not online?
    A couple tabs over is a place for Direct Input. You can just copy your code straight in to that textarea.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New Coder
    Join Date
    Jan 2010
    Location
    England
    Posts
    35
    Thanks
    4
    Thanked 0 Times in 0 Posts


    excavator u are a master coder i bet you already know what my problem is lol

    i havnt yet tried to give the navcontainers that have the hover feature a different name each time i use them on the same page

    do you reckon that might be the solution?

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,684
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    come on guys give me a little help please ive done well to get this far by myself i dont get taught web devel at uni i have to learn myself for this particular module
    You're doing great!
    When working on your code with the validator, you should start at the top because the errors cascade and there are lots of places where you fix the first one and it removes 20 subsequent errors.

    Your odd comments may be causing quite a bit of trouble for some browsers. In CSS your comments should be /* stuff you want commented out */ and in your markup they should look like <!-- stuff you want commented out -->. The validator is complaining about your extra -'s.

    XHTML wants elements closed. On a break that means adding a / to close it, like this - <br />

    And, even after all that work, just because it validates doesn't necessarily mean your hover is going to start working.
    It does eliminate a lot of possible causes and shows that you've put a lot of effort in before you asked for help.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •