Skip navigation

Insert css reset

647 Views 14 Replies Latest reply: Feb 20, 2013 10:41 AM by Roddy RSS
Barbarossanautica Calculating status...
Currently Being Moderated
Feb 18, 2013 4:59 AM

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

  • Wyodor Level 6 Level 6 (19,335 points)
    Currently Being Moderated
    Feb 18, 2013 8:12 AM (in response to Barbarossanautica)

    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.

  • Wyodor Level 6 Level 6 (19,335 points)
    Currently Being Moderated
    Feb 18, 2013 10:50 AM (in response to Barbarossanautica)

    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.

  • Roddy Level 6 Level 6 (17,255 points)
    Currently Being Moderated
    Feb 18, 2013 5:14 PM (in response to Barbarossanautica)

    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

  • Roddy Level 6 Level 6 (17,255 points)
    Currently Being Moderated
    Feb 20, 2013 2:09 AM (in response to Barbarossanautica)

    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.

  • Roddy Level 6 Level 6 (17,255 points)
    Currently Being Moderated
    Feb 20, 2013 3:42 AM (in response to Barbarossanautica)

    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.

  • Roddy Level 6 Level 6 (17,255 points)
    Currently Being Moderated
    Feb 20, 2013 5:56 AM (in response to Barbarossanautica)

    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.

  • Roddy Level 6 Level 6 (17,255 points)
    Currently Being Moderated
    Feb 20, 2013 10:41 AM (in response to Barbarossanautica)

    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!

Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Legend

  • This solved my question - 10 points
  • This helped me - 5 points
This site contains user submitted content, comments and opinions and is for informational purposes only. Apple disclaims any and all liability for the acts, omissions and conduct of any third parties in connection with or related to your use of the site. All postings and use of the content on this site are subject to the Apple Support Communities Terms of Use.