PDA

View Full Version : Named anchor problem


DynV
30 Jan 2009, 02:11 PM
There's a weird bug with named anchor which I'll describe in detail (screen shots will also follow) for posterity as the example page will most likely change : there's a header div followed by a main div containing a centered div with a right sidebar div floating on the left. In the content div there's the page description followed by a picture gallery including a full size image with some thumbnails on the side included in the div which the thumbnails are linked with it as a named anchor. The problem lies that when the named anchored is referred to (linked) it's pushed all the way up right next to the header div ; not only the content div but also the sidebar which I think is weird. I've tried setting margin-top higher than the header div just in case this case broke the normal flow of blocks (which its end sets the beginning of the following content) but whatever margin I set the behavior remained the same. I noted the behavior in FF2, FF3 & Safari 3.2.1 although IE6, IE7 & Opera 9.63 doesn't have the behavior as I'd like to end up with (as with IE).

This is the current site with might become in production, thus loosing the "/tmp", in a couple months http://manicaluminium.com/tmp/?q=8 and here are the screen shots taken with FF3 with the plugin WebDevelopper set with "Display Div order" : http://picasaweb.google.com/DynVec/Screenshots#5297165823586418402 and http://picasaweb.google.com/DynVec/Screenshots#5297165829681486930

Please note that it's my first time posting on this site and that I've searched the subject in vain prior to starting this new thread.
DynV
30 Jan 2009, 06:15 PM
I've recreated an example of the page but the problem doesn't occur in that simplified version. I'm really wondering what's causing it.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<title>anchor problem</title>
<style type="text/css">
<!--
.margin_merging_stopper {
height: 0;
margin: 0;
}

#header {
position: relative;
height: 5em;
background-color: lime;
}
#menu {
position: absolute;
right: 0px;
bottom: 0px;
background-color: aqua;
}

#main {
background-color: orange;
}
#sidebar {
float: left;
width: 5em;
background-color: green

}
#content {
background-color: yellow;
margin-left: 5em;
}

#gallery {
background-color: purple;
}
#thumbnails {
background-color: red;
float: right;
}
-->
</style>
</head>

<body>
<div id="header">
<h3>logo and intro</h3>

<div id="menu">
<ul>
<li>page 1</li>
<li>page 2</li>
<li>...</li>
</ul>
</div>
</div>

<div id="main">
<div id="sidebar">
<h3>links and misc</h3>
</div>

<div id="content">
<p class="margin_merging_stopper">&nbsp;</p>
<h3>useful information</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas est. Etiam non odio. Aenean feugiat ultricies turpis. Maecenas faucibus felis in pede. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed laoreet, risus non iaculis aliquet, augue est pharetra augue, in mollis dui nulla eget augue. Morbi sit amet magna ut nibh consectetur sodales. Nam gravida neque bibendum orci. Donec rutrum lacus nec neque. Fusce metus. Curabitur adipiscing malesuada felis. Integer sem augue, venenatis sed, faucibus non, vulputate ac, eros. Integer blandit felis non augue. Fusce arcu neque, sollicitudin et, consectetur nec, porta at, odio. Morbi vel lacus at ligula dignissim vehicula.</p>

<div id="gallery">
<div id="thumbnails">
<ul>
<li><a href="#gallery">thumbnail 1</a></li>
<li><a href="#gallery">thumbnail 2</a></li>
<li>...</li>
</ul>
</div>
<h3>image and thumbnails</h3>
<p>Curabitur dignissim fermentum dui. Suspendisse at neque id velit suscipit hendrerit. Vestibulum nisl neque, blandit at, egestas eget, malesuada a, mauris. Nunc consectetur mi quis nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam dictum, tellus vitae luctus vehicula, urna lacus euismod dui, eu dapibus felis nulla vitae odio. Suspendisse potenti. Fusce at magna. In sit amet mi sit amet odio condimentum dapibus. Nullam id dui. Suspendisse semper, leo non auctor adipiscing, nisi ipsum eleifend nulla, et pretium odio lorem at libero. Suspendisse pharetra. Morbi metus tellus, posuere ac, hendrerit a, ornare ut, magna. Donec pellentesque arcu vel diam euismod pretium. Phasellus at ipsum. Etiam lacinia, eros non ornare consequat, libero dolor elementum justo, at mollis urna libero vel orci. Duis ultrices. Duis luctus. </p>
</div>
<p>Sed condimentum. Nullam nulla dolor, feugiat vel, bibendum ut, luctus sed, risus.</p>
</div>
</div>
</body>
</html>