14 Replies Latest reply: Feb 20, 2013 10:41 AM by Roddy
Barbarossanautica Level 1 Level 1 (0 points)

In the page I'm creating with iWeb I'm having problems of size with the css menu, the padding-left and padding-bottom show different sizes in Firefox than in Safari or iWeb. I've heard that a reset css code has to be used, the code I want to use is: * { margin: 0; padding: 0; }, but I'm a newby and don't know where has to be inserted, in the html of the page? in the css menu code? in the index.html file?

 

I didn't find any detailed explanation, everybody says it ghas to be ineserted but not how or where.

 

Can anybody give me a hand?

 

Thanks

  • 1. Re: Insert css reset
    Wyodor Level 6 Level 6 (19,375 points)

    You mean this menu :

     

    https://discussions.apple.com/message/21244692#21244692

     

    Insert the code at the beginning of the <style type="text/css">

     

    And ask yourself why the body margin is 30px.

  • 2. Re: Insert css reset
    Barbarossanautica Level 1 Level 1 (0 points)

    Hi Wyodor, I did tried two systems in the old "discussion", one at the begine with the css3menu, that I didn't use at last 'cause the blocking problem and then other that I found to be more simple, now the new problem, is that the padding-right and the padding-bottom got change when open the menu in Firefox. It becames longer and deeper of what it was in iWeb and in Safari. I tried many different thing editing the code with coda, when I use a small body margin the last link appear as the background (greyed) when I use a 30px then the menu appears complete but bigger and fatter, I also have tried inserting the reset css here:

     

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Apple Menu In CSS3 Only</title>

    <style type="text/css">* {

    margin: 0;

    padding: 0;

    }

    body {

         background: transparent;

         margin: 30px;

         padding: 0px;

    ............................

     

    But it didn't worked, what I get is:

    iWeb.png

    Above the right corner in iWeb

     

    Safari.png

    Above the same corner in Safari, the menu is in it's place. And the slide is working

    Firefox.png

    Above the problem, in Firefox the menu is too long and the bottom has grow. In the left side the width is OK but is also too much bottom. So I found than Firefox reads the codes differently.

    This is after using the reset code after the style css. So I think or the reset isn't working and if it works the problem is something else.

     

    Thanks for you patience

  • 3. Re: Insert css reset
    Wyodor Level 6 Level 6 (19,375 points)

    I looked at your website with Safari, Firefox, Opera, Chrome, SeaMonkey and all pages look the same.

     

    And I did not find the code you refer to.

     

    Perhaps it's best to not mess around with the code.

     

    And why not create a single menu file and display it with an <iframe>. Saves time when updating the menu.

  • 4. Re: Insert css reset
    Barbarossanautica Level 1 Level 1 (0 points)

    I did't uploaded yet, I'm making the proves in the box.

    Actually the code is:

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Apple Menu In CSS3 Only</title>

    <style type="text/css">

    * { margin: 0; padding: 0; }

     

    body {

         background: transparent;

         margin: 30px;

         padding: 0px;

    }

    #menu     {

         float: left;

         margin: 0px;

        

             

         /* Box Shadow */

         box-shadow: 0 0px 0 #000;

         -moz-box-shadow: 0 0px 0 #000;

         -webkit-box-shadow: 0 0px 0 #000;

         

         /* Rounded Corners */

         -moz-border-top-left-radius: 5px;

         -moz-border-bottom-left-radius: 5px;

         -webkit-border-top-left-radius: 5px;

         -webkit-border-bottom-left-radius: 5px;

         border-top-left-radius: 5px;

         border-bottom-left-radius: 5px;     

         /* Rounded Corners */

        -moz-border-top-right-radius: 5px;

        -moz-border-bottom-right-radius: 5px;

        -webkit-border-top-right-radius: 5px;

        -webkit-border-bottom-right-radius: 5px;

        border-top-right-radius: 5px;

        border-bottom-right-radius: 5px;

    }

    #menu ul  {

         padding: 0;

         margin: 0;

         float: left;

     

         

         /* Background Gradient */

         background-color: gray;

         background-image: none;

        background-image: url(none);

    }

    #menu li  {

         border-spacing: 0px 0px;

         margin: 1px;

         float: left;

         list-style: none;

         background: none;

         text-align: center;

    }

    #menu a { border-spacing: 0px 0px; outline: none; }

    #menu li a:link, #menu li a:visited {

         background-color: white;

                                

         border-spacing: 0px 0px;

                                

         padding-left: 16px;

         padding-bottom: 5px;

         padding-right: 15px;

         padding-top: 5px;

         font-family: "Verdana", "Trebuchet MS", sans-serif;

         font-size: 14px;

         font-weight: normal;

         display: block;

         color: black;

         text-decoration: none;

         text-transform:none;

         

         /* CSS3 Text Shadow */ 

         text-shadow: 0px 0px 0px;

         

         /* CSS3 Background Gradient */

         background-color: #e6e6e6;   

         }

    #menu li a:hover    {

         background-color: white;

                                

         cursor: pointer;

         color: white;

         text-shadow: 0px 0px 0px;

         

         /* Background Gradient */

         background-color: #ffac04;

        background-image: none;

        background-image: url(none);

    }

    #menu li:first-child a, #menu ul {

         /* Rounded Corners */

         -moz-border-top-left-radius: 5px;

         -moz-border-bottom-left-radius: 5px;

         -webkit-border-top-left-radius: 5px;

         -webkit-border-bottom-left-radius: 5px;

         border-top-left-radius: 5px;

         border-bottom-left-radius: 5px;

    }

    #menu li:last-child a, #menu ul {

         /* Rounded Corners */

        -moz-border-top-right-radius: 5px;

        -moz-border-bottom-right-radius: 5px;

        -webkit-border-top-right-radius: 5px;

        -webkit-border-bottom-right-radius: 5px;

        border-top-right-radius: 7px;

        border-bottom-right-radius: 7px;

    }

    a.active:link, a.active:active, a.active:visited  {  

         color: #fff !important;

         text-shadow: 0px 0px 0px!important;

        background-image: -moz-linear-gradient(top, #444, #666)!important;

        background-image: url(none)!important;

         

         /* Box Shadow */

         box-shadow: inset 0 0 0px #000;

         -moz-box-shadow: inset 0 0 0px #000;

         -webkit-box-shadow: inset 0 0 0px #000;

    }

    </style>

    </head>

    <body>

         <div id="menu">

              <ul>

                   <li><a href="http://barbarossanautica.com/Bienvenida.html">Bienvenida</a></li>

                   <li><a href="http://barbarossanautica.com/Nosotros.html">Nosotros</a></li>

                   <li><a href="http://barbarossanautica.com/Nuestros_barcos/Nuestros_barcos.html">Nuestros Barcos</a></li>

                   <li><a href="http://barbarossanautica.com/Tarifas_y_ocupacion.html">Tarifas y Ocupación</a></li>

                   <li><a href="http://barbarossanautica.com/Contacto.html">Contacto</a></li>

                   <li><a href="hyyp://barbarossanautica.com/Servicios_Nauticos.html">Servicios Nauticos</a></li>

                   <li><a href="http://barbarsossanautica.com/Venta_de_Embarcaciones/Venta_de_Embarcaciones.html">Venta de Embarcaciones</a></li>

              </ul>

         </div>

    </body>

    </html>

     

    I've got several variants but all with the same problem, even the first without any variation on the code shows the same behaviour of different padding right and bottom.

     

    Searching in internet I found this about the different behaviour of Firefox, and then the need of the reset.

    In my actual web (the one uploaded) is still the css3menu.

     

    Thanks

  • 5. Re: Insert css reset
    Roddy Level 6 Level 6 (17,265 points)

    The menu is very slightly wider in Firefox.

     

    If you have problems with Firefox nowadays you should look at your HTML markup and CSS before blaming the browser.

     

    The old fix was "@-moz". The "-moz" prefix is only necessary for ancient versions of Firefox. Remember we're at V18 now!

     

    Here's an example of a centered menu that you can line up with your header image...

     

    http://www.ezmacwebdesign.com/Demo/centered-menu/centered-menu.html

  • 6. Re: Insert css reset
    Barbarossanautica Level 1 Level 1 (0 points)

    Hi Roddy, nice a very pedagogic link.

    Well I've been working on it to making slight changes and publishing then with iWeb to see when it cames the point of cahnging the size.

    I found that everything works well, thus Firefox menu and iWeb menu look identical, until I change the size of the font, you'd put it in "em" which is new for me but I could begin to handle it, but noway anytime I've changed the size been in px the problem beging with the different sizes of the menu.

    The only workaround I foud is changin the code, deleting "font" that you used for size and family,  and using "font-family" and "font-size", Then Coda give me an scroll menu of (i guess) pure css, then I could choose between large, mediun, small....and so it's not so precise as in px, but it works so when I publish the sizes of the all menu are the same in iWeb and in Firefox , Safari never give me problems and I have to try in a PC once I upload it.

    Now searching in Firefox support this: https://addons.mozilla.org/es/firefox/addon/theme-font-size-changer/

    that it's supossed to fix this problem, but individually, so I guess most of the people don¡t have it.

    I must reinicoate now to load the plugin and see if it works, I come back later and tell you how things are going.

     

    Thanks a lot

  • 7. Re: Insert css reset
    Barbarossanautica Level 1 Level 1 (0 points)

    Well I've been making some more proves, but it seems to me the only way of having the size of the menu identical in iWeb and Firefox is using the "small" "medium" etc given by Coda, it also worked with 1em, but when I changed to 0.95 or things like this the difference of WYSIWYG becomes evident.

     

    I will make some more tries but I think that if don't want problems the best solution is gonna be to work with this fixed sizes and with the padding.

     

    Let me say, that Coda also displays % px cm and other, I just tried with em, it was thw original and worked until I changed, px don't work in Firefox and medium, small. It's a pitty because this moves too much, baut at the moment I did't found nothing.

    I keep on.

  • 8. Re: Insert css reset
    Roddy Level 6 Level 6 (17,265 points)

    Of course, as soon as I say that Firefox is at V 18 they updated it to V 19!

     

    It now has a PDF viewer which seems to work OK.

     

    I have a habit of using ems because of the reponsive designs that I do.

     

    1em is equivalent to the font size set in the body element. If you don't set this property (and a value for it) it will use the browser default which would normally be 16px.

     

    A common way to handle ems is to set the body font size like this - font-size: 62.5% - which makes calculations easier. 1em would be equivalent to 10px (about the smallest you would want to go) and 1.6em would be 16px and so on...

     

    You can see the advantage of this method when you come to build a client site. Say you build it using Verdana. The CSS would look liike this...

     

    body {

      margin: 0;

      padding:0;

      background: #000;

      font-size: 62.5%;

      font-family: "Verdana", "Trebuchet MS", sans-serif;

    }

     

    Now the client wants a hosted, non web safe font which is going to appear larger or smaller. If all the font sizes are expressed in ems, all you need to change is the font type and size (percentage) in the main stylesheet. This, of course assumes that all the other components of your site are flexible too.

     

    When you design responsive sites for mobile devices, ems and percentages begin to take over your mind!

     

    Try setting the document font size as a percentage in the body and the "size" property in the rest of the CSS in ems.

  • 9. Re: Insert css reset
    Barbarossanautica Level 1 Level 1 (0 points)

    Well yesterday I was kind of happy, I'm a newby as you know, and I thought I was in the way to solve the menús question, I just want to build my webs and get ready of the webmaster, and his askings for money that in the present moment are too much for me. After all this philosofy, today I'm shoked, I upload a simple page to see the differences, and now I think I understand why Apple's iWeb opted for making images of many of the elements. You can see the results of the prove. I did inserted a white square to see how the menu was moving from system to system, the proves and images come from:

     

     

    iWeb

    Iweb.jpg

     

     

    Safari, tha's the only one that seems similar

    Macos Safari.jpg

     

     

    The movement begines with Firefox, still on Macos

    Macos Firefox.jpg

     

     

    Now Explorer in windows 7 apart from the movement the round corners dissapear, though the code:

    -moz-border-top-left-radius: 5px;

         -moz-border-bottom-left-radius: 5px;

         -webkit-border-top-left-radius: 5px;

         -webkit-border-bottom-left-radius: 5px;

         border-top-left-radius: 5px;

         border-bottom-left-radius: 5px;

    W 7 Explorer.jpg

     

    Now Firefox in Windows 7, again no corners

     

    W 7 Firefox.jpg

     

    Firefoxs in XP

     

    W XP Firefox.jpg

     

    And finally Explorer in XP

     

    W XP Explorer.jpg

     

    Well that's is a small prove, no to say if I shoulded try with the rest of the different systems that are around and the phones to make me completely crazy.

    Isn't this world wonderful and big, this is kind of joke about what you want to say and what others understand......I know now why Steve Jobs give it out with iWeb.

  • 10. Re: Insert css reset
    Roddy Level 6 Level 6 (17,265 points)

    As I mentioned earlier, Firefox dropped the -moz prefix after V 3.

     

    For border radius I now use...

     

    -webkit-border-radius: 5px;

    border-radius: 5px;

     

    Border radius is support in IE V 9.

     

    I don't see why you should have to resort to images for those that can't be bothered to update their browser. The whole point in using CSS3 to create the menu is to make it faster loading. A menu of this type would require 3 to 6 images at least and that's before you start adding drop shadows and other stuff.

     

    iWeb uses images for shapes, reflections, drop shadows because it is assumed the user is a beginner and can't produce them any other way. All these extra features drag down a sites loading time and should be avoided as much as possible. If you have ever created a triangle or a diamond shape with CSS you will see why Apple, and other software developers, resort to shapes for the inexperienced user!

     

    I would say that, with your knowledge of code and your tenacity, you could easily create a better site quicker by writing code rather than using iWeb.

     

    iWeb is dead and its replacement will be capable of all these things you want and more. However, you are a lot more advanced than the average iWeb user and probably won't need the replacement app.

  • 11. Re: Insert css reset
    Barbarossanautica Level 1 Level 1 (0 points)

    Hi roddy and thanks for your support, I used the code from the link you attached:

    https://addons.mozilla.org/es/firefox/addon/theme-font-size-changer/

     

    Just keep on changing little by little in order to not destroy the code (I'm kind of  newbie)

     

    I didn't change the code of rounded corners

     

    My goal was to insert the css menu in my web, but with my own sizes and links.

     

    The code more or less looks like:

    <!DOCTYPE HTML>

    <html>

    <head>

        <title>Centered Navigation Menu</title>

        <meta http-equiv="content-Type" content="text/html; charset=utf-8">

        <style>

    body {

      margin: 0;

      padding:0;

      background: white;

    }

     

    #container {

      width: 100%;

      max-width: 977px;

      margin: 0 auto;

      margin-top: 3%;

      margin-bottom: 3%;

      background-color:rgba(22,0,0,0.5);

        padding: 1%;

        color: #ddd;

        border: 2px solid #ddd;

        border-radius: 20px;

        -webkit-border-radius: 20px

    }

     

     

    #menu {

       float:left;

       width:100%;

       background: #000;

       overflow:hidden;

       position:relative;

    }

    #menu ul {

       clear:left;

       float:left;

       list-style:none;

       margin:0;

       padding:0;

       position:relative;

       left:50%;

       text-align:center;

    }

    #menu ul li {

       display:block;

       float:left;

       list-style:none;

       margin:0;

       padding:0;

       position:relative;

       right:50%;

    }

    #menu ul li a {

       display:block;

       margin:0 0 0 1px;

       padding:3px 10px;

       background:#bbb;

       color:#000;

      

       font-size: small;

       font-family: "Verdana", "Trebuchet MS", sans-serif;

       text-decoration:none;

       line-height:1.3em;

    }

    #menu ul li a:hover {

       background:#0593FF;

       color:#fff;

    }

    #menu ul li a.active,

    #menu ul li a.active:hover {

       color:#fff;

       background:#000;

    }

    #menu li:first-child a, #menu ul {

         /* Rounded Corners */

         -moz-border-top-left-radius: 5px;

         -moz-border-bottom-left-radius: 5px;

         -webkit-border-top-left-radius: 5px;

         -webkit-border-bottom-left-radius: 5px;

         border-top-left-radius: 5px;

         border-bottom-left-radius: 5px;

    }

    #menu li:last-child a, #menu ul {

         /* Rounded Corners */

        -moz-border-top-right-radius: 5px;

        -moz-border-bottom-right-radius: 5px;

        -webkit-border-top-right-radius: 5px;

        -webkit-border-bottom-right-radius: 5px;

        border-top-right-radius: 7px;

        border-bottom-right-radius: 7px;

    }

        </style>

    </head>

    <body>

    <div id="container">

    <div id="menu">

       <ul>

          <li><a href="http://barbarossanautica.com/Bienvenida.html">Bienvenida</a></li>

          <li><a href="http://barbarossanautica.com/Nosotros.html">Nosotros</a></li>

          <li><a href="http://barbarossanautica.com/Nuestros_barcos/Nuestros_barcos.html">Nuestros Barcos</a></li>

          <li><a href="http://barbarossanautica.com/Tarifas_y_ocupacion.html">Tarifas y Ocupación</a></li>

          <li><a href="http://barbarossanautica.com/Contacto.html">Contacto</a></li>

          <li><a href="http://barbarossanautica.com/Servicios_Nauticos.html">Servicios Náuticos</a></li>

          <li><a href="http://barbarossanautica.com/Venta_de_Embarcaciones/Venta_de_Embarcaciones.html">Venta de Embarcaciones</a></li>

       </ul>

    </div>

    </body>

    </html>

     

    I'm still changing it, I want to clean the background. I just tried to see how it would look like

     

    I understand that is a lot better to use the "em" than px or whatever. but it makes me wonder even if the code is not complete the differences from one system to another, of how the css code is understood.

     

    I like very much css 'cause is very logical, but been a standard, I can't get whay is read so diferently.

     

    You also say that iWeb is dead (which I agree), but for me is good because is simple. But do you know if Apple is going to replace it?.

     

    And a last thing, do you think the problems with the movement of the sizes etc. it's caused by iWeb and could be soved using another app? I think a css code should be independant from the app in which it goes,

     

    Thanks a lot for your help

  • 12. Re: Insert css reset
    Roddy Level 6 Level 6 (17,265 points)

    Here I have accepted that the menu increases in size in Firefox and adjusted the layout to suit...

     

    http://ezmacwebdesign.com/Demo/centered-menu/centered-menu.html

     

    Note how little code there is compared with an iWeb page.

  • 13. Re: Insert css reset
    Barbarossanautica Level 1 Level 1 (0 points)

    Really a nice design Roddy, I specially like the flexible background. That's the idea, to make the menú somehow flexible so it can feet in any browser.

     

    I like some of your ideas ¿do you mind if I get some from you?

     

     

     

    Here I have accepted that the menu increases in size in Firefox and adjusted the layout to suit...

     

    How is that done? I mean that the menu increases in size, I 've been looking at the code but don't get it.

     

    Wish that I could do so much with such little code, but I guess some of it is iframe and such as can be called. but stand out, isn't it?

     

    Thanks .

     

    Miguel

  • 14. Re: Insert css reset
    Roddy Level 6 Level 6 (17,265 points)

    You can use anything you want. The code probably needs checked out since I didn't spend too much time on it!

     

    The menu (and the header div) is given a 100% width and is centered. The list items are added and then the container width is adjusted wider so that the menu doesn't fold in Firefox.

     

    The best thing would be if you open up my version in an editor and try adjusting it yourself. Email Me and I will send you the files.

     

    The only iframe is the YouTube movie which I added to fill up space!