PDA

View Full Version : Absolute positioning


WotNow
09-18-2009, 01:36 AM
Hi all, wondered whether you could help me here. I have an absolute positioned image on this page and in safari its in one position, firefox another and internet explorer still another. Also in internet explorer the purple background escapes the fieldsets. I have tried applying the purple background to all the individual fieldsets as opposed to the generic fieldset tag but it makes no difference.

I am going mad trying to fix this as client has internet explorer and it looks terrible.

Really appreciate any help thanks!

http://www.denisewalkerart.com/contact.html

DWcourse
09-18-2009, 02:02 AM
I don't see an obvious solution.

Have you tried using float right to position the image>

Or absolute positioning but using bottom and right (rather than top and left) for location?

WotNow
09-18-2009, 02:37 AM
Hi Have floated image to the right and now looks good in ie and safari but not firefox, grrr. It is the purple background on the fieldsets that is leaking out which is truly driving me nuts. Thanks for replying.

DWcourse
09-18-2009, 03:29 AM
try placing a <br style="clear: right" /> before you close the fieldset.

coloeagle
09-18-2009, 04:31 AM
ahhhg, played with this for 2+ hours, think I may have it your background issue solved.

Try these new rules out.


fieldset {
background:#5d5cc2;;
width: 900px;
position: relative;
line-height: 1.5;
}

fieldset#OurInfo{
background:#5d5cc2;;
width: 900px;
position: relative;
line-height: 1.5;
}

fieldset#Contact {
background:#5d5cc2;;
width: 900px;
position: relative;
line-height: 1.5;
}

fieldset#PersonalInfo {
background:#5d5cc2;;
width: 900px;
position: relative;
line-height: 1.5;
}

/* IE6 fix */
* html legend.ourlegend {
float:left;
line-height:2em;
position:relative;
margin-top:-2.5em;
}

* html legend.orderlegend {
float:left;
line-height:2em;
position:relative;
margin-top:-2.5em;
}

* html legend.perlegend {
float:left;
line-height:2em;
position:relative;
margin-top:-2.5em;
}

* html div.clearfieldset {height:50px;} /* uses the div to get the spacing at the end of the fieldset */
/* End IE6 Fix */


/* IE7 fix */

*:first-child+html legend.ourlegend {
float:left;
line-height:2em;
position:relative;
margin-top:-2.5em;
}

*:first-child+html legend.orderlegend {
float:left;
line-height:2em;
position:relative;
margin-top:-2.5em;
}

*:first-child+html legend.perlegend {
float:left;
line-height:2em;
position:relative;
margin-top:-2.5em;
}

*:first-child+html div.clearfieldset {height:50px;} /* uses the div to get the spacing at the end of the fieldset */
/* End IE7 Fix */

/* Good browsers will follow these settings */

legend.orderlegend {
background:#f45607;
font:bold .8em Verdana, Arial, Helvetica, sans-serif;
margin:2em 0 1em 1em;
padding:1em 2em;
border: 1px solid #fff;
}

legend.perlegend {
background:#f45607;
font:bold .8em Verdana, Arial, Helvetica, sans-serif;
margin:2em 0 1em 1em;
padding:1em 2em;
border: 1px solid #fff;
}

legend.ourlegend {
background:#f45607;
font:bold .8em Verdana, Arial, Helvetica, sans-serif;
margin:2em 0 1em 1em;
padding:1em 2em;
border: 1px solid #fff;
}
You will then need to add a div into the html to compensate for the negative margins. This div only needs to be used by IE. I've named it clearfieldset.

<div class="clearfieldset"></div>
Add this div right after the opening of div id="BookingForm" and after each closing fieldset tag.

WotNow
09-18-2009, 06:57 AM
Wow!!!! U r truly awesome, I cant believe you spent that long trying to solve this issue for me, wot can i say, THANKS!!!!

U r gonna shake your head and curse me cos I have studied your code and its over my head in the skill range. I have placed the clear div after bookings but not sure about placing it around the fieldsets.

Would it go something like this

<div id="BookingForm">
<div class="clearfieldset">

<form id=blah blah blah


<fieldset id="PersonalInfo">
<div class="clearfieldset">
blah blah blah
</fieldset>
</div>(end of clear div)

