Jump to content

Resizing images in Firefox

thesi

By thesi
in CSS

Recommended Posts

thesi Newbie

thesi

Posted
Posted

I am currently working on re-making my companies website. The original version was set up using very little consideration for different sized browsers so anyone viewing at a higher resolution ended up getting a lot of dead space. I decided to start from scratch and make all the sizes based on percentages instead of fixed pixel sizes. So far it has been working great in Internet Explorer but in Firefox, the top banner is not resizing when the window is resized. I wanted to know if there is some way to fix this in css or html. Thanks in advance for any help. Below is the site, banner and css related to this problem.banner.png

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"><html>	<head>		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >		<link rel="stylesheet" type="text/css" href="style.css">		<title>Index - Osborne Lumber©</title>	</head>	<body>		<div class="banner"> <a href="http://www.osbornelumber.com"><img alt="Osborne Lumber Company" src="images/banner.png" width="95%"></a> </div>		<div class="sidebar"><br><strong class="big">Menu</strong><br><a href="index.html">Index</a><br><a href="company.html">Company</a><br><a href="gallery.html">Gallery</a><br><a href="recent.html">Recent Projects</a><br><a href="resouces.html">Resources</a><br><a href="links.html">Links</a><br><a href="contact.html">Contact Us</a><br><br>			<strong class="big">Products</strong><br><a href="decking.html" class="h_text">Decking</a><br><a href="engineered.html" class="h_text">Engineered Products</a><br><a href="environment.html" class="h_text">FSC / Environmentally Sound Lumber</a><br><a href="hardware.html" class="h_text">Hardware & Concrete Supplies</a><br><a href="lumber.html" class="h_text">Lumber</a><br><a href="mouldings.html" class="h_text">Mouldings</a><br><a href="plywood.html" class="h_text">Plywood / Sheet Goods</a><br><a href="siding.html" class="h_text">Siding</a><br><a href="treated.html" class="h_text">Treated</a><br><a href="windows.html" class="h_text">Windows</a><br><br></div>		<div class="center">			<strong class="big">Our hours are 7:00 am - 4:30 pm <u>Monday through Friday</u></strong><br>			We are not open on Saturday or Sunday.<br><br>			<strong class="big">Directions:</strong><br>			<b class="white">From the South Bay</b>:  Take 880 North. Exit Thornton Avenue and head west.			Go about 2 miles and turn left on Willow, then left on Enterprise.			We're on the right hand side. <br><br>			<b class="white">From the North Bay</b>: Take 880 South. Exit Thornton Avenue and head west.  			Go about 2 miles and turn left on Willow, then left on Enterprise.			We're on the right hand side.<br><br>			<b class="white">From the Penninsula</b>: Take 101 South to the Dumbarton Bridge (Marsh Rd. Exit).			Cross the bridge and exit Thornton Avenue and turn right.  Go about 			1 mile and turn right on Willow, then left on Enterprise.  We're 			on the right hand side.<br><br>			<b class="white">From the Valley</b>: Take 580 West to 880 South.  Exit Thornton Avenue and head west.			Go about 2 miles and turn left on Willow, then left on Enterprise. 			We're on the right hand side.<br><br> 			<a href="http://www.mapquest.com/directions/main.adp?src=maps&1sb=revise&2l=lsA%2fygEk8C073%2bZzAcfXZw%3d%3d&2g=H3crJ4ITlxCV0VEkQxDRLQ%3d%3d&2v=ADDRESS&2a=8100%20Enterprise%20Dr&2c=Newark&2s=CA&2z=94560&2y=US&2pn=Osborne%20Lumber%20Co%20Inc&2pl=510%2d793%2d3837&cat=&q=Osborne%20Lumber%20Company&qc=&2ffi=1" target="_blank">Map this!</a><br><br>			<br clear=all>		<br><div class="bottom"><a href="http://www.osbornelumber.com">www.OsborneLumber.Com</a> © 2005 • <a href="privacy.html">Privacy Policy</a> • <a href="terms.html">Terms Of Use</a><br>This web site is best viewed at 1024x768 resolution with Internet Explorer version 7.<br><br><br><a href="http://validator.w3.org/check?uri=www.osbornelumber.com/windows.html"><img src="images/valid-html401.png" alt="Valid HTML 4.01 Transitional" height="31" width="88"></a></div>		</div>	</body></html>

body {	background-color: #033502;	font-size:20px; 	margin-left: 15px; 	color: #DFC59E;}.invisible {	visibility:hidden;}.big{	color:#FFFFFF;	font-size:150%;}.bottom{		font-size:12px;	line-height:12px;	color:#FFFFFF;	text-align:center;}.top{	text-align:center;}.center{		position:absolute;	top:30%;	left:25.4%;	background-color:#333333;	width:74%;	text-align:center;	min-height:600px;	padding-top:30px;	border-style: groove;	border-color: #444444;	border-width: thin;}.banner{	position:absolute;	top:10px;	z-index:3;}.sidebar{	position:absolute;	top:30%;	left:1%;	background-color:black;	width:23%;	height:600px;	overflow: auto;	z-index:2;	font-weight:bold;	padding-left:1%;	padding-top:30px;	border-style: groove;	border-color: #222222;	border-width: thin;}div.img{	margin: 2px;	border: 1px solid #0000ff;	height: auto;	width: auto;	float: left;	text-align: center;}div.img img{	display: inline;	margin: 3px;	border: 1px solid #ffffff;}div.img a:hover img{	border: 1px solid #0000ff;}div.desc{	text-align: center;	font-weight: normal;	width: 120px;	margin: 2px;}a:link     {	color: #6666FF;}a:visited  {	color: #8800CC;}a:hover    {	color: #033502; 	background-color: #6666FF;}a:active   {	color: #FFFFFF;}

Link to comment
Share on other sites
S@m Member

S@m

Posted
Posted

You could probably create that entire banner in html and get rid of the image.What you could try is splitting up that image. Take the green bar out and put it in its own container with a green background.text-align:center the image so it stays centered in the page. Then do the same for the rest of the text.You can't exactly scale images on the fly like that. If you do, you risk distorting the image when it gets scaled up.In other words, it's a bad idea. :)

Link to comment
Share on other sites
thesi Newbie

thesi

Posted
  • Author
Posted

Thats actually a really good idea. I noticed it was getting a little distorted but I couldn't figure out how to get it done any better. Gotta try that out. Thanks!

Link to comment
Share on other sites
thesi Newbie

thesi

Posted
  • Author
Posted

Trying it out but I wanted to know if there was some way to change the size of the font as well on resizing. I want the site to have a nice sized banner no matter the size of the browser, but if needed I can always resort to a fixed size font and just hope the banner doesn't look too long on the sides or too small.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...