Archief - CSS: FireFox - IE probleem

azkme · 7 mei 2008

Hey,

ik ondervind een degoutant probleem met de layout van mijn project (asp). In Firefox toont hij de pagina zoals ik wil, maar in IE weigert hij dienst te doen

ik zit te sukkelen met de height-attributen, en ik weet niet waarom hij het niet zou doen ..

http://users.telenet.be/azkme/pics/firefox.jpg
http://users.telenet.be/azkme/pics/ie.jpg

Iemand een idee? Alvast bedankt!

Code:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="default.master.cs" Inherits="_default" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="Opmaak/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="../Opmaak/menu.js">
</script>
<title>Tumbador VZW</title>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0" id="hoofd">
  <tr>
    <td id="header">
    <script type="text/javascript" language="JavaScript">
	function random_imglink(){
  	var myimages=new Array()
  		myimages[1]="images/header1.jpg"
  		myimages[2]="images/header2.jpg"
  		myimages[3]="images/header3.jpg"
  		myimages[4]="images/header4.jpg"
  		myimages[5]="images/header5.jpg"

  	var ry=Math.floor(Math.random()*myimages.length)

	if (ry==0)
    	ry=1
		document.write('<div align="center"><img src="'+myimages[ry]+'" border=0></div>')
}

	random_imglink()
</script></td>
  </tr>
  <tr>
    <td><br />
    <table width="100%" height="100%" border="0" cellpadding="10" cellspacing="0">
        <tr>
          <td id="menu"><asp:contentplaceholder id="cph2" runat="server"></asp:contentplaceholder>
                    <asp:Label ID="lblWelkom" runat="server"></asp:Label><asp:Label ID="lblLogout" runat="server" ></asp:Label><br />
                    <asp:Label ID="lblMenu" runat="server"></asp:Label></td>
          <td id="content"><asp:contentplaceholder id="cph" runat="server"></asp:contentplaceholder></td>
        </tr>
    </table><br />                   
    </td>
  </tr>
  <tr>
    <td id="bottom">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Code:

html, body
{
	height: 100%;
}

body 
{
	font-family: Tahoma;
	font-size: 12px;
	background-color: #FFFFFF;
	margin: 0px;
	padding: 0px;
	margin-left: 0px;
	margin-top: 0px;
}

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

.inputmenu
{
	border-width: 0px;
	font-family: Tahoma;
	font-size: 12px;
	border-color: #000000;
	background-color: #E1ECF4;
}

#hoofd 
{
	width: 100%;
	height: 100%;
}

#header
{
	background-image: url('../images/header_background.jpg');
	height: 200px;
	vertical-align: top;
	position: relative;
}

#menu
{
	text-align: right;
	border-right: dotted;
	border-width: 1px; 
	border-color: gray; 
	width: 200px;
	vertical-align: top;
}

#content
{
	vertical-align: top;
}

#bottom
{
	background-image: url('../images/bottom_background.jpg');
	height: 50px;
	vertical-align: bottom;
	position: relative;
}

.titel
{
	color: #292E58;
	font-weight: bold;
}

a:link {color: gray; text-decoration: none;} 
a:visited {color: gray; text-decoration: none;} 
a:hover {color: #292E58; text-decoration: none;} 
a:active {color: gray; text-decoration: none;}



#nav, #nav ul, #nav ul ul{
padding: 0px;
margin: 0px;
list-style: none;
background: url(none.gif) repeat 0 0;
font-family: Tahoma;
font-size: 12px;
}

#nav{
width: 100px;
}

#nav li{
width: 100px;
}

#nav ul{
position: absolute;
width: 100px;
left: -1000px;
margin: -22px 0 0 100px;
font-size: 100%;
}

* html #nav ul{
margin: -23px 0 0 100px;
}

#nav li li{
width: 100px;
background-color: #E1ECF4;
}

#nav ul ul{
width: 140px;
margin: -22px 0 0 100px;
font-size: 100%;
}

* html #nav ul ul{
margin: -23px 0 0 100px;
}

#nav li li li{
width: 140px;
}

#nav li:hover ul, #nav li.ie_does_hover ul{
left: auto;
}

#nav li:hover ul ul, #nav li.ie_does_hover ul ul{
left: -1000px;
}

#nav ul li:hover ul, #nav ul li.ie_does_hover ul{
left: auto;
}

#nav a {
display: block;
text-decoration: none;
padding: 2px 4px 3px 4px;
margin: 1px;
}

a.sublink	{
text-align:left;
}

a.link
{
text-align:right;
}

#nav a:link, #nav a:visited{
background: #FFFFFF;
border: 0px solid #494980;
color: gray;
}

#nav a:hover, #nav a:active{
background: #292E58;
border: 0px solid #494980;
color: #FFFFFF;
}

tripwires · 7 mei 2008

Op de renders zie ik geen enkel probleem...zou je eens kunnen specifiëren wat er al dan niet werkt?

azkme · 7 mei 2008

op de screenshots zie je het probleem toch?

de header & de bottom zijn normaal gezien vastgelegd met een heightattribuut (200px voor header, 50px voor bottom), maar deze wordt verwaarloost want in IE gaat de toprij & bottomrij zen eigen weggetje (in IE is de header like 300px plots en de bottom 75px ofzo)

