Back To Website Design Forum

Content og page overlaps menu in Safari

  • uhdq783
  • Born
  • Born
  • No Avatar
  • Joined: Feb 05, 2013
  • Posts: 2
  • Status: Offline

Post February 5th, 2013, 9:38 am

Content overlaps menu on the top of page in Safari. It looks good in Firefox end IE8. Page is karea dot no. How can I fix that?
Joomla Template 38687 on Joomla 2.5.1

Thanks
Slavomir
Attachments:
karea.jpg
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post February 5th, 2013, 9:38 am

  • ScottG
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Jul 06, 2010
  • Posts: 261
  • Status: Offline

Post February 5th, 2013, 11:38 am

I can't be certain but there is something odd going on I'm not sure what but in the inspector i have for Firefox there appears to be positioning issue.

See the picture and notice the bounding boxes. it show's that there is some positioning issues going on in your css because in the html the menu is not in the the div for the content. I made a shorten html example for you code below
HTML Code: [ Select ]
<!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" xml:lang="nb-no" lang="nb-no" >
<head>
<title>Hjem</title>
</head>
<body  class="cssstyle-style1 menu-type-fusionmenu col12" id="all">
<div id="rt-iewarn">
    <div class="rt-container">
        <div class="clear"></div>
    </div>
</div>
 
<div class="container homepage">    
   
    <!-- Your Menu sits right here in this block -->            
   
    <div class="header-content">            
        <div class="header-inner">
            <div id="rt-top" >
                <div class="rt-container">
                    <div class="rt-grid-9 rt-alpha">
                        <div class="rt-block">
                            <a href="/" id="rt-logo"></a>
                        </div>
                    </div>
                    <div class="rt-grid-3 rt-omega">
                        <div class="rt-block">
                            <div class="custom">
                                <p><a class="logginn" href="/index.php/samfunn/logg-inn">Logg inn</a></p>
                            </div>
                        </div>
                        <div class="rt-block">
                            <form action="/index.php" method="post">
                            <div class="mod_search ">
                                {FORM}
                            </div>
                            </form>
                        </div>      
                    </div>
                    <div class="clear"></div>
                </div>
            </div>                        
            <div id="rt-header">
                <div class="rt-container">
                    <div class="rt-grid-12 rt-alpha rt-omega">
                        <div class="rt-fusionmenu">
                            <div class="nopill">
                                <div class="rt-menubar">
                                    <ul class="menutop level1">
                                        {MENU ITEMS}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>                
    </div>
    <div id="rt-showcase">
        <div class="rt-container homepage">
            <div class="rt-grid-8 rt-alpha">
                <div class="rt-block">
                    <div style="clear: both;"></div>
                    <div id="mod_btslideshow_272" class="box_skitter mod_btslideshow" style="width:620px; height:400px;margin:0 auto;">
                        {SLIDE SHOW}
                    </div>
                    <div style="clear: both;"></div>
                </div>
            </div>
            <div class="rt-grid-4 rt-omega">
                <div class="rt-block">
                    <div id="k2ModuleBox248" class="k2ItemsBlock">
                          {NEWS BLOCK}
                    </div>
                </div>    
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>
</body>
</html>
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nb-no" lang="nb-no" >
  3. <head>
  4. <title>Hjem</title>
  5. </head>
  6. <body  class="cssstyle-style1 menu-type-fusionmenu col12" id="all">
  7. <div id="rt-iewarn">
  8.     <div class="rt-container">
  9.         <div class="clear"></div>
  10.     </div>
  11. </div>
  12.  
  13. <div class="container homepage">    
  14.    
  15.     <!-- Your Menu sits right here in this block -->            
  16.    
  17.     <div class="header-content">            
  18.         <div class="header-inner">
  19.             <div id="rt-top" >
  20.                 <div class="rt-container">
  21.                     <div class="rt-grid-9 rt-alpha">
  22.                         <div class="rt-block">
  23.                             <a href="/" id="rt-logo"></a>
  24.                         </div>
  25.                     </div>
  26.                     <div class="rt-grid-3 rt-omega">
  27.                         <div class="rt-block">
  28.                             <div class="custom">
  29.                                 <p><a class="logginn" href="/index.php/samfunn/logg-inn">Logg inn</a></p>
  30.                             </div>
  31.                         </div>
  32.                         <div class="rt-block">
  33.                             <form action="/index.php" method="post">
  34.                             <div class="mod_search ">
  35.                                 {FORM}
  36.                             </div>
  37.                             </form>
  38.                         </div>      
  39.                     </div>
  40.                     <div class="clear"></div>
  41.                 </div>
  42.             </div>                        
  43.             <div id="rt-header">
  44.                 <div class="rt-container">
  45.                     <div class="rt-grid-12 rt-alpha rt-omega">
  46.                         <div class="rt-fusionmenu">
  47.                             <div class="nopill">
  48.                                 <div class="rt-menubar">
  49.                                     <ul class="menutop level1">
  50.                                         {MENU ITEMS}
  51.                                     </ul>
  52.                                 </div>
  53.                             </div>
  54.                         </div>
  55.                     </div>
  56.                     <div class="clear"></div>
  57.                 </div>
  58.             </div>
  59.         </div>                
  60.     </div>
  61.     <div id="rt-showcase">
  62.         <div class="rt-container homepage">
  63.             <div class="rt-grid-8 rt-alpha">
  64.                 <div class="rt-block">
  65.                     <div style="clear: both;"></div>
  66.                     <div id="mod_btslideshow_272" class="box_skitter mod_btslideshow" style="width:620px; height:400px;margin:0 auto;">
  67.                         {SLIDE SHOW}
  68.                     </div>
  69.                     <div style="clear: both;"></div>
  70.                 </div>
  71.             </div>
  72.             <div class="rt-grid-4 rt-omega">
  73.                 <div class="rt-block">
  74.                     <div id="k2ModuleBox248" class="k2ItemsBlock">
  75.                           {NEWS BLOCK}
  76.                     </div>
  77.                 </div>    
  78.             </div>
  79.             <div class="clear"></div>
  80.         </div>
  81.     </div>
  82. </div>
  83. </body>
  84. </html>
  85.  

Even though the header-content div includes the menu div it is not taking the height on the menu div into it. safari report the div to be 138px. when the blue area is about 180px via photoshop crop. In safari I was able to force a fix by forcing the height of the header-content div by changing this <div class="header-content"> to <div class="header-content" style="height:180px;">. you can play with the height variable

It's a temp fix until the correct solution can show up.
Attachments:
inspect.jpg
  • uhdq783
  • Born
  • Born
  • No Avatar
  • Joined: Feb 05, 2013
  • Posts: 2
  • Status: Offline

Post February 5th, 2013, 11:54 am

Hello
Thanks a lot. Put it in css and it worked:
/*=== Top Positions ===*/

.header-content {
background: url(../images/template/header.jpg) center top repeat; height:180px;
}
.header-inner {
background: url(../images/template/header-shadow.jpg) center top no-repeat;
height: 138px;
}

Slavomir
  • ScottG
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Jul 06, 2010
  • Posts: 261
  • Status: Offline

Post February 5th, 2013, 12:08 pm

your welcome

Page 1 of 1

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 129 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.