+ Antworten
Ergebnis 1 bis 4 von 4

Thema: White Space Bug im IE7

  1. #1
    TP-Junior Hilltono macht alles soweit korrekt
    Registriert seit
    May 2010
    Beiträge
    8

    White Space Bug im IE7

    Hallo zusammen,

    auf meiner Website www.grassnet.info/transfer.html verwende ich ein horizontales Dropdown Menu. Leider habe ich im IE7 ein Darstellungsproblem, den sogenannten White Space Bug. D.h. zwischen den Submenüs ist immer eine kleiner Abstand, was es unmöglich macht, das Menü anständig zu bedienen.

    Desweitern wird im IE 6 das Submenü nicht "ausgefahren".

    Hier der CSS Code dazu:
    HTML-Code:
    @charset "utf-8";
    body  {
    	font: 100% Verdana, Arial, Helvetica, sans-serif;
    	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    	padding: 0;
    	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    	color: #000000;
    	background-color: #FFF;
    }
    .twoColFixRtHdr #container {
    	width: 885px;
    	text-align: left; /* this overrides the text-align: center on the body element. */
    	margin-top: 0;
    	margin-right: auto;
    	margin-bottom: 0;
    	margin-left: auto;
    	border-top-width: 2px;
    	border-right-width: 2px;
    	border-bottom-width: 2px;
    	border-left-width: 2px;
    	border-top-style: none;
    	border-right-style: solid;
    	border-bottom-style: solid;
    	border-left-style: solid;
    	border-top-color: #088702;
    	border-right-color: #088702;
    	border-bottom-color: #088702;
    	border-left-color: #088702;
    	background-color: #FFFFFF;
    	background-image: url(Pictures/fauxcolumn.gif);
    	background-repeat: repeat-y;
    	background-position: right top;
    } 
    .twoColFixRtHdr #header {
    	background: #DDDDDD;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    	margin-right: auto;
    	margin-left: auto;
    	width: 889px;
    	padding: 0;
    } 
    .twoColFixRtHdr #sidebar1 {
    	width: 280px;
    	padding-top: 15px;
    	padding-right: 10px;
    	padding-bottom: 10px;
    	padding-left: 20px;
    	background-color: #B2E298;
    	float: right;
    	font-size: 0.9375em;
    }
    #mainContent {
    	background-color: #d8fbc5;
    	width: 533px;
    	padding-top: 15px;
    	padding-right: 20px;
    	padding-bottom: 10px;
    	padding-left: 20px;
    	border-right-width: 1px;
    	border-top-style: none;
    	border-right-style: dashed;
    	border-bottom-style: none;
    	border-left-style: none;
    	border-right-color: #088702;
    	font-size: 0.9375em;
    	margin-right: 331px;
    }
    #mainnavi {
    	background-color: #FFF;
    	width: 889px;
    	margin-right: auto;
    	margin-left: auto;
    }
    #navibackground {
    	height: 31px;
    	width: 889px;
    	background-attachment: scroll;
    	background-image: url(Pictures/grasbackground.jpg);
    	background-repeat: repeat-y;
    	margin-right: auto;
    	margin-left: auto;
    }
    
    #breadcrumbs {
    	width: 879px;
    	margin-right: auto;
    	margin-left: auto;
    	background-color: #FFF;
    	padding-top: 10px;
    	padding-right: 10px;
    	padding-bottom: 10px;
    	padding-left: 0px;
    	text-align: left;
    	font-size: 0.875em;
    }
    
    .twoColFixRtHdr #footer {
    	background:#DDDDDD;
    	width: 889px;
    	margin-right: auto;
    	margin-left: auto;
    	padding: 0;
    } 
    .twoColFixRtHdr #footer p {
    	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    }
    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { /* this class can be used to float an element left in your page */
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
    
    /* NAVI BUTTON CSS*/
    /* Fix IE. Hide from IE Mac \*/
    * html ul li { float: left; }
    * html ul li a { height: 1%;}
    /* End */
    /*removes the indents and bullets from the unordered list and defines the width*/
    .ul {
    	margin: 0;
    	padding: 0;
    	cursor: default;
    	width: auto;
    	list-style: none;
    	font-family: Calibri, Arial, sans-serif;
    	font-weight: bold;
    		}
    /* position of list items; set the position as relative, because we will need to position the sub-menus absolutely within them*/
    .li {
    	position: relative;
    	margin: 0;
    	padding: 0;
    	width: 8.313em;
    	font-size: 16px;
    	list-style-type: none;
    	position: relative;
    	text-align: center;
    	cursor: pointer;
    	float: left;
        	}
    /*sub-menus. We want each sub-menu to appear to the right of its parent menu item when that item is hovered over; Using the “left” and “top” attributes, we can absolutely position each sub-menu within its parent menu item. You will notice I have set the “left” property to 149px (1px less than the width of the menu items), which allows the sub-menus to overlap the main menu and not produce a double border*/
    li ul {
      display: none;
      position: absolute; 
      top: 1em;
      left: 0;
      margin: 0;
      padding: 0;
      list-style-type: none;
      font-size: 100%;
      z-index: 1020;
      cursor: default;
      left: -1000em;
      }
    
    li > ul {
    	top: auto;
    	left: auto;
    	}
    /*submenu width, text*/
    ul ul li {
    	text-align: left;
    	font-weight: normal;
    	font-size: 0.875em;
    	width: 9.55em;
    	cursor: pointer;
    }
    /*-------------------------------
    STYLING
    ---------------------------------
    */
    ul li a {
    	display: block;
    	text-decoration: none;
    	color: #000;
    	background: #b2e298;
    	padding: 0.313em;
    	border: 1px solid #088702;
    	border-bottom: 1;
    	}
    ul ul li a{
    	border: 1px solid #088702;
    	background: #c5ffa5;
    }
    ul a:hover, ul a:focus {
    	background-color: #d8fbc5;
    }
    li:hover ul, li.over ul { 
    	display: block; }
    .main{
    	list-style-type: square;
    	margin-left:1em;
    }
    .list {
    	padding-left:0.8em;
    }
    span.headingsmall {
    	font-size:20px;
    	font-weight:bold;
    }
    span.partners {
    	font-size:14px;
    }
    Über eure Hilfe wäre ich sehr dankbar.

    Grüße

  2. #2
    TP-Supporter buffy2511 macht alles soweit korrekt Avatar von buffy2511
    Registriert seit
    Feb 2005
    Ort
    Braunschweig
    Beiträge
    462
    Für den IE 6 versuch mal folgendes:
    Kopiere den folgenden Code:
    HTML-Code:
    <attach event="ondocumentready" handler="parseStylesheets" />
    <script language="JScript">
    
    var currentSheet, doc = window.document, activators = {
    	onhover:{on:'onmouseover', off:'onmouseout'},
    	onactive:{on:'onmousedown', off:'onmouseup'}
    }
    
    function parseStylesheets() {
    	var sheets = doc.styleSheets, l = sheets.length;
    	for(var i=0; i<l; i++) 
    		parseStylesheet(sheets[i]);
    }
    	function parseStylesheet(sheet) {
    		if(sheet.imports) {
    			try {
    				var imports = sheet.imports, l = imports.length;
    				for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
    			} catch(securityException){}
    		}
    
    		try {
    			var rules = (currentSheet = sheet).rules, l = rules.length;
    			for(var j=0; j<l; j++) parseCSSRule(rules[j]);
    		} catch(securityException){}
    	}
    
    	function parseCSSRule(rule) {
    		var select = rule.selectorText, style = rule.style.cssText;
    		if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).test(select) || !style) return;
    		
    		var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
    		var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
    		var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
    		var affected = select.replace(/:hover.*$/, '');
    		var elements = getElementsBySelect(affected);
    
    		currentSheet.addRule(newSelect, style);
    		for(var i=0; i<elements.length; i++)
    			new HoverElement(elements[i], className, activators[pseudo]);
    	}
    
    function HoverElement(node, className, events) {
    	if(!node.hovers) node.hovers = {};
    	if(node.hovers[className]) return;
    	node.hovers[className] = true;
    	node.attachEvent(events.on,
    		function() { node.className += ' ' + className; });
    	node.attachEvent(events.off,
    		function() { node.className = 
    			node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
    }
    
    function getElementsBySelect(rule) {
    	var parts, nodes = [doc];
    	parts = rule.split(' ');
    	for(var i=0; i<parts.length; i++) {
    		nodes = getSelectedNodes(parts[i], nodes);
    	}	return nodes;
    }
    	function getSelectedNodes(select, elements) {
    		var result, node, nodes = [];
    		var classname = (/\.([a-z0-9_-]+)/i).exec(select);
    		var identify = (/\#([a-z0-9_-]+)/i).exec(select);
    		var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
    		for(var i=0; i<elements.length; i++) {
    			result = tagName? elements[i].all.tags(tagName):elements[i].all; 
    			for(var j=0; j<result.length; j++) {
    				node = result[j];
    				if((identify && node.id != identify[1]) || (classname && !(new RegExp('\\b' +
    					classname[1] + '\\b').exec(node.className)))) continue;
    				nodes[nodes.length] = node;
    			}
    		}	return nodes;
    	}
    </script>
    Hiermit legst Du eine neue Datei an und nennst die "hover.htc".

    Dann erweiterst Du Deine CSS-Datei:
    body {
    behavior: url(deinPfadZu/hover.htc);
    }

    Damit sollte das Problem an sich behoben sein.

    Bei dem IE7-Problem würde ich es einfach z. B. mit
    margin-top: 0px !important;
    margin-top: -2px;

    Obs klappt, das weiß ich leider nciht, aber das wäre mein erster Ansatz.
    Grüße aus der Löwenstadt, Nadine

  3. #3
    TP-Junior Hilltono macht alles soweit korrekt
    Registriert seit
    May 2010
    Beiträge
    8
    Hallo Nadine,

    danke für deine Hilfe. Könntest du mir noch sagen, wo genau du meinst, dass ich :
    margin-top: 0px !important;
    margin-top: -2px;

    einbau?

    Danke schön.
    Gruß

  4. #4
    TP-Supporter buffy2511 macht alles soweit korrekt Avatar von buffy2511
    Registriert seit
    Feb 2005
    Ort
    Braunschweig
    Beiträge
    462
    In die CSS-Datei wo Du die Navigationselemente definierst. Da gibst Du ja an, wie hoch die sein sollen, wie breit, Farbe, etc. Und da fügst Du das hinzu.

    Edit: Ich habe eben nur einen kurzen Blick darauf geworfen, aber versuchs mal hier:

    HTML-Code:
    ul ul li {
    	text-align: left;
    	font-weight: normal;
    	font-size: 0.875em;
    	width: 9.55em;
    	cursor: pointer;
    }
    Geändert von buffy2511 (16.06.2010 um 08:18 Uhr)
    Grüße aus der Löwenstadt, Nadine

+ Antworten

Ähnliche Themen

  1. 'white-space: nowrap' - Alternative für den IE?
    Von ExBoNd im Forum HTML & CSS
    Antworten: 12
    Letzter Beitrag: 15.11.2006, 08:03
  2. the white chamber
    Von joextra im Forum Einfach so ...
    Antworten: 0
    Letzter Beitrag: 10.10.2005, 10:22
  3. white-space wert pre-wrap funktioniert nicht
    Von soundso im Forum HTML & CSS
    Antworten: 0
    Letzter Beitrag: 24.09.2004, 16:35
  4. stupid white man
    Von prefix im Forum Einfach so ...
    Antworten: 13
    Letzter Beitrag: 13.06.2003, 09:55

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

     

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51