SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2003
    Location
    Boston
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help with navigation!!!

    Hello, I have been working on this site, but one little problem stops to complete it.
    Fist I have to say that all work ok in Firefox, it is IE where the problem manifest.
    I am planning to have three different styles to offer, and the navigation for it causes the main content to crop when the mouse pointer is over the links. The links to switch the styles are three blue small squares. Now, to bring the main content back, the mouse just needs to go over the options and only these options: house and hardware.

    http://www2.bc.edu/~olibar/web3dnews/

    This is the css code involved in the sections described above:

    Code:
    /* Styles navigation */
    ul#styleNav {
    	float:right;
    	margin: 0px;
    	padding: 0px;
    	list-style-type: none;
    }
    ul#styleNav li{
    	float: left;
    	width: 20px;
    	height: 15;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #FFF;
    }
    ul#styleNav a {
    	background-image: url(switcherB.gif);
    	background-repeat: no-repeat;
    	display: block;
    	text-decoration: none;
    	color: #FFF;
    	background-position: 4px 3px;
    }
    
    ul#style nav a:link {
    	background-image: url(switcherB.gif);
    	background-repeat: no-repeat;
    	background-position: 4px 3px;
    	
    }
    ul#styleNav a:hover {
    	background-image: url(switcherOverB.gif);
    	background-repeat: no-repeat;
    	background-position: 4px 2px;
    }
    ul#styleNav span {
    	visibility: hidden;
    }
    ul#mNav li{
    	float: left;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 17px;
    	color: #FFF;
    }
    ul#mNav span{
    		visibility: hidden;
    }
    ul#mNav li#home a{
    	position:relative;
    	height:36px;
    	width:65px;
    	background-image: url(homeB.jpg);
    	background-repeat: no-repeat;
    	display: block;
    	background-position: 3px;
    	text-decoration:none;
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #E0DA1B;
    }
    ul#mNav li#home a:link{
    	background-image: url(homeB.jpg);
    	background-repeat: no-repeat;
    }
    ul#mNav li#home a:hover{
    	background-image: url(homeOverB.jpg);
    	background-repeat: no-repeat;
    	background-position: 2px;
    }
    ul#mNav li#hardware a{
    	height:36px;
    	width:108px;
    	background-image: url(hardwareB.jpg);
    	background-repeat: no-repeat;
    	background-position: 1px;
    	display: block;
    	text-decoration:none;
    	border-right-width: 1px;
    	border-right-style: solid;
    	border-right-color: #E0DA1B;
    }
    ul#mNav li#hardware a:link{
    	background-image: url(hardwareB.jpg);
    	background-repeat: no-repeat;
    }
    ul#mNav li#hardware a:hover{
    	background-image: url(hardwareOverB.jpg);
    	background-repeat: no-repeat;
    	background-position: -1px;
    }
    Thank your very much

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Sounds like the position:relative bug

    Add position relative to your global id.
    Code:
    #global{
     width:725px;
     padding:0px;
     margin:0px auto;
     text-align:center;
     position:relative;
    }
    That should do the trick

    Paul

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2003
    Location
    Boston
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    not

    hello Paul, I tried the position relative rule but it did not work, still does the cropping.

    Is there something else I can do?
    And is IE the problem or my css rules? ( Wondering why it does not do the same in Firefox )

    Thank you.
    Ramiro

    Quote Originally Posted by Paul O'B
    Hi,

    Sounds like the position:relative bug

    Add position relative to your global id.
    Code:
    #global{
     width:725px;
     padding:0px;
     margin:0px auto;
     text-align:center;
     position:relative;
    }
    That should do the trick

    Paul

  4. #4
    SitePoint Zealot physt's Avatar
    Join Date
    Jul 2004
    Location
    Schenectady, NY
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had this problem 2...never found a way to fix it and ended up altering the design..if you can help him id appreciate it!

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Sorry I picked the wrong element.

    Just add it to this one and not the one I mentioned above.
    Code:
    #leftContent{
     background-color: #FFF;
     margin: 0px;
     padding: 0px;
     float: left;
     height: 100%;
     width: 485px;
     border-top-width: 2px;
     border-top-style: solid;
     border-top-color: #333333;
     position:relative;
    }
    I should have tested the first one but I knew it was the position:relative bug.

    Its a common problem with ie and its called the peek-a-boo bug and the fix is to add position:relative to one of the elements in question or ro the elements parent. Sometimes you have to follow through from parent to child.

    Its most common on floats (and images) and floats with negative margins but does crop up in odd places.

    The above should sort it now

    Paul

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by physt
    I had this problem 2...never found a way to fix it and ended up altering the design..if you can help him id appreciate it!
    I can fix anything Show me your code and I'll fix it for you

    Paul

    (hope I can fix it now I've said that)

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2003
    Location
    Boston
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thank you

    Thank you Paul, it worked.
    I always learn something new when you help me.



    Ramiro

    Quote Originally Posted by Paul O'B
    Sorry I picked the wrong element.

    Just add it to this one and not the one I mentioned above.
    Code:
    #leftContent{
     background-color: #FFF;
     margin: 0px;
     padding: 0px;
     float: left;
     height: 100%;
     width: 485px;
     border-top-width: 2px;
     border-top-style: solid;
     border-top-color: #333333;
     position:relative;
    }
    I should have tested the first one but I knew it was the position:relative bug.

    Its a common problem with ie and its called the peek-a-boo bug and the fix is to add position:relative to one of the elements in question or ro the elements parent. Sometimes you have to follow through from parent to child.

    Its most common on floats (and images) and floats with negative margins but does crop up in odd places.

    The above should sort it now

    Paul

  8. #8
    SitePoint Enthusiast
    Join Date
    Dec 2003
    Location
    Boston
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    just a side effect

    Well, the position: relative rule solved the cropping problem, but as a side effect
    it removed the background image (a black and grey horizontal line on top below the date ) and the background of the post content (light grey) resizes in a weird way when I scroll down.

    Ramiro

    Quote Originally Posted by Paul O'B
    Sorry I picked the wrong element.

    Just add it to this one and not the one I mentioned above.
    Code:
    #leftContent{
     background-color: #FFF;
     margin: 0px;
     padding: 0px;
     float: left;
     height: 100%;
     width: 485px;
     border-top-width: 2px;
     border-top-style: solid;
     border-top-color: #333333;
     position:relative;
    }
    I should have tested the first one but I knew it was the position:relative bug.

    Its a common problem with ie and its called the peek-a-boo bug and the fix is to add position:relative to one of the elements in question or ro the elements parent. Sometimes you have to follow through from parent to child.

    Its most common on floats (and images) and floats with negative margins but does crop up in odd places.

    The above should sort it now

    Paul

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Quote Originally Posted by me
    Sometimes you have to follow through from parent to child.
    Being unfamiliar with your design I'm sorry that i didn't notice the image was missing. However the answer is still the same.

    You need to add position:relative here also.

    Code:
    .post {position:relative}
    Ie especially likes children of positioned elements to have a position defined also.

    Hopefully that will be the last of the problems but if you see any more just shout

    paul

  10. #10
    SitePoint Enthusiast
    Join Date
    Dec 2003
    Location
    Boston
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Great!!

    Thank you very much, it worked. Next time into this problem I'll know what to do.
    And I can also help others.

    Ramiro

    Quote Originally Posted by Paul O'B
    Hi,

    Being unfamiliar with your design I'm sorry that i didn't notice the image was missing. However the answer is still the same.

    You need to add position:relative here also.

    Code:
    .post {position:relative}
    Ie especially likes children of positioned elements to have a position defined also.

    Hopefully that will be the last of the problems but if you see any more just shout

    paul


Bookmarks

Posting Permissions

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