Strange CSS Offset Problem...

[jmroberts70]

Reference Page:
http://www.bedofnails.tv/credits1.htm

I'm having a problem with getting the layout of a certain page to work over multiple browsers and I think I've traced it down to one little bit of code I have no understanding of: "OffsetTop". Using Firebug, here's the page as it was designed in Firefox:

Note that there is an element "OffsetTop" that has a 0-value and the page looks just fine.

Now here's the same page in Safari (renders the same in Chrome and IE)

You can see that the sub-menu bar is positioned lower and the OffsetTop element is at 26. This appears to be the amount of offset that my sub-menu bar has been moved. I've tried disabling all Javascript on the page (it looks like OffsetTop is a code element commonly used in Javascript) but that made no difference to the page layout. Any ideas as to what is causing this quirk?

 

[sql]

Hi jmroberts70,

You forgot to clear the float attribute you used for the <div> with the class right.

This is your code:

<div class="menu">
<div class="right">

<ul>
<li><a href="home.htm" class="menu">Home</a></li>
<li><a href="synopsis.htm" class="menu">Synopsis</a></li>
<li><a href="characters.htm" class="menu">Characters</a></li>
<li><a href="credits.htm" class="menu">Credits</a></li>
<li><a href="contact.htm" class="menu">Contact</a></li>
</ul>

</div>

</div>

and this is how it should look (bolded and underlines changes).

<div class="menu">
<div class="right">

<ul>
<li><a href="home.htm" class="menu">Home</a></li>
<li><a href="synopsis.htm" class="menu">Synopsis</a></li>
<li><a href="characters.htm" class="menu">Characters</a></li>
<li><a href="credits.htm" class="menu">Credits</a></li>
<li><a href="contact.htm" class="menu">Contact</a></li>
</ul>

</div>
[B][U]<div style="clear: right;"></div>[/U][/B] <!-- clears the float -->

</div>

 

[jmroberts70]

OMG!! I didn't know about that feature... Then again, I'm rather new to pure CSS coding on the web. Now I've got to go back and fix all the other pages that have this menu. Funny that the layout problem only showed up on this example. Still, this is an important lesson as I've had to deal with floating boxes in this project and being able to clear them may help me out quite a bit.

Thank you so much SQL!! --and welcome to the [H]!!

 

[sql]

OMG!! I didn't know about that feature... Then again, I'm rather new to pure CSS coding on the web. Now I've got to go back and fix all the other pages that have this menu. Funny that the layout problem only showed up on this example. Still, this is an important lesson as I've had to deal with floating boxes in this project and being able to clear them may help me out quite a bit.

Thank you so much SQL!! --and welcome to the [H]!!

Definitely clear anytime you float items. You were extremely lucky it only showed on this page and shouldn't rely on having this type of fortune often. Not clearing floated objects tends to lead to "broken" pages and strange results.

Thanks, jmroberts70, and I'm very excited to be here.