Jump to content
Killersites Community
Sign in to follow this  
Andrea

Positioning/Rendering Problem

Recommended Posts

I was trying to find a solution for another board member (http://www.killersites.com/community/index.php?/topic/6445-text-on-wrapper/page__pid__29079__st__20&do=findComment&comment=29079) and thought I had nailed what he was asking for. I worked out this page: http://aandbwebdesign.com/KSforum/everglades2.html which I tested in FX, IE9, Chrome, and my iphone, and it looked just fine.

 

This is what I see (the text box with the rounded corners moves into or away from the picture depending on resolution)

: everglades.jpg

 

But I hear that on some views (have no detail on browser), both the text box and the "Purchase Info" link are out of place. One friend looked on her iPhone and first, only the text box was astray, but the second time she looked, it was fine.

 

Since I can't see any of it and my code looks good (tom me) - what am I doing wrong here?

Share this post


Link to post
Share on other sites

I don't care about IE 5.5 - and the box will slide into the image if the resolution is less. I don't see that as a problem, so. But what I hear is that the text box appears in the top right corner, and of the "Purchase Info" line, I only hear it's 'out of place'.

 

I just have no idea why these elements appear out of whack, under what circumstances, and what I'd to fix it. Maybe I'm missing some dimensions - don't know but would love to figure this.

Share this post


Link to post
Share on other sites

Yes, but that expands the wrapper which is not the effect want - I want exactly what's showing on the image I posted, but don't understand why some people see things out of whack and what can be done to make my idea work. (assuming it's possible)

Share this post


Link to post
Share on other sites

Yes, but that expands the wrapper which is not the effect want - I want exactly what's showing on the image I posted, but don't understand why some people see things out of whack and what can be done to make my idea work. (assuming it's possible)

 

 

Ok Try this from what I tested it seems to work ok in firefox v6.02 although I'll leave it up to see if it works in other major browsers.

 

 

This will stop the floating text box from overlapping your image when you resize the browser window. Which I think is what

you want. everthing else should look the same. This shouldn't expand your wrapper I think.

 

 

first try to restructure your html move the #floater HTML DIV inside <div id="wrapper"></div>

 

like this:

 

<div id="wrapper">
<div id="header">
		<h2> Artistic nature photography</h2>
</div>

<ul id="navlist">  
		<li id="active"><a href="index.html">home</a></li> 
	<li><a href="aboutus2.html">about</a></li>
	<li><a href="gallery2.html">everglades</a></li> 
	<li><a href="islandlife.html">shorelines</a></li> 
	<li><a href="maninnature.html">man in nature</a></li>
	<li><a href="contact2.html">contact</a></li> 
	<li><a href="prints2.html">prints</a></li>
	</ul>

<div id="post"> 
	<div id="pic"><img width="720" height="479" src="http://www.waynewillison.com/laimages/lowhangingstorm.jpg" title="A storm brews over Barbados beach" alt="A storm brews over Barbados beach"> 
		<h3>storm brews over barbados beach</h3>
		<div class="picnav">
			<div class="arrownav"><a href="beach.html"><img src="http://www.waynewillison.com/laimages/rightarrow.jpg" alt=""></a>
			</div>
			<div class="arrownav2"><a href="lonewave.html"><img src="http://www.waynewillison.com/laimages/leftarrow.jpg" alt=""></a>
			</div>
		</div>
	</div>
<div id="floater">
	<p>a magical display of light and color appeared at sunset in the moments prior to a rain storm. in more northern climates it rains and the day becomes grey, but in this delightful place the rains go away sometimes as quickly as they began and the sky resumes its pleasant state</p>
</div>
		<p class="purchase"><a href="prints2.html">Purchase Info</a></p>
</div>

	<div id="footer"><p>© All material and copyright by Wayne Willison. All rights reserved.</p>
</div>
</div>

 

2. In css make the #post position relative like below

 

#post {
   position: relative;
}

 

3. change your css #floater to below

 

#floater {
   position: absolute;
   width: 150px;
   background: #1b1b1b;
   top: 100px;
   color: #C0C0C0;
   -moz-border-radius: 15px;
   border-radius: 15px;
   -webkit-border-radius: 15px;
   border: 2px solid #C0C0C0;
   right: -90px;
}

 

 

See if that works :)

Share this post


Link to post
Share on other sites

- and the box will slide into the image if the resolution is less. I don't see that as a problem,

But what I hear is that the text box appears in the top right corner, and of the "Purchase Info" line, I only hear it's 'out of place'.

I just have no idea why these elements appear out of whack, under what circumstances, and what I'd to fix it. Maybe I'm missing some dimensions - don't know but would love to figure this.

 

I did try your suggestion: http://www.aandbwebd...everglades3.htm - and it appears to work - thank you for your help - but so did my way: http://www.aandbwebd...verglades2.html

 

Since I never saw the box in the upper right corner or the "Purchase Info" line out of place to begin with, I can't be sure it this works for whoever saw my stuff out of whack - and I still don't understand what the problem with the code is/was, that I see things just fine in Fx, IE9, Chrome, Opera on 2 different computers and my iPHone 3 (OS5 - Safari), and some other people see things out of place.

 

Does anybody have any insights?

 

 

What makes it even stranger, one friend checked the site for me on her iphone, and it was out of whack. But when she checked it again later that day - I had NOT touched it all day - it displayed fine. Same iPhone - how the heck????

Share this post


Link to post
Share on other sites

Andrea, the client may have been caching an old css. I have run across this problem from time to time especially those with mobile units. If it's working now, don't sweat it. Encourage your clients to send screen shots of the problem.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×