CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

Netscape PC - CSS - Images chopped in half!

Discuss Netscape PC - CSS - Images chopped in half! in the CSS Help forum on Dev Shed.
Netscape PC - CSS - Images chopped in half! Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old January 26th, 2004, 01:16 PM
aahlookout aahlookout is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2004
Posts: 9 aahlookout User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 18 sec
Reputation 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!
Reply With Quote
  #2  
Old January 26th, 2004, 11:17 PM
kk5st's Avatar
kk5st kk5st is offline
Thanks Johnny Hart (BC) R.I.P.
Dev Shed Demi-God (4500 - 4999 posts)
  
Join Date: May 2003
Location: Dallas
Posts: 4,554 kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level)kk5st User rank is Colonel (50000 - 60000 Reputation Level) 
Time spent in forums: 1 Month 2 Days 7 h 23 m 11 sec
Reputation Power: 607
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.

Ask a better question, get a better answer.
Reply With Quote
  #3  
Old January 27th, 2004, 12:54 PM
aahlookout aahlookout is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2004
Posts: 9 aahlookout User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 18 sec
Reputation 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.
Reply With Quote
  #4  
Old January 27th, 2004, 06:30 PM
aahlookout aahlookout is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jan 2004
Posts: 9 aahlookout User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 18 sec
Reputation 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...
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > Netscape PC - CSS - Images chopped in half!

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 1 hosted by Hostway.