Paragraph formatting in Opera

I am working with the layout of a page which has a horizontal Spry MenuBar followed by a paragraph of text.  In Opera, the new paragraph starts on the same line as the MenuBar, which isn't the intention.  In all other browsers, the text begins on a new line below the menu.  I have tried <br>, which didn't help.  I also tried  <P>&nbsp;</P> but it required at least two of those to move the text below the menu.  With that approach, in other browsers, there is an unwanted gap below the menu.  Please advise how to force a line break in Opera. Screenshot of Opera with failed paragraph layout
ddantesAsked:
Who is Participating?
 
darkappleCommented:
Can you add style="clear:both" to spry menus div element
0
 
ddantesAuthor Commented:
Thank you for your comment.  In the html, the spry menu is a ul, not a div.  So I tried:
<ul class="MenuBarHorizontal" id="MenuBar1" style="clear:both"> and it did not change the appearance. I've attached the css file associated with the menu bar, and perhaps that will help you to guide my next step. RezMenuBar.css
0
 
ddantesAuthor Commented:
The paragraph formatting in Opera responded to adding "ovefflow:hidden;" to the stylesheet conrtolling the outermost portion of the menu bar.  I still would like to accept your answer, because I came upon the solution after you suggested "clear:both."
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
darkappleCommented:
thanks ddantes.
0
 
ddantesAuthor Commented:
You're most welcome.  BTW, would you mind tellng me exactly where to insert "clear:both" in the css for the Spry Menubar?  I tried adding it to ul.MenuBarHorizontal but I couldn't detect any change in the page format.  
0
 
darkappleCommented:
It would be much easier if you have the page hosted somewhere and I can access it. Because I don't get the structure of your html document.

Use clear:both to any floating div to clear its both sides.

Or, you can either test using display:block;

thanks.
0
 
ddantesAuthor Commented:
The page is hosted on our server, but you would have to go through a process of filling out forms to reach it.  Here is the html...

<blockquote>
    <center>    
     <ul class="MenuBarHorizontal" id="MenuBar1">
        <li>
          <div align="center"><a href="0001/ab0001.html" TARGET=MainFrame class=menubar>Welcome</a></div>
       </li>
         <li>
           <div align="center"><a href="0001/av0001.html" TARGET=MainFrame class=menubar>Availability</a></div>

          </li>
         <li>
           <div align="center"><a href="../rates.htm" TARGET=MainFrame class=menubar>Rates</a></div>
         </li>
         <li>
           <div align="center"><A HREF="booking_list.html" TARGET=MainFrame class=menubar>My Bookings</a></div>
         </li>
         </ul>
         </center>
         </blockquote>
0
 
darkappleCommented:
I don't understand why are you using blockquote?

I would rather surround with another div.

Try below code once.




<div id="menuBar" style="width:990px; margin:0 auto; clear:both;"> <!-- use your own choice of width -->
  <ul class="MenuBarHorizontal" id="MenuBar1">
        <li>
          <div align="center"><a href="0001/ab0001.html" TARGET=MainFrame class=menubar>Welcome</a></div>
       </li>
         <li>
           <div align="center"><a href="0001/av0001.html" TARGET=MainFrame class=menubar>Availability</a></div>

          </li>
         <li>
           <div align="center"><a href="../rates.htm" TARGET=MainFrame class=menubar>Rates</a></div>
         </li>
         <li>
           <div align="center"><A HREF="booking_list.html" TARGET=MainFrame class=menubar>My Bookings</a></div>
         </li>
         </ul>
</div>

Open in new window

0
 
ddantesAuthor Commented:
Thank you.  I tried it, but it didn't make any difference.  I don't want to put you through a lot of effort because I'm satisfied with the page layout when "overflow:hidden" is added to the css for the menubar.  I just wanted to test "clear:both" and I didn't know where to insert it in the css file.
0
 
darkappleCommented:
thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.