<fieldset id="Contact">
<div class="clearfieldset">
blah blah blah
</fieldset>
</div>(end of clear div)

<fieldset id="OurInfo">
<div class="clearfieldset">
blah blah blah
</fieldset>
</div>(end of clear div)

</form>
</div><!--end of Form-->
</div><!--end of clear-->

Thanks once again! I cant believe u did that for me!

coloeagle
09-18-2009, 01:11 PM
no, place the open and closing tag after each div.

<div id="BookingForm">
<div class="clearfieldset"></div>

</fieldset>
<div class="clearfieldset"></div>

Your welcome

coloeagle
09-18-2009, 01:52 PM
Quick description of what I done for the final outcome.

The good browsers didn't need a lot just a little tweaking to insure consistency.

* html legend.??? is read by IE6 only.
*:first-child+html legend.??? is read by IE7 only.

Floated the legend and position relative to have it properly positioned
The line-height is needed to keep the legend visible.
The negative top margin is needed to bring the fieldset background down out of view.

The additional div is needed only for IE to compensate for the negative top margin so that the legend does not display on top of the div/info above it.

WotNow
09-19-2009, 02:05 AM
Hi! I have been over and over your code and hoped I was just adding the bits I had in my css to make it look the same. Obviously I have done something wrong as although it displays correctly in firefox and safari..the purple still bleeds out in internet explorer.

Sorry to bother you so much but I sooo want to fix this and you already have put so much work into it. I cant tell you how much I appreciate it. THANKS!!!

http://www.denisewalkerart.com/contact.html

coloeagle
09-19-2009, 05:29 AM
OK, for the sake of time. Yah cheating some by doing this :-D
Here is all of your css as I have it.

body {
width:900px;
margin:0 auto;
padding:0;
background:#000;
}

#Navigation {
padding: 0;
margin: 0 auto;
text-align:center;
}

#navlist{
padding: 1em 0;
margin: 0 auto;
font: .7em Verdana, Arial, Helvetica, sans-serif
}

#navlist li{
list-style: none;
margin: 0;
display: inline;
}

#navlist li a{
color: #4dc9ef;
padding: .2em 0.6em;
text-decoration: none;
border-right: 2px solid #4dc9ef;
}

#navlist li a:hover{
color: #5d5cc2;
}

#navlist li a#current{
color: #fa5d07;
}

#header img{
margin:2em 0 0 1em;
padding:0 0 0 0;
border:none;
}

/*Form Styles*/

.submit {
margin:1em 0 0 2em;
padding:0;
}

input.text {
width:200px;
margin:0 0 .2em 1em;
padding: 0;
}

input.text:focus, textarea:focus {
background: #e9e9e1;
margin:.5em 0 .5em 1em;
padding: 0;
}

textarea {
width:250px;
margin-top: .4em;
}

label.top {
display:block;
margin-bottom:.5em;
padding:1em 0 0 0;
font:.9em Verdana, Arial, Helvetica, sans-serif;
}

.required {
position:relative;
}

span.required {
position:absolute;
left: 300px;
padding-left: 35px;
background:url(images/Contact/Splat.gif) no-repeat left center;
/*color:#000;*/
height:30px;
line-height:30px;
}

label {
margin:2em .4em 0 0;
font:1em Verdana, Arial, Helvetica, sans-serif;
padding:0;
}

#ContactForm {
margin:1em auto;
padding:2em 3em 3em 3em;
}

#ContactForm img {
margin:0;
padding:0;
border:none;
}

fieldset {
background:#5d5cc2;;
width: 900px;
position: relative;
line-height: 1.5;
}

fieldset#OurInfo{
background:#5d5cc2;;
width: 900px;
position: relative;
line-height: 1.5;
}

fieldset#Contact {
background:#5d5cc2;;
width: 900px;
position: relative;
line-height: 1.5;
}

fieldset#PersonalInfo {
background:#5d5cc2;;
width: 900px;
position: relative;
line-height: 1.5;
}

fieldset#OurInfo p {
display:block;
margin-bottom:.5em;
font:.8em Verdana, Arial, Helvetica, sans-serif;
margin:0 0 0 0;
padding:1em 0 0 2em;
width:420px;
}

