3 svar · 1 302 visningar · startad av miggo
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>
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 */
}
Men snälla miggo, använd kodtaggar! Jag blir illamående av att scrolla så där mycket! :l
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. =)
