Div inkonsistens og vertical align problemer
Hej alle.Jeg har nogle problemer med en side jeg er ved at sætte op. Den er bygget op med <div> tags, for at gøre det let mht. design.
Problem 1)
Den div, som holder min menu bliver højere i IE end den gør i Firefox. Firefox viser den helt rigtigt som 1 tynd linje, mens IE viser den som en tyk (ligesom en dobbelt ~) linje, hvor menuen så ligger på den nederste linje. Jeg har prøvet at sætte højden på div'en manuelt (den er nu tilbage til automatisk), men IE presser bare menuen ned under bundkanten på div'en, så man kun kan se toppen af menuen, når jeg gør det.
Problem 2)
Div'en, der holder min 'overskrift', får centreret teksten vertikalt i Firefox, men ikke i IE. Det mener jeg da helt sikkert, at jeg har fået til at lykkes før, men nu virker det af ukendte årsager ikke mere.. Kan ikke gennemskue problemet.
I får lige hele begge filer, som er interessante i denne sammenhæng. Hovedsiden er en asp masterpage, men virker ellers som normalt.
Default.master
--------------
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Default.master.cs" Inherits="_Default" %>
<!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 runat="server">
<title>MasterPageTest</title>
<link rel="Stylesheet" type="text/css" href="Styles/StyleSheet.css" runat="server" />
</head>
<body>
<form id="frmMain" runat="server">
<div class="imgbg">
<img id="bg" class="imgbg" src="Images/gradblue.gif" alt="" />
</div>
<div class="ontop">
<div id="header" class="divheader">
<p class="headertxt">
.: MasterPageTest :.
</p>
</div>
<div id="menu" class="divmenu">
<asp:Menu ID="Menu1" runat="server" BackColor="#F7F6F3" DataSourceID="SiteMapDataSource1"
DynamicHorizontalOffset="2" Font-Names="Calibri, Verdana" Font-Size="12px" ForeColor="#7C6F57"
StaticSubMenuIndent="10px" Orientation="Horizontal" StaticDisplayLevels="2" Height="18px">
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#7C6F57" ForeColor="White" />
<DynamicMenuStyle BackColor="#F7F6F3" />
<StaticSelectedStyle BackColor="White" />
<DynamicSelectedStyle BackColor="#5A4D35" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticHoverStyle BackColor="#7C6F57" ForeColor="White" />
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>
<div id="main" class="divmain">
<div id="inner" class="divinner">
<asp:ContentPlaceHolder ID="cphMain" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div id="footer" class="divfooter">
<table width="100%">
<tr>
<td>
<asp:SiteMapPath ID="SiteMapPath1" runat="server" Font-Names="Calibri, Verdana" Font-Size="11px"
PathSeparator=" : ">
<PathSeparatorStyle Font-Bold="True" ForeColor="#990000" />
<CurrentNodeStyle ForeColor="#333333" />
<NodeStyle Font-Bold="True" ForeColor="#990000" />
<RootNodeStyle Font-Bold="True" ForeColor="#FF8000" />
</asp:SiteMapPath>
</td>
<td align="right">
(c) 2007 - <a class="lnk" href="mailto:1@2.3">Mail</a> - <a class="lnk"
href="http://1.2.3">Site</a>
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
.. og CSS'en
------------
body
{
background-color: #86AEC4;
text-align: center;
min-width: 600px;
border: none;
margin: none;
padding: none;
}
.ontop
{
width: 100%;
height: 100%;
z-index: 10;
position: absolute;
top: 0px;
left: 0px;
}
.headertxt
{
vertical-align: middle;
font-family: Calibri, Verdana;
font-size: 36px;
color: White;
}
.imgbg
{
width: 100%;
height: 100%;
z-index: 0;
position: absolute;
top: 0px;
left: 0px;
}
.divheader
{
width: 800px;
height: 100px;
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
border-top: solid 10px White;
background-color: #7C6F57;
border-left: solid 10px White;
border-right: solid 10px White;
}
.divmenu
{
background-color: #F7F6F3;
width: 800px;
/*height: 20px;*/
display: block;
text-align: left;
font-family: Calibri, Verdana;
font-size: 12px;
color: White;
vertical-align: middle;
margin-left: auto;
margin-right: auto;
border-left: solid 10px White;
border-right: solid 10px White;
border-top: solid 1px White;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}
.divinner
{
margin-left: 5px;
margin-right: 2px;
padding-top: 5px;
border: none;
background-color: #7C6F57;
}
.divmain
{
width: 800px;
min-height: 500px;
display: block; /*overflow: auto;*/
text-align: left;
font-family: Calibri, Verdana;
font-size: 12px;
color: White;
margin-left: auto;
margin-right: auto;
background-color: #7C6F57;
border-left: solid 10px White;
border-right: solid 10px White;
}
.divfooter
{
background-color: #7C6F57;
width: 800px;
display: block;
margin-left: auto;
margin-right: auto;
font-family: Calibri, Verdana;
font-size: 11px;
color: Black;
text-align: left;
border-top: solid 1px White;
border-left: solid 10px White;
border-right: solid 10px White;
border-bottom: solid 10px White;
}
.lnk:link
{
text-decoration: underline;
font-weight: bold;
color: #333333;
}
.lnk:visited
{
text-decoration: underline;
font-weight: bold;
color: #212121;
}
.lnk:hover
{
text-decoration: underline overline;
font-weight: bold;
color: #454545;
}
.lnk:active
{
text-decoration: none;
font-weight: bold;
}
Jeg håber I kan hjælpe. Er ved at være lidt træt af de "standarder", som viser sig ikke helt at være standarder alligevel..
Mvh.