fieldset#OurInfo h2{
font:bold .9em Verdana, Arial, Helvetica, sans-serif;
margin:0 0 0 0;
padding:2em 0 0 2em;
}

fieldset#PersonalInfo img{
float:right;
/* position:absolute;*/
height: 250px;
/*right:50px;*/
/*bottom:100px;*/
border:none;
margin:2em 2em 0 0;
padding:0 0 2em 0;
}

fieldset#PersonalInfo p {
display:block;
font:.8em Verdana, Arial, Helvetica, sans-serif;
margin:1em 0 0 0;
padding:0 0 1.5em 1.5em;
}

/* IE6 fix for Fieldset background overflow */
* html legend.ourlegend {
float:left;
line-height:2em;
position:relative;
margin-top:-2.5em;
}

* html legend.orderlegend {
float:left;
line-height:2em;
position:relative;
margin-top:-2.5em;
}

* html legend.perlegend {
float:left;
line-height:2em;
position:relative;
margin-top:-2.5em;
}
* html div.clearfieldset {height:50px;} /* uses the div to compensate for the negative top margin */
/* End IE6 Fix */


/* IE7 fix for Fieldset background overflow */

*:first-child+html legend.ourlegend {
float:left;
line-height:2em;
position:relative;
margin-top:-2.5em;
}

*:first-child+html legend.orderlegend {
float:left;
line-height:2em;
position:relative;
margin-top:-2.5em;
}
*:first-child+html legend.perlegend {
float:left;
line-height:2em;
position:relative;
margin-top:-2.5em;
}
*:first-child+html div.clearfieldset {height:50px;} /* uses the div to compensate for the negative top margin */
/* End IE7 Fix */

/*Good browsers will follow these settings */

legend.orderlegend {
background:#f45607;
font:bold .8em Verdana, Arial, Helvetica, sans-serif;
margin:2em 0 1em 1em;
padding:1em 2em 1em 2em;
border: 1px solid #fff;
}

legend.perlegend {
background:#f45607;
font:bold .8em Verdana, Arial, Helvetica, sans-serif;
margin:2em 0 1em 1em;
padding:1em 2em 1em 2em;
border: 1px solid #fff;
}

legend.ourlegend {
background:#f45607;
font:bold .8em Verdana, Arial, Helvetica, sans-serif;
margin:2em 0 1em 1em;
padding:1em 2em 1em 2em;
border: 1px solid #fff;
}

#formQuest1 {
float:right;
width:450px;
margin:0;
padding:0 0 2em 0;
}

#formQuest1 p{
margin:2em 0 0 0;
padding:0 2em .5em 1em;
font:.8em Verdana, Arial, Helvetica, sans-serif;
}

#formQuest2 {
width:450px;
margin:0;
padding:0;
float:left;
}

#formQuest2 p{
display:block;
margin-bottom:.5em;
padding:0 0 0 1em;
font:.9em Verdana, Arial, Helvetica, sans-serif;
}

#GoogleMap {
float:right;
width:344px;
margin:0;
padding:0 0 0 0;
}

#GoogleMap a{
font: .9em Verdana, Arial, Helvetica, sans-serif;
margin:0;
padding: .6em 0 0 0;
color:#fff;
}

#GoogleMap p {
font: .7em Verdana, Arial, Helvetica, sans-serif;
margin:0;
padding: .6em 0 0 0;
}

#Footer {
width:900px;
margin: 0 auto;
}

#Footer p {
font: .9em Arial, Helvetica, sans-serif;
color:#fff;
text-align:center;
font-variant: small-caps;
padding: 20px 0 10px 0;
}

#Footer a {
color:#fff;
}

Here is the html as I have it from #bookingform through the end of the page.

