Originally Posted by
zafi
[...] notice that the position of div is not the same in FF as it's in IE .. what should i do to bring it to the same position.
As the markup stands, you can't. However, this may be a good opportunity to strip out some junk. I'll be using the Features 'row' as an example. Before I continue, I'd like to point out that Firefox's behaviour is correct, and IE is broken as usual.
Currently, you have (reformatted):
HTML Code:
<tr>
<td>
<img alt="" src="../images/index-new_19.gif" name="Image73"
width="198" height="24" style="cursor: hand"
onmouseover="chkDiv('Div1','block');MM_swapImage('Image73','','../images/rl_19.gif',1)"
onmouseout="chkDiv('Div1','none');MM_swapImgRestore()">
<div id="Div1" style="display:none; position: absolute;">
<table cellpadding=0 cellspacing=0 border=0>
<tr>
<td style="font-weight: bold; color: #7f1f00; background-color: #be9e56; border-right: 2px solid; border-top: 2px solid; border-left: 2px solid; border-bottom: 2px solid; border-color:#e0c27e;">
<br>
- Unique<br>
- Authentic<br>
- Northern Indian<br>
- Served in a warm and <br> relaxed setting<br>
<br>
</td>
</tr>
</table>
</div>
</td>
</tr>
There are several things to note about this snippet.
The first is that you've repeated the long style attribute eight times. That's a lot of redundancy. It would be better to define these properties in a style sheet once, then add them elements via the class attribute. I'll demonstrate that later.
The second, rather glaring observation, is that you have a nested table with one row and one cell that contains text that tries to act like a list. Why not just use a list? That would simplify the above to:
HTML Code:
<tr>
<td>
<img alt="" src="../images/index-new_19.gif" name="Image73"
width="198" height="24" style="cursor: hand"
onmouseover="chkDiv('Div1','block');MM_swapImage('Image73','','../images/rl_19.gif',1)"
onmouseout="chkDiv('Div1','none');MM_swapImgRestore()">
<ul>
<li>Unique</li>
<li>Authentic</li>
<li>Northern Indian</li>
<li>Served in a warm and relaxed setting</li>
</ul>
</td>
</tr>
We can now include what I mentioned earlier: a style sheet and class attribute. You would start by placing:
HTML Code:
<style type="text/css">
ul.pop-up,
ul.pop-up li {
margin: 0;
}
ul.pop-up {
background-color: #be9e56;
border: 2px solid #e0c27e;
color: #7f1f00;
font-weight: bold;
padding: 1ex; /* Space between border and content */
width: 10em; /* Use this to control wrapping, not BR elements. */
}
ul.pop-up li {
margin-left: 1em;
padding: 0;
}
</style>
in the head element of the document. If you add class="pop-up" to a ul element, like the one in the example above, you'll get a result much like what you have now. However, this doesn't solve the problem, but it does provide a better starting point.
What is happening is that when elements are given a position: absolute declaration, but they aren't actually positioned (no offset properties) they stay where they normally would be if you left the position property alone. As a div element is block-level, that means it will go on a 'line' below the image as you saw. What we need to do is force it onto the end of the same line. We can start by changing the second rule in the style sheet above to:
Code:
ul.pop-up {
background-color: #be9e56;
border: 2px solid #e0c27e;
color: #7f1f00;
font-weight: bold;
padding: 1ex; /* Space between border and content */
width: 10em; /* Use this to control wrapping, not BR elements. */
position: absolute;
left: 100%;
top: 0;
display: none; /* Hide by default */
}
Perhaps the most important declaration is setting the left property. A value of 100% places the list flush against the right-hand edge of its containing block. All we need to do now, is define what that block is, by setting position: relative on an element.
It would be nice to use the table cell that contains the image, but unfortunately we can't do that as setting the position property on table-related elements is undefined, so instead we'll have to introduce an element: a div will suffice.
HTML Code:
<tr>
<td>
<div style="position: relative">
<img alt="" src="../images/index-new_19.gif" name="Image73"
width="198" height="24" style="cursor: hand"
onmouseover="chkDiv('Div1','block');MM_swapImage('Image73','','../images/rl_19.gif',1)"
onmouseout="chkDiv('Div1','none');MM_swapImgRestore()">
<ul id="Div1" class="pop-up">
<li>Unique</li>
<li>Authentic</li>
<li>Northern Indian</li>
<li>Served in a warm and relaxed setting</li>
</ul>
</div>
</td>
</tr>
Everything will now work properly. Notice that the list now has the id attribute, and it is this that you would show and hide.
Mike
DIV do not appear in Firefox.. Help me.
Reply With Quote
, just one more thing i would like to ask is if you can please once again refer to the link 
Bookmarks