Is -Negative Margin or Padding Invalid CSS According to W3C

CSS invalid property value for h4 margin

remove , :

main div h4 {
    margin: 20px 0 0 0; /* want to change top margin */
}

CSS margin / padding / positioning issue

Edit:

Wondered how to update this answer, as there is a lot to talk about found it best to take it from bottom up. This will bring you to a layout like this:

• Stage one demo.

The menu and logo should stay in place when you re-size the window etc.

---

Had a look at your code now. It is better, but you still have some trouble:

1. border is still set on image. Invalid markup.
2. repeat-xy is still used on background. Invalid property value.
3. #content still has padding without units. Invalid property value.
4. <br> tags are still used to make paragraphs in text.
5. There is an extra } after #content. Invalidates CSS file.

Number 4. should be fixed, but not that important right now.

As we already have discussed 1-3 it is hard to understand why you keep them. Invalid markup and styling makes for unreliable result.

It can look OK in one browser, in one version of one browser, look whack in another, and totally break in a third. You get misinformation between code and result. When or if you fix it to be valid other unexpected things may change and you have to do a lot more work to clean it up. As a whole and rule number one. No matter how wrong markup and styling might be seen from a how to do it perspective one have to keep invalid markup and style out of it.

To validate your work, and as you are where you are in regards to experience, do it all the time. Do small changes: validate. Do small changes: validate. And so on. Use:

• For HTML
• For CSS

---

Markup

The markup as it is now is not the easiest to style or get to behave good in a dynamic way. hr's is not the easiest to work with and vary between browsers. Do not use tables for menu's or styling. They are best left for what they are intended to: show tabular data. For your menu you can ask yourself: what is the menu; well, it is a list. A list of options for end-user to navigate trough the site. There is a lot of examples on the web using lists as menus. Search the web for CSS list menu etc. You can create nice looking, cross-browser reliable CSS only, (no JavaScript dependency), menus.

---

But let us start with the basic markup: You will usually find it good to wrap the whole page inside a wrapper. Then add sub-items into that. To position elements like your main menu, logo etc. it could be good to use a wrapper for each and position them by float, margins etc.

In general use margins and padding.

Page layout



               Head                  Div

              Divider                Div


            Content                


Div

             Footer                  Div

Head

   Div float left   Div float left


      LOGOmenu                 

Styling + markup

To make it easy for yourself use temporary borders and background colors to view how the various elements float around. Also use the browsers built-in tools to show various things like margins etc. This is invaluable.

Only remember that if you use borders, and you intend to remove them on finished product, they can take up space.

As an example you could have something like this:

• Strong colored first attempt.

HTML:

<div id="wrap">
    <div id="head">
        <div id="logo">
            <a href="index.php">
                <img id="logo_img" src="http://cupido.g6.cz/pictures/header.png" alt="EWITA" />
            </a>
        </div>
        <div id="menubar">MENU</div>
    </div>
</div>

CSS:

* {
    margin     : 0;
    padding    : 0;
}
body {
    font-family: Arial;
    height     : 100%;
    background : orange;
}
#wrap {
    position   : relative;
    background : pink;
    width      : 100%;
    height     : 100%;
}
#head {
    position   : relative;
    width      : 800px;
    height     : 131px;
    margin     : 100px auto 0 auto;
    background : blue;
}
#logo {
    position   : relative;
    width      : 431px;
    float      : left;
    background : red ;
}
#logo_img {
    width      : 439px;
    height     : 131px;
    float      : left;
}
#menubar {
    position   : relative;
    background : #fff;
    width      : 300px;
    float      : left;
    margin-top : 107px;
    padding    : 3px 0 3px 10px;
}

Note: I use a hard reset of margin and padding on all elements by:

* {
    margin : 0;
    padding; 0;
}

And then set margins and padding on tags and elements as I use them. Often find this to be a much easier way then the other way around. Remember that things like body also has padding etc. and often can result in undesired spacing.

This way you also get rid of the horizontal scroll-bar at bottom.

By using float on thing like logo and menubar the elements align nicely.

---

Next we can add the divider. Here we could use a div and set border for top and bottom. On content we use padding to make space between header, text and footer. We also add white border to top of content that aligns nicely with the divider.

• Added divider, content and footer.

HTML:

<div id="divider"></div>
<div id="main_content">
    MAIN CONTENT
</div>
<div id="footer">
    FOOTER
</div>

CSS:

#divider {
    border-top   : 5px solid #353535;
    border-bottom: 3px solid #888;
}
#main_content {
    position   : relative;
    background : url('http://cupido.g6.cz/pictures/background.png');
    border-top : 2px solid #fff;
    padding    : 120px 0 130px 0;
}

---

Next we can add the content text and style it. Also added style to footer.

• With content and styled footer.

HTML

<div class="content_text">
    <p>
        text text text ...
    </p>
</div>

CSS:

.content_text {
    margin     : 0 auto;
    width      : 700px;
    background : #fff;
    border     : 1px solid;
    padding    : 50px 30px;

}
.content_text p {
    font-size  : 16px;
}

Resize window etc. and see it floats nicely around.

---