<div id="BookingForm">
<div class="clearfieldset"></div>
<form id="Contact" name="Contact" method="post" action="http://www.westnet.com.au/scripts/formmail/formmail.asp">
<INPUT type="hidden" name="recipient" value="info@denisewalkerart.com">
<INPUT type="hidden" name="redirect" value="http://www.denisewalkerart.com/index.html">
<fieldset id="PersonalInfo">
<legend class="perlegend">Your Details</legend>
<img src="images/Contact/staircase.jpg" alt="Stunning painting of Broome Staircase Phenomenonn" />
<p><label for="FirstName">First Name:</label>
<input name="FirstName" type="text" class="text" id="FirstName" tabindex="10" /></p>
<p><label for="LastName">Last Name:</label>
<input name="LastName" type="text" class="text" id="LastName" tabindex="20" /></p>
<p class="required"><label for="Email">Email:<span class="required">email is required</span></label>
<input name="Email" type="text" class="text" id="Email" tabindex="30" /></p>
<p><label for="PhoneNumber">Contact Number:</label>
<input name="TelNum" type="text" class="text" id="TelNum" tabindex="40" /></p>
</fieldset>
<div class="clearfieldset"></div>
<fieldset id="Contact">
<legend class="orderlegend">Orders</legend>
<div id="formQuest1">
<p><label for="order" class="top">Which product are you interested in?</label>
<select id="order" name="order" >
<option value="Cards" >Cards</option>
<option value="PapPrints" >Prints on Paper</option>
<option value="CanPrints" >Prints on Canvas</option>
<option value="Bookmarks" >Bookmarks</option>
<option value="Orig" selected="selected" >Original Painting</option>
</select></p>
<p>Our prints are available in many different sizes, please advise the size you are interested in by way of our comment box and we will get back to you with the price.</p>
<p><label for="HearAbout" class="top">How did you hear about us?</label>
<select id="hear" name="hear" >
<option value="Internet" >Internet</option>
<option value="Markets" >Broome Markets</option>
<option value="Other" >Other</option>
<option value="Brochure" >Tourist Brochure</option>
<option value="Mouth" >Word of mouth</option>
<option value="Exhibition" >At an exhibition</option>
<option value="Gallery" selected="selected" >Our Gallery</option>
</select></p>
</div><!--end of formQuest1-->
<div id="formQuest2">
<p><label for="Comments" class="top">Comments:</label>
<textarea name="Comments" rows="6" id="Comments" tab index="50"></textarea></p>
<label for="Submit"></label>
<label for="Submit"></label>
<input name="Send" type="submit" class="submit" id="send" value="Send" />
<label for="button"></label>
<input name="Reset" type="reset" class="submit" id="button" value="Reset" />
</div><!--end of formQuest2-->
</fieldset>
<div class="clearfieldset"></div>
<fieldset id="OurInfo">
<legend class="ourlegend">Our Details</legend>
<div id="GoogleMap">
<iframe width="325" height="252" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;source=embed&amp;msa=0&amp;msid=103686162 492570265725.000473adbdea84f968cb8&amp;ll=-17.958894,122.234144&amp;spn=0.020576,0.027895&amp;z=14&amp;ou tput=embed"></iframe><br /><!--<small>--><p>View <a href="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;source=embed&amp;msa=0&amp;msid=103686162 492570265725.000473adbdea84f968cb8&amp;ll=-17.958894,122.234144&amp;spn=0.020576,0.027895&amp;z=14" style="color:#fff;text-align:left">Denise Walker Art Gallery</a> in a larger map<!--</small>--></p></div>
<p>Email:&nbsp; info@denisewalkerart.com</p>
<p>Postal Address: &nbsp;PO Box 1204,</p>
<p>Broome Western Australia 6725</p>
<p>Mobile: &nbsp;+61 (0)409 981 210</p>
<h2>Our Gallery:</h2>
<p>21 Dampier Terrace, Broome Western Australia</p>
<p>Phone: &nbsp;(08) 91 922 838</p>
<p>Open everyday 10am to 5pm</p>
</fieldset>
</form>
</div><!--end of Form-->
<div id="Footer">
<p>&copy;Copyright 2009 &nbsp;&nbsp;&nbsp;<a href="http://www.kimberleywebdesign.com.au" title="link to kimberley web design" target="_parent">Kimberley Web Design</a></p>
</div><!--end of Footer-->
</body>
</html>
What you may want to do is to copy and paste what I have here into another page so you can compare the two.

I've also sent you a pm

coloeagle
09-20-2009, 04:14 PM
Just looked at your page. Looking good.

You need to remove the extra close body and close html tags.

WotNow
09-20-2009, 10:01 PM
Thanks to you! Have removed the extra tags.