Menyfel (css)

FunTrix · 2006-06-26, 16:30

Hej,
jag har drabbats av ett dilemma där min meny hamnar lodrätt istället för vågrätt i dreamweavers utvecklingsmiljö samt i ie 7, någon som vet vad detta kan bero på? bifogar en printscreen ur dreamweaver.
Någon som vet hur man kan lösa detta problem?

layout.css

Kod:

	* html .meny{ width: 1px; display: inline-block; }
	* html .meny a{ margin: 0 -2px; display: inline-block; }
	* html .meny li{ display: inline; }
	body{ margin: 0; padding: 0; color: #000; background: #FFF; font: 0.65em Verdana,Arial,Helvetica,sans-serif; }
	.meny{ padding: 0; float: right; padding-right: 10px; display: block; list-style-type: none; white-space: nowrap; }
	.meny a{ padding: 4px 9px; display: block; color: #FFF; background: #000; font-size: 12px; text-decoration: none; }
	.meny a:hover{ color: #FFF; background: url(img/menu_bg_green.jpg); }
	.meny li{ display: table-cell; }
	.right{ margin: 0 14px 0 auto; }
	.searchbutton{ border: 1px solid #000; background: url(img/button_green.jpg); font-size: 10px; height: 23px; }
	#logo{ width: 70%; float: left; margin: 10px 0px 30px 10px; color: #5FC100; height: auto; }
	#innertop{ width: 100%; padding-bottom: 0px; float: left; background: url(img/top_bg.jpg) repeat-x; height: auto; }
	#innertopw{ margin-right: auto; margin-left: auto; width: 92%; height: auto; }
	#kolumn1,#kolumn2{ float: left; width: 200px; margin: 0 5px; }
	#line{ float: left; width: 100%; margin: 0px; padding: 0px; background: url(img/line_green.jpg) repeat-x; height: 20px; }
	#search{ width: auto; margin: 10px 20px 0px 0px; float: right; color: #FFF; height: 60px; }
	#top{ padding-top: 25px; padding-bottom: 0px; float: left; width: 100%; background: #000;}
	#wrapper{ width: 100%; float: left; background: #FFF;}
	#menu{ height: auto; width: 100%; float: right;}

sidan.php

Kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link href="layout2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top"><div id="innertopw"><div id="innertop"><div id="logo">
 <p>Beta version 1. </p>
</div><div id="search"><strong>Search</strong><br />
  <label>
   <input type="text" name="textfield" />
  </label>
  <label>
  <input type="submit" name="Submit" value="Search" class="searchbutton" />
  </label>
</div></div>
<div id="menu">
 <div class="menu">
  <ul class="meny right"><li><a href="#" title="Gå till startsidan">Startsida</a></li><li><a href="#">Anteckningar</a></li><li><a href="#">Filarkiv</a></li><li><a href="#">Länkarkiv</a></li><li><a href="#">Inställningar</a></li><li><a href="#">Filewalk</a></li></ul></div></div></div></div>
<div id="line"></div>
<div id="kolumn1"><p>Kolumn1: texten i kolumnen...</p></div>
<div id="kolumn2"><p>Kolumn2: texten i kolumnen...</p></div>
</body></html>

hnn · 2006-06-26, 17:39

Vad jag vet, så är väl IE 7 fortfarande beta? Och därmed inte fullt utvecklingsvänlig än?

FunTrix · 2006-06-26, 17:42

ja det stämmer, men jag frågade ju dessutom varför det även blir så i dreamweaver, borde inte det visa rätt? sidan funkar i ie6, firefox och opera så det är lustigt att en utvecklingsmiljö inte visar som den ska?

martine · 2006-07-02, 22:35

Misstänker att det kan bero på:

Kod:

.meny li{ display: table-cell; }

display: table-cell; är ju css2 och ännu inte alltför väl understött. Bara ett fåtal värden utöver block och inline är ju "säkra", så att använda andra kan vara vanskligt om man vill att det ska fungera på alla webläsare.
För "gamla" IE6 använder du ju

Kod:

* html .meny li{ display: inline; }

, vilket är en helt annan lösning.
Antagligen reagerar inte Dreamweaver på * html och känner samtidigt heller inte till table-cell. För IE7 är det säkerligen så att den ignorerar * html och ännu inte har implementerat table-cell eftersom det bara är en beta, men stöd kommer nog, det är ju css2.

Om du vill slippa problemet kan ju float:a li:arna istället.

Peter_Holm · 2006-07-04, 12:45

Att utveckla för en webbläsare i beta-stadiet kanske inte är någon bra idé. Håll dig till IE6 så länge.

Men IE har väl problem med css-dropdowns har jag läst, suckerfish-menus är en lösning med bara lite javascript som fungerar på alla browsers. Leta på suckerfish.

martine · 2006-07-04, 13:23

Citat:

Originally posted by Peter_Holm@Jul 4 2006, 12:45
... med bara lite javascript som fungerar på alla browsers.

Så länge javaskript är aktiverat...

Edit: och för övrig fungerar väl det mesta bara halvbra på IE6 och oftast med hjälp av hack.

cliffjesus · 2006-07-04, 14:47

Är det inte dessutom så att dreamweaver inte har en "egen" browser, utan använder den man har som förvald när man tittar på sidor i designläget?
Då är det ju inte så konstigt att det inte ser bra ut i dreamweaver.

martine · 2006-07-07, 21:02

Citat:

Originally posted by cliffjesus@Jul 4 2006, 14:47
Är det inte dessutom så att dreamweaver inte har en "egen" browser, utan använder den man har som förvald när man tittar på sidor i designläget?
Då är det ju inte så konstigt att det inte ser bra ut i dreamweaver.

Om jag inte missminner mig så använder Dreamweaver Operas renderingsmotor (som visst kallas Presto). Antagligen en äldre version eftersom FunTrixs kod fungerade bra i (antagligen senaste versionen av) Opera.

Micke Alm · 2006-07-10, 14:03

javascriptet för suckerfish dropdownen används bara eftersom det är just det: en dropdown. Ie har problem med pseudo-klassen :hover och javascriptet korrigerar det. Skall du bara göra en vanlig meny utan dropdowns så funkar:

ul { list-style: none; }
ul li { display: block; float: left; }

alldeles utmärkt (givetvis med dina egna utseendeformateringar)

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

Menyfel (css)