Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

safari mac question - my bottom border is gone

Status
Not open for further replies.

hugstable

Programmer
Feb 20, 2006
65
US
I am having some issues with my css padding in safari (have to go home and try it on my pc - eek)

pls visit:

and check out the page with the error

html code:
Code:
	<div id="main">
	<img src="_images/ground photo crane.jpg" width="567" height="378" class="centeredImage" />
	<P>
	Worksite Photos was started by photographer who wanted to offer construction companies in New York, New Jersey and Eastern 
	Pennsylvania photography services for both marketing and verification needs.  We are a full-time photography company, 
	staffed by professional photographers, using the very latest and sophisticated equipment on the market.
	</P>
	<P>
	Our photographic equipment includes 2 state of the art Canon digital SLR's (1DS Mark 2 as well as the 5D) and the Nikon 
	D2X and Fuji S2. All systems are utilized with the professional series of lenses from their respective manufacturers. 
	For aerial videos, we use our state-of-the-art 16-9 Panasonic SDX-900 camera. 
	</P>
	<P>
    Our in-house image processing and CD/DVD burning takes place on dedicated high-performance Mac G5 and iMac with enhanced 
	graphics capability, and our in-house printing is done via the Epson 9600 and Epson 4000. The Epson 9600 has the ability 
	to make prints up to 44 inches wide by 100 FEET long.
	</P>
	<P>
	Once the photos are processed, we offer our clients the ability to download them via our secure ftp server. We can also 
	ship you the images on CD or as prints with sizes up to 44 inches wide by 100 feet long! Our quick turnaround time will 
	help you meet your tight deadlines.  
	</P>
	<br />
	

	<div id="thumbHolderAerial">
	<h1>WE NOW OFFER CONSTRUCTION PROGRESS PHOTOS</h1>
		<div id="thumbHolderContentArea">
		<div align="center"><img src="_images/aerial photo construction progress.jpg" width="200" height="133" /></div>
		<br />
		Through our relationship	 with Aerial Photos of New Jersey, we can also provide you with custom aerial photography 
		of your job-site, to give you a one stop solution for all your imaging needs. Not only can we offer you stunning aerials 
		for your brochures but also progress photos for investor verification purposes. 
		</div>
	</div>


	<div align="right" id="thumbHolderGround">
	<h1>DO I NEED PHOTO DOCUMENTATION OF MY CURRENT PROJECT?</h1>
		<div id="thumbHolderContentArea">
		<div align="center"><img src="_images/ground photo interior.jpg" width="200" height="133" /></div>
		<br />
		Many banks and investment companies will require documentation of your progress from a third party source before they 
		release your monthly draw.  Guaranteeing  documentation of your future project can put your financing partner
		at ease and increase the chance of you getting your loan.
		</div>
	</div>
	<br />
	</div>

css code
Code:
#thumbHolderContentArea {
  background: #000000;
  text-align: justify;
  height:295px;
  font-size: 12px;
  color:#DEDEDE;
  padding: 5px 5px 5px 5px;

}

Code:
#thumbHolderAerial {  
  float:left;
  background: #0231C9;
  width: 250px;
  height: 340px;
  border-style: solid;
  border-color: #0231C9;
  border-width: 1px;
  padding:0;
  margin-left:5px;
}
 
forgot to add that it looks good in firefox and opera. The only reason i even checked safari is that my coworker uses it... i am not a big safari fan
 
Incidentally, have you tried scaling the font up a few sizes in Fx? I suspect your layout will totally break. Perhaps investigate using min-height instead of height (with a CSS / conditional comment workaround for IE).

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
doctype
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]

BillRay - thanks for the help with this - it disapears on internet explorer as well.... i will try the min height... This was supposed to be my first tableless designa and it is looking HORRIBLE
 
I FINALLY FIGURED THIS OUT - THIS IS AN OPERA ISSUE.

By defualt, Opera uses its own stylesheet... I think the font is smaller than normal. THIS MADE ME LOSE MY MIND over the past two weeks...

some of my elements are dynamic depending on font size, opera's small fonts where causing all my headaches.

to fix this make sure every "use my" option is unchecked.
PREF > ADVANCED > CONTENT > STYLE OPTIONS > PRESENTATION MODE

be wary of this...
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top