Insert css reset

Question

Insert css reset

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

Posted on Feb 18, 2013 4:59 AM

Reply

Answer 1

Wyodor

Level 6

19,930 points

Feb 18, 2013 8:12 AM in response to Barbarossanautica

You mean this menu :

https://discussions.apple.com/thread/3892350?answerId=21244692022#21244692022

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

And ask yourself why the body margin is 30px.

Reply

Answer 2

Feb 18, 2013 9:57 AM in response to Wyodor

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:

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

margin: 0;

padding: 0;

}

body {

background: transparent;

margin: 30px;

padding: 0px;

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

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

Above the right corner in iWeb

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

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

Reply

Answer 3

Wyodor

Level 6

19,930 points

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.

Reply

Answer 4

Feb 18, 2013 11:28 AM in response to Wyodor

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">

<head>

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

* { 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;

}

#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;

}

#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;

/* 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>

<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

Reply

Answer 5

Roddy

Level 6

17,265 points

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

Reply

Answer 6

Feb 19, 2013 4:46 AM in response to Roddy

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

Reply

Answer 7

Feb 19, 2013 5:27 AM in response to Roddy

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.

Reply

Answer 8

Roddy

Level 6

17,265 points

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.

Reply

Answer 9

Feb 20, 2013 3:09 AM in response to Roddy

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

Safari, tha's the only one that seems similar

The movement begines with Firefox, still on Macos

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;

Now Firefox in Windows 7, again no corners

Firefoxs in XP

And finally Explorer in XP

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.

Reply

Answer 10

Roddy

Level 6

17,265 points

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.

Reply

Answer 11

Feb 20, 2013 4:08 AM in response to Roddy

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>

<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>

<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

Reply

Answer 12

Roddy

Level 6

17,265 points

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.

Reply

Answer 13

Feb 20, 2013 10:08 AM in response to Roddy

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

Reply

Answer 14

Roddy

Level 6

17,265 points

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!

Reply