#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    9
    Rep Power
    0

    Netscape PC - CSS - Images chopped in half!


    I'm having some trouble with a CSS page that works perfectly fine in IE Mac/PC, Safari, and Netscape on Mac, but goes wonky on Netscape 6 and 7.1 for PC.

    Basically the top navigation, consisting of three images, gets chopped in half - only the bottom half of the images is displayed. The top half is simply blank. There's enough space for the rest of the image in the navbar. If I put a background-color: definition on the DIV that handles the tab, it stops where the image stops, cut off halfway up.

    If I RESIZE the image, using either CSS or HTML, it displays fine (but, of course, at the wrong size!) This leads me to suspect that it's some kind of refresh bug in Netscape... but I haven't found anyone else with the same problem, so maybe it's just somethin' I did.

    Here's the HTML that handles this part of the page:

    Code:
    <div id="nav2">
      	<div id="nav-secondary-title"><img src="images/title-subpage.gif" width="127" height="20" /></div>
      	<div id="nav-secondary">
         		<div class="tab"><a href="#"><img src="images/studentstab.gif" width="77" height="27" class="navimage" /></a></div>
    	     	<div class="tab"><a href="#"><img src="images/fullartstab.gif" width="100" height="27" class="navimage" /></a></div>
    	     	<div class="tab"><a href="#"><img src="images/studentstab.gif" class="navimage" /></a></div>
    	  </div>
    </div>
    And here's the relevant CSS:

    Code:
    	#nav2 {							/* nav bar for secondary pages */
    		border-top: 1px solid #BD7445;
    		border-left: 1px solid #BD7445;
    		border-bottom: 1px solid #2D2A28;
    		border-right: 1px solid #2D2A28;
    		height: 27px;
    		margin:0px; padding:0px;
    		z-index: 0;
    		background: #A73600;
    		}
    
    	#nav-secondary-title {  /*placement of title on secondary pages */
    		display: inline;
    		float: left;
    		height: 20px;
    		margin: 0px;
    		z-index: 1;
    		padding:2px 10px 0px 10px;
    	}
    
    	#nav-secondary {  /* placement of main nav on secondary pages */
    		float: right;
    		margin: 0px 10px 0px 10px;
    		height: 27px;
    		padding: 0px;
    		z-index: 1;
    	}
    
    	.tab {
    		position: relative;
    		top: 2px;
    		display: inline;
    		padding: 0px;
    		margin: 0px;
    	}
    	img.navimage {
    		border: 0px; margin: 0px; padding:0px 6px 0px 6px;
    	}
    Thanks - any help would be much appreciated!
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    I don't know what actually caused your problem. Your code was a little more complex than I like to debug, coming in from the outside. I simplified and got what I think you want in general. Take this, http://garyblue.port5.com/webdev/navimage.html and add stuff until something breaks&mdash;then you'll know the offender.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    9
    Rep Power
    0
    Thanks - the code that you gave me works, on its own... unfortunately there's another nav bar just BELOW this one, and the bottom line of the tab has to line up with the top line of that nav bar. So I have to move the nav images down 2 pixels... and then it breaks in Mac IE 5. *sigh*

    I'll play around with this code for a bit, though, and see what happens. Thanks.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    9
    Rep Power
    0
    Alright - I fixed it, but only by using a stupid hack to fix a stupid bug.

    I'd noticed that Netscape worked fine if I resized the graphic to something incorrect, but only displayed the bottom half of the graphic if I left it at its natural size. So I added "height: 27.1px" into the definition for that image class (all the tab images are 27 pixels high). Works fine in all the browsers I've tried it in so far, and I can't see any distortion...

IMN logo majestic logo threadwatch logo seochat tools logo