webForumDet fria alternativet
Logga in

Strulandes CSS

5 svar · 304 visningar · startad av Tengblad

TengbladMedlem sedan dec. 19998 277 inlägg
#1

Har en listmeny som inte riktigt vill hamna där den borde. Funkar fint i IE och både css och xhtml validerar utan problem. Blir inte klok på vad som i FF skapar en margin på cirkus 20px ovanför menyn.

Sidan i fråga: http://www.fri-frakt.se/tmp/

body, html {
	background-image: url(images/topbg.png);
	background-repeat: repeat-x;
	background-position: top;
	margin: 0px;
	padding: 0px;
}
#headwrapper {
	width: 780px;
	height: 81px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#logo {
	height: 66px;
	width: 66px;
	margin-left: 25px;
	float: left;
	padding-top: 8px;
}
#topnav {
	float: right;
}
#navlisttop ul
{
	margin: 0px;
	list-style-type: none;
}

#navlisttop li
{
	display: block;
	white-space: nowrap;
	float: left;
}

#navlisttop a {
	padding-top: 55px;
	padding-right: 15px;
	padding-bottom: 12px;
	padding-left: 15px;
	display: block;
	white-space: nowrap;
}

#navlisttop a:link, #navlisttop a:visited
{
	color: #FFFFFF;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
}

#navlisttop a:hover
{
	color: #C4172D;
	text-decoration: none;
	background-image: url(images/hoverbg.gif);
	background-repeat: repeat-x;
	background-position: top;
}
* html #navlisttop a {width:1%;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fri-Frakt - Betala inte mer &auml;n du beh&ouml;ver</title>
<style type="text/css" media="screen">
<!--
@import url("global.css");
-->
</style>
</head>

<body>
<div id="headwrapper">
  <div id="logo"><a href="index.php"><img src="images/fflogo.gif" alt="Fri-Frakt Logo" width="66" height="64" border="0" /></a></div>
  <div id="topnav">
	<ul id="navlisttop">
		<li><a href="#">Hem</a></li>
		<li><a href="#">Om</a></li>
		<li><a href="#">Nyheter</a></li>
		<li><a href="#">Kontakt</a></li>
	</ul>
</div> 
</div>
</body>
</html>

Snabb hjälp skulle uppskattas, säkert något jag bara kollat mig blind på :p

voigtann1Medlem sedan juni 20019 519 inlägg
#2

Du får skapa in ifIE med dina nuvarande värde för din meny och "göra en standard" för FF.. har för mig även att du bör kunna använda * html och då kommer inte IE eller FF "förstå" hur den ska placera den.

voigtann1Medlem sedan juni 20019 519 inlägg
#3

testade med

*{padding:0px;margin:0px;}

fungerade för mig ;)

TengbladMedlem sedan dec. 19998 277 inlägg
#4

voigtann1 skrev:

testade med

*{padding:0px;margin:0px;}

fungerade för mig ;)

Japp funkade kalas, task! :D

TengbladMedlem sedan dec. 19998 277 inlägg
#5

Som jag misstänkte så skapar nu denna ful-lösning problem med upplägg på resten av sidan.

Som jag har det nu så funkar ju menyn, men när jag t.ex vill sätta en margin på en h1 så händer ju inte så mycket tack vare denna lösning.

Visst kan jag väl lägga till en <br /> extra här och där, men helst vill jag ju kunna styra detta via css'en.

Så hur går jag tillväga nu?

body, html {
	background-image: url(images/topbg.png);
	background-repeat: repeat-x;
	background-position: top;
	margin: 0px;
	padding: 0px;
}
#headwrapper {
	width: 780px;
	height: 81px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#logo {
	height: 66px;
	width: 66px;
	margin-left: 25px;
	float: left;
	padding-top: 8px;
}
#topnav {
	float: right;
}
#navlisttop ul
{
	margin: 0px;
	list-style-type: none;
}

#navlisttop li
{
	display: block;
	white-space: nowrap;
	float: left;
	list-style-type: none;
}
#maincontent {
	width: 780px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#search {
	width: 250px;
	float: right;
	margin-top: 40px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-align: right;
	height: 80px;
	background-image: url(images/searchbg.gif);
	background-repeat: no-repeat;
}
p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
}