Ik vind het gewoon voos da het in firefox wel werkt en in IE niet

terwijl IE toch de "alles-oplossende-browser" moet voorstellen?

tripwires · 7 mei 2008

kan je hier ook eens de html dumpen, misschien dat de fout wat zichtbaarder is daarin. Je moet weten dat aspx nogal veel ongevraagde dingen in je html gaat generen. Aniways tables zijn nooit echt best practices geweest. Daarvoor bestaan div's. Net zoals het height attribuut. Dat dient eigenlijk enkel bij img's gebruikt te worden.

azkme · 7 mei 2008

stel ik wil het met div's proberen dan:

- ik wil een topdeel (foto & background)
- een middendeel (waar alle content in komt, tekst enz)
- een bottomdeel (background)

Ik heb ergens gelezen dat ge dan eerst de margin's moet opgeven (kijk naar body) om dan het top-gedeelte en bottom-gedeelte te specifieren?

Code:

body 
{
	font-family: Tahoma;
	font-size: 12px;
	background-color: #FFFFFF;
	padding: 0px;
	margin-left: 0px;
	margin-top: 0px;
	margin-top: 200px;
	margin-bottom: 50px;
}

#top, #bottom
{
	position: absolute;	
}

#top
{
	top: 0px;
height: 200px;
	background-image: url('../images/header_background.jpg');
	background-repeat: repeat;
}

#bottom
{
	bottom: 0px;
height: 50px;
	background-image: url('../images/bottom_background.jpg');
}

Dit werkt NIET, enig idee wat ik hier aan moet veranderen?

azkme · 7 mei 2008

yay, heb het gefixt met div's

Code:

html, body 
{
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: Tahoma;
	font-size: 12px;
}

#container {
	background: #FFFFFF;
	border: 0;
    
	position: relative;
	height: auto !important;
	height: 100%;
	min-height: 100%;
    
	width: 100%;
	margin: 0 auto;
	}
	
#header 
{
	background-image: url('../images/header_background.jpg');
    width: 100%;
    height: 200px;
}

#menu 
{
    background: Yellow;
    width: 200px;
    position: absolute;
    top: 200px;
	left: 10px;	/* deze is voor IE, FF kan er zonder, maar IE natuurlijk weer niet */
    bottom: 0;
    
    text-align: right;
	border-right: dotted;
	border-width: 1px; 
	border-color: gray; 
	
	vertical-align: top;
}
    
#inhoud 
{
    padding: 0 0 50px 0; /* bottom padding voor de footer */
    margin: 0 10px 0 220px;
    background: gray;
}

#footer 
{
    background-image: url('../images/bottom_background.jpg');
    height: 50px;
    width: 100%;
    
    position: absolute;
    bottom: 0;
}

Enkel aan de rechterkant van mijn "menu" zou ik een margin van 10 moeten krijgen, maar da wilt em om de één of andere reden niet deftig doen

azkme · 7 mei 2008

Jaj, opgelost gekregen, hieronder de code die ik gebruikt heb (en een handige website):

http://www.mastercode.nl/artikel/82/ <= SUPERHANDIG bij zulke opmaakproblemen!!!

Code:

<div id="container">

<div id="header">
</div>
<div id="menu">
    <asp:contentplaceholder id="cph2" runat="server"></asp:contentplaceholder>
    <asp:Label ID="lblWelkom" runat="server"></asp:Label>
    <asp:Label ID="lblLogout" runat="server" ></asp:Label><br />
    <asp:Label ID="lblMenu" runat="server"></asp:Label></div>
<div id="inhoud"><asp:contentplaceholder id="cph" runat="server"></asp:contentplaceholder></div>
<div id="footer"></div>

</div>

Code:

html, body 
{
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: Tahoma;
	font-size: 12px;
}

#container {
	background: #FFFFFF;
	border: 0;
    
	position: relative;
	height: auto !important;
	height: 100%;
	min-height: 100%;
    
	width: 100%;
	margin: 0 auto;
	}
	
#header 
{
	background-image: url('../images/header_background.jpg');
    width: 100%;
    height: 200px;
}

#menu 
{
    width: 200px;
    position: absolute;
    top: 200px;
	left: 0px;	/* deze is voor IE, FF kan er zonder, maar IE natuurlijk weer niet */
    bottom: 0px;
    
    text-align: right;
	border-right: dotted;
	border-width: 1px; 
	border-color: gray; 
	
	vertical-align: top;
	
	padding: 10px 10px 10px 10px;
}
    
#inhoud 
{
    padding: 0 0 50px 0; /* bottom padding voor de footer */
    margin: 0 0 0 220px;
    
    padding: 10px 10px 10px 10px;
}

#footer 
{
    background-image: url('../images/bottom_background.jpg');
    height: 50px;
    width: 100%;
    
    position: absolute;
    bottom: 0;
}

tripwires · 7 mei 2008

ziet er al veel properder uit sé

trouwens had soortgelijke link al op een van je vorige posts gedaan merkte ik net op.

Archief - CSS: FireFox - IE probleem

azkme

Legacy Member

tripwires

Legacy Member

azkme

Legacy Member

tripwires

Legacy Member

azkme

Legacy Member

azkme

Legacy Member

azkme

Legacy Member

tripwires

Legacy Member