[Andrea]

I was trying to find a solution for another board member (http://www.killersit...__20#entry29079) and thought I had nailed what he was asking for. I worked out this page: http://aandbwebdesig...verglades2.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)
:

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?

[benjaminmorgan]

In IE6 the text box goes onto the image. And of course in ie 5.5 it goes to the left and the buttons are left too. other than that the other browsers looked fine.

[Andrea]

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.

[sbsmith]

have you tried placing the div#floater inside your div#wrapper?

[Andrea]

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)

[sbsmith]

Andrea, on 30 November 2011 - 01:16 AM, said:

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>&copy; 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

[Andrea]

Andrea, on 29 November 2011 - 06:26 PM, said:

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

Andrea, on 29 November 2011 - 06:26 PM, said:

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'.

Andrea, on 29 November 2011 - 06:26 PM, said:

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????

[Eddie]

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.