Now it is time to add the menu. As mentioned earlier we can use list for the menu. It is much more suited for the task then a table. In that regard also note that a menu might have sub items, as such a list becomes the only sane option.

Also note on the menu: You likely do not want to style visited links with other color. But that is up to you of course.

• With added menu and some re-styling on background colors etc.

HTML:

<ul>
    <li><a class="menu" href="smaler.php">úvodní stránka</a></li>
    <li><a class="menu" href="sluzby.php">služby</a></li>
    <li><a class="menu" href="kontakt.php">kontakt</a> </li>
</ul>

CSS:

As we already have set margins and padding to 0 on all elements this is trivial:

#menubar ul {
    list-style : none;
}
#menubar li {
    padding    : 0 10px;
    float      : left;
}
a.menu {
    text-decoration : none;
    color      : #fff;
}
a.menu:hover,
a.menu:active {
    color      : #3cc8a8;
}

Remove helping colors etc. and we have a version 0.1 ready for further testing and expansion.

• Result.
• Result as one page.
• Validated markup on result at W3C
• Validated CSS on result at W3C

---

Original answer:

---

There is more then one problem. Firstly the markup:

XHTML

<link rel="icon" type="image/png" href="./pictures/favicon.png">
Should be:
<link rel="icon" type="image/png" href="./pictures/favicon.png" />

<link rel="stylesheet" type="text/css" href="style.css">
Should be:
<link rel="stylesheet" type="text/css" href="style.css" />

<img src="./pictures/header.png" width="439" height="131" border="0" alt="Sample Image">
Should be XHTML 1.0 Strict img tag does not have a border attribute, and need
to be closed:
<img src="./pictures/header.png" width="439" height="131" alt="Sample Image" />

<hr class="main" /></hr>
Should be:
<hr class="main" />

---

Use paragraphs to group text, not:

Text<br/><br/>Text<br/><br/>Text ...

but:

<p>Text</p><p>Text</p><p>Text... </p>

CSS

Inline comments are not valid, use:

/* some comment */
Not:
// some comment

You are missing unit on most of your padding values. If a value is non-zero it needs a unit such as pt, px etc. Use:

padding: 5px 0 0 20px;
/* Not: */
padding: 5 0 0 20;

If you do not, it has no/(should not have any) effect.

background-repeat does not have repeat-xy. Use:

background-repeat: repeat;
/* not */
background-repeat: repeat-xy;

or nothing at all, as that is the default.

---

Fix those first. Then set some color to your things so that it is easier to understand what you want. You can change them back later. Use red, blue etc.

Example.

---

Regarding zero width no break space bug, as displayed in Vim:

w3c css validator parse error

The issue is that your selectors are starting with numbers. Your selectors should only begin with a letter or escaped number. See here for more details:

http://www.markinns.com/articles/full/using_numbers_as_css_class_or_id_values

And

Which characters are valid in CSS class names/selectors?

Is there a reason why padding adds to the size of an element?

There are two different so-called "box models", one adds the padding (and border) to the specified width, while the other does not. With the advent of CSS3, you can luckily switch between the two models. More precisely, the behaviour you are looking for can be achieved by specifying

box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
width: 200px;

in your div's CSS. Then, in modern browsers, the div will always stay 200 px wide no matter what. For further details and a list of supported browsers, see this guide.

Edit: WRT your edit as to why the traditional box model is as it is, Wikipedia actually offers some insight:

Before HTML 4 and CSS, very few HTML elements supported both border and padding, so the definition of the width and height of an element was not very contentious. However, it varied depending on the element. The HTML width attribute of a table defined the width of the table including its border. On the other hand, the HTML width attribute of an image defined the width of the image itself (inside any border). The only element to support padding in those early days was the table cell. Width for the cell was defined as "the suggested width for a cell content in pixels excluding the cell padding."

CSS introduced margin, border and padding for many more elements. It adopted a definition width in relation to content, border, margin and padding similar to that for a table cell. This has since become known as the W3C box model.

CSS height: [percentage] behaviour using margin and/or padding

Interesting... but I think the problem isn't about vertical height, they all displayed correctly on my browser (height was always relative to parent's height), it is padding and margin that measure to parent's width always, after research though, I found this:

In all cases % (percentage) is a valid value, but needs to be used
with care; such values are calculated as a proportion of the parent
element’s width,

http://www.w3.org/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding

Good catch, I never knew :)

What HTML elements might have browser set default padding/margin?

The W3C has a (informative, not normative) default stylesheet for HTML 4 here:

http://www.w3.org/TR/CSS2/sample.html

where you can see that no elements have padding, but body, h1..h6, p, fieldset, form, ul, ol, dl, dir, menu, blockquote and dd have a margin by default.

Firefox interprets margin-bottom wrong. Maybe a Bug?

I'm not entirely sure why Firefox is behaving differently to other browsers here. It is something to do with collapsing margins.

However, you can easily fix it (no moving down in Firefox, consistency between browsers) by:

• Adding overflow: hidden to .row as an alternate way to clear the float.

You can then remove the <div class="clear"></div> because it's no longer required.

---

Related Topics