[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Paragraph formatting in Opera

Posted on 2011-10-22
10
Medium Priority
?
167 Views
Last Modified: 2012-05-12
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
0
Comment
Question by:ddantes
  • 5
  • 5
10 Comments
 
LVL 9

Accepted Solution

by:
darkapple earned 1000 total points
ID: 37012956
Can you add style="clear:both" to spry menus div element
0
 

Author Comment

by:ddantes
ID: 37013001
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
 

Author Comment

by:ddantes
ID: 37013035
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 9

Expert Comment

by:darkapple
ID: 37015176
thanks ddantes.
0
 

Author Comment

by:ddantes
ID: 37015258
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
 
LVL 9

Expert Comment

by:darkapple
ID: 37015288
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
 

Author Comment

by:ddantes
ID: 37015310
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
 
LVL 9

Expert Comment

by:darkapple
ID: 37015502
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
 

Author Comment

by:ddantes
ID: 37015521
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
 
LVL 9

Expert Comment

by:darkapple
ID: 37015602
thanks.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question