a:link, a:visited {
	color: #d01f3c;
	text-decoration: underline;
}

#searchform {
	text-align: center;
	width: 250px;
	margin-top: 20px;
}
#content {
	float: left;
	width: 520px;
	margin-top: 40px;
}
h1 {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: 16px;
	color: #d01f3c;
	text-decoration: none;
	font-weight: lighter;
	display: inline;
	margin-bottom: 25px;
}

#navlisttop a {
	padding-top: 55px;
	padding-right: 15px;
	padding-bottom: 12px;
	padding-left: 15px;
	display: block;
	white-space: nowrap;
}

#navlisttop a:link, #navlisttop a:visited
{
	color: #FFFFFF;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
}

#navlisttop a:hover
{
	color: #C4172D;
	text-decoration: none;
	background-image: url(images/hoverbg.gif);
	background-repeat: repeat-x;
	background-position: top;
	border-right-width: 1px;
	border-right-style: dotted;
	border-right-color: #333333;
	border-left-width: 1px;
	border-left-style: dotted;
	border-left-color: #333333;
}
* html #navlisttop a {width:1%;}
* {margin:0;padding:0}

.searchin {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 8px;
	margin-bottom: 5px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fri-Frakt - Betala inte mer &auml;n du beh&ouml;ver</title>
<style type="text/css" media="screen">
<!--
@import url("global.css");
-->
</style>
</head>

<body>
<div id="headwrapper">
  <div id="logo"><a href="index.php"><img src="images/fflogo.gif" alt="Fri-Frakt Logo" width="66" height="64" border="0" /></a></div>
  <div id="topnav">
	<ul id="navlisttop">
		<li><a href="#">Hem</a></li>
		<li><a href="#">Om</a></li>
		<li><a href="#">Nyheter</a></li>
		<li><a href="#">Kontakt</a></li>
	</ul>
</div> 
</div>
<div id="maincontent">
  <div id="content">
    <h1>Betala inte mer &auml;n du beh&ouml;ver!    </h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam sollicitudin, justo nec commodo accumsan, lectus lacus ullamcorper tortor, at viverra nunc sapien eu dui. Curabitur magna. Curabitur malesuada tincidunt nulla. Fusce quis sem ac elit malesuada ullamcorper. Maecenas volutpat risus vel leo. Duis ante risus, ullamcorper non, vestibulum nec, tempus a, ante. Etiam consectetuer pede et metus. Pellentesque arcu velit, accumsan a, aliquam ut, venenatis molestie, ligula. Integer vel elit vel augue malesuada viverra. Praesent neque urna, volutpat quis, consequat non, convallis ut, est. Proin felis massa, facilisis mattis, nonummy non, sagittis nec, lectus.</p>
    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus porttitor, odio et feugiat lacinia, lorem massa adipiscing orci, ac egestas massa felis vitae ante. Aliquam rhoncus. In porttitor tortor id nisi. Pellentesque augue. Fusce a elit non eros fringilla suscipit. Praesent vulputate nisl ut quam. Fusce nec enim nec lacus facilisis sollicitudin. Duis at ligula. Suspendisse quis elit. Vestibulum sed justo a diam rutrum gravida.
      
      Phasellus molestie.</p>
  </div>
  <div id="search">
    <form id="searchform" name="form1" method="post" action="">
        <input name="search" type="text" class="searchin" />
        <input name="Submit" type="image" src="images/search.gif" class="searchbtn" value="S&ouml;k" />
        <br />
        <a href="#">Avancerad s&ouml;kning</a> | <a href="#">S&ouml;khj&auml;lp?</a> 
    </form>
  </div>
  <br style="clear:both" />
</div>
</body>
</html>
voigtann1Medlem sedan juni 20019 519 inlägg
#6
br{
margin-bottom:20px;
}

p{
margin-bottom:20px;
}
137 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
134 ms — hämta tråd, inlägg och bilagor (db)