---
title: "Undrar över en liten sak"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/185953-undrar-över-en-liten-sak"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "miggo"
published: "2011-01-31T17:16:39.000Z"
updated: "2011-01-31T20:25:42.000Z"
replies: 3
views: 1308
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/185953-undrar-över-en-liten-sak"
---

# Undrar över en liten sak

## #1 — miggo, 2011-01-31T17:16Z

Varför vill sig inte div taggen logo och sitemap samt menu gå samman. I safari så syns den röda bakgrunden, men när jag tittar i IE och firefox syns inget. Mellanrummet mellan dessa taggar i headern gör mig förbryllad. Bryr er inte om färgerna. Jag har dem bara för att se strukturen lättare. 

tacksam för svar

```
<style type="text/css">
body {
	margin: 0 auto;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #7F7F81;
	background: #F00;
}
h1, h2, h3 {
	margin: 0;
	padding: 0;
	font-weight: normal;
	color: #FFFFFF;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
h1 {
	font-size: 3em;
}

h2 {
	font-size: 2.4em;
}

h3 {
	font-size: 1.6em;
}
p {
	font-weight: normal;
	color: #000;
}
a {
	text-decoration: none;
	color: #FFF;
}
a:hover {
	color: #F00;
}

p, ul, ol {
	margin-top: 0;
	line-height: 180%;
}
ul {
	list-style-type: none;	
}
li {
	text-decoration: none;
	display: inline;
}
#wrapper {
	margin: 0 auto;
	padding: 0;
}
#header {
	margin: 0 auto;
	padding: 0;
	height: 500px;
	width: 100%;
	float: left;
}
#logo {
	background: #CCC;
	width: 30%;
	height: 100px;
	float: left;
	margin: 0 0 0 0;	
	padding-left: 0px;
}

#logo h1 {
	float: left;
	padding-left: 50px;
	margin: 15px 0px 15px 0px;
}
#siteMap {
	background: #999;
	width:70%;
	height: 50px;
	float: right;
	padding-left: 0px;
	margin: 0;
}
#siteMap ul {
	float: right;
	padding-right: 30px;
}
#menu {
	background: #1f2120;
	height: 50px;
	width: 70%;
	float: right;
	padding-left: 0px;
	margin: 0 auto;
}
#menu a {
	display: block;
	height: 41px;
	padding: 20px 20px 0px 20px;
	text-transform: uppercase;
	font-size: 14px;
	color: #FFF;
	border: none;
	display: inline-block;
}
#menu a:hover {
	display: inline-block;
	background: #7eba3a;
	color: #FFF;
	border: none;
}
.leftCol {
	background: #000;
	width:40%;
	height: 400px;
	float: left;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
.rightCol {
	background: #FFF;
	width: 60%;
	height: 400px;
	float: left;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
.content {
	width: 100%;
	background: #009;
}
.contentLeft {
	width: 50%;
	background: #666;
	height: 200px;
	float: left;
}
.contentRight {
	width: 50%;
	background: #333;
	height: 200px;
	float: left;
}
#footer {
	background: #c425b3;
	width: 100%;
	height:30px;
	float: left;
}
</style>
</head>

<body>
<div id="wrapper">
  <div id="header">
    <div id="logo">
    <h1><a href="#">logga här</a></h1>
       </div>
    <!-- end #logo -->
    <div id="siteMap">
    	<ul>
			<li class="about"><a href="#">Om oss</a></li> |
			<li class="contact"><a href="#">Kontakt</a></li>
      </ul>
    </div>
    <!-- end #siteMap -->
    <div id="menu">
      	<ul>
			<li class="first"><a href="#">Hem</a></li>
			<li><a href="#">Tjänster</a></li>
            <li><a href="#">Produkter</a></li>
			<li><a href="#">Tips & Råd</a></li>
        </ul>
      </div>
      <!-- end #menu -->
    <div class="leftCol">
    </div>
        <!-- end #leftCol -->
    <div class="rightCol">
    </div>
    	<!-- end #rightCol -->
  </div>
  <!-- end #header -->
  <div class="content">
    <div class="contentLeft">
    </div>
     <!-- end .contentLeft -->
    <div class="contentRight">
    </div>
     <!-- end .contentRight -->
  </div>
  <!-- end .content -->
  <div id="footer">
  </div>
  <!-- end #footer -->
</div>
<!-- end #wrapper -->
</body>
</html>
```

Permalänk: https://www.webforum.nu/p/185953

## #2 — Nate.A, 2011-01-31T19:10Z

Hej Miggo

Skummt problem! Jag har aldrig stött på det tidigare, men efter att ha googlat så verkar det bero på hur Safari avrundar procent till pixlar då upplösningen inte är jämnt delbar.

Kika på den här tråden på Sitepoint, de förklarar lite bätte än mig. Det finns en fix också. <http://www.sitepoint.com/forums/showthread.php?t=626320>

Testa:

```
#logo {
background: #CCC;
width: 30%;
height: 100px;
float: left;
margin: 0 0 0 0;
padding:0 1px 0 0; /* 1px fix */
}
```

Permalänk: https://www.webforum.nu/p/2267261

## #3 — doggelito, 2011-01-31T20:08Z

Men snälla miggo, använd kodtaggar! Jag blir illamående av att scrolla så där mycket!  :l

Permalänk: https://www.webforum.nu/p/2267262

## #4 — @nders, 2011-01-31T20:25Z

> **[doggelito skrev:](https://www.webforum.nu/p/1528368)**
>
> Men snälla miggo, använd kodtaggar! Jag blir illamående av att scrolla så där mycket!  :l

Jag med - därför jag fixa.  =)

Permalänk: https://www.webforum.nu/p/2267263

---

Tråden på webben: https://www.webforum.nu/amne/html-css/185953-undrar-över-en-liten-sak
