layout problem in IE only

snappy · #1 (**permalink**) Nov 16th, 2006, 09:32

www.wildside-creative.co.uk/reservetemplate.html

I have a page that displays fine in Firefox, Safari, IE on the mac. However on PC it loses its top banner in IE only (fine in Firefox).
Can anyone solve? Link above or code below

HTML: Select all

<body>
<div id='mainframe'>
<div id='container'>                              

<div id='maintextarea'>
<br />
<p><b>Small broad-leaved woodland on Afon Deri.</b><br /><br />
A small part of a larger wood, lying in a steep sided valley, a footpath runs through the site, travelling over the River Deri via a narrow footbridge.
<br /><br />For further information on this reserve,
<a href="Contact.html">email.</a> </p><hr />
<div id="sustranslink"><p><img src="imagesOct/NCN_logo_english.gif" alt="link to Sustrans route information" />To access a map of the reserve's exact location and nearby cycle routes, click on the NCN link>><br />provided by Sustrans</p><br /></div><a href="otherReserves.html">Other NWWT nature reserves >></a></div>  <!-- End of maintextarea -->

<!-- Right-hand panel content goes in here. -->
<div id='imagepanel'><br />
<img src="imagesOct/BPW.jpg" /><p class="caption"></p>
</div>
</div>  

<!-- End of container -->

<div id='dummy'>  <!-- Without this redundant div, IE looses its layout.-->

<!-- Footer content goes in here. -->

<div id='reservefooter'>

<p></p> 
</div>

<!-- Header content goes in here. -->
<div id='reserveheader'><p><img src="imagesOct/NWWTlogo.gif" alt="NWWT logo" /></p>
<p  class="pagetitles"><b>North Wales Wildlife Trust</b><br />Nature Reserve</p><br /><p class="pagesubtitles">Three Cornered Meadow
SJ 402 581 (13 acres)<br />permit required to access</p>
</div>

</div>  <!-- End of mainframe. -->

</div>
</body>

Code: Select all

#reserveheader { width: 758px;  /* Always 2px less than #mainframe */
background-color: #bbccaa;
height:105px;
position: absolute;  /* DO NOT CHANGE */ 
margin-top: 0px;
top: 0; left: 0;
padding: 10px;  } 

#reserveheader img{
width:80px;
margin: 0px 20px 0px 0px;
float: right;
}

ieonly.css

Code: Select all

#reserveheader {width: 100%;}

ukgeoff · #2 (**permalink**) Nov 16th, 2006, 16:33

Check your opening and closing divs from the footer dummy down. I think you will find you have one in the wrong place.

snappy · #3 (**permalink**) Nov 16th, 2006, 18:13

Hi Geoff,
You're right of course. I had a missing /div.
I feel suitably embarassed.
Thankyou v.v.much
Snappy

moojoo · #4 (**permalink**) Nov 17th, 2006, 00:11

It happens man, it happens. My favorite is doing something stupid like forgetting to link my style sheet and wondering why it won't work. Oh yeah, I did that!

Ryan Fait · #5 (**permalink**) Nov 17th, 2006, 09:39

Quote:

Originally Posted by moojoo

It happens man, it happens. My favorite is doing something stupid like forgetting to link my style sheet and wondering why it won't work. Oh yeah, I did that!

Ahahahahahaha!

I've done something similar, mainly because of Transmit. Once in a while I rename a file but continue to edit the open skEdit file. When it saves it via Transmit, it creates the file I renamed, so no changes are reflected on the web.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS layout problem in FF	benracer	Web Page Design	4	Mar 28th, 2008 16:30
CSS Layout Problem	AlexDS	Web Page Design	7	Aug 14th, 2007 10:48
layout problem	samv	Web Page Design	21	Feb 17th, 2007 10:21
Problem with Layout	dg81	Web Page Design	3	Jan 15th, 2007 03:31
layout problem	bean_2k1	Web Page Design	3	Sep 13th, 2006 02:53

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
layout problem in IE only