I am trying to make a pure css skin and I am having some problems. In IE it actually works (though I had to use box-sizing), but Mozilla is treating my solpartmenu as if the height is extremely large instead of just adjusting to fit. I have not adjusted the height at all, and I have searched for any other height edits in the portal and default css file, but I cannot find any.
Also, this skin is modified from a number of other sources, and assembled by me to play around before I go all the way from scratch. If you have any other advice, do not hesitate; I can take the criticism.
The site is owenphelps.com
Here is the html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Control language="vb" CodeBehind="~/admin/Skins/skin.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<%@ Register TagPrefix="dnn" TagName="MENU" Src="~/Admin/Skins/SolPartMenu.ascx" %>
<%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %>
<%@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>
<%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TERMS" Src="~/Admin/Skins/Terms.ascx" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<LINK ID="skin" REL="stylesheet" TYPE="text/css" HREF="/dnn/portals/_default/skins/template/skin.css"/>
</head>
<body>
<div id="container" style="background:#fff url(/dnn/portals/_default/skins/template/left_bg.jpg) repeat-y left;">
<div id="header">
<img src="/dnn/portals/_default/skins/template/header.jpg" align="top"/>
<div class="headerborder" style="background:url(/dnn/portals/_default/skins/template/left_top.jpg) no-repeat top; width:217px;">
</div>
<div class="headerborder" style="width:553px; background:#fff url(/dnn/portals/_default/skins/template/shadow.gif) repeat-x top;">
</div>
</div>
<div id="middle" class="clearfix" style="vertical-align:top;">
<div id="left">
<div style="width:100%; float:left;">
<dnn:MENU runat="server" id="dnnMENU" ControlOrientation="Vertical"/>
</div>
<div runat="server" class="leftpane" id="LeftPane" style="width:100%; float:left;">
</div>
</div>
<div id="inner">
<div runat="server" class="contentpane" id="ContentPane" style="width: 100%;">hello
</div>
<div runat="server" class="contentpane" id="ContentLeftPane" style="float: left;">hello
</div>
<div runat="server" class="contentpane" id="ContentRightPane" style="float: right;">hello
</div>
<div runat="server" class="contentpane" id="ContentBottomPane" style="clear:both; width: 100%;">hello
</div>
</div>
</div>
<div id="footer" style="background:#575757 url(/dnn/portals/_default/skins/template/footerbg.jpg) repeat-x top;">
<div style="float:right; width:120px;">
<img src="/dnn/portals/_default/skins/template/poweredbysynergy.jpg" align="middle"/>
</div>
<div style="float:left; padding-left:10px; line-height:40px;">
<dnn:SEARCH runat="server" id="dnnSEARCH" />
</div>
<div style="line-height:40px; float:middle;">
<dnn:COPYRIGHT runat="server" id="dnnCopyright"/>
<dnn:TERMS runat="server" id="dnnTerms"/>
<dnn:USER runat="server" id="dnnUSER"/>
<dnn:LOGIN runat="server" id="dnnLOGIN"/>
</div>
</div>
</div>
</body>
</html>
Here is the CSS:
body {
margin:10px;
padding:10px;
background:#FFF;
color:#000;
text-align:center;/*centre for ie5 */
}
div {
-moz-box-sizing:border-box;
box-sizing:border-box;
}
img {
margin:0px;
border:0px;
padding:0px;
}
#container {
width:772px;/*this colour will be left column colour */
margin:auto;/* centre for compliant browsers*/
text-align:left;
padding:0px;
border:#575757 solid 1px;
}
#header {
height:235px;
background-color: transparent;
text-align:center;
}
.headerborder {
float:left;
height:13px;
}
#left {
margin-left:-216px;/*must be 1 pixel less than width */
float:left;
width:217px;/* this width is the same as the margin on #middle */
position:relative;
left:-2px;/* line it up exactly without losing pressure on footer*/
vertical-align:top;
}
#left p {padding-left:5px}
#middle {
background:#FFF;/* background colour of right column */
margin-left:217px;/*this is the space for the left column */
}
#inner{width:100%;float:left;margin-right:-1px}/* contain cleared elements from clearing other floats*/
#footer {
height:45px;
line-height:40px;
border-top:#575757 1px solid;
text-align:center;
}
h1,h2,h3,p {margin-top:0}
/* clear without structural mark-up from PIE website*/
.clearfix:after {
content:" ";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
.leftpane {
background-color:transparent;
}
.contentpane {
background-color:transparent;
text-align: center;
padding:0px;
}
.SkinObject {
font-family:Arial, Helvetica, Verdana, sans-serif;
text-decoration:none;
color:#a90000;
font-weight:normal;
}
.controlpanel {
width:100%;
background-color:#dfe5f2;
}
a.#dnn_dnnSEARCH_cmdSearch:link, a.#dnn_dnnSEARCH_cmdSearch:visited, a.#dnn_dnnSEARCH_cmdSearch:active {
color: #a90000;
font-family:Arial, Helvetica, Verdana, sans-serif;
text-decoration:none;
font-size:10pt;
font-weight:bold;
}
a.#dnn_dnnSEARCH_cmdSearch:hover {
color:#FF3737
}
#dnn_dnnSEARCH_txtSearch.NormalTextBox {
font-family:Arial, Helvetica, Verdana, sans-serif;
height:24px;
background:white;
width:145px;
color:#1E1E1E;
padding:2px 0px 0px 2px;
border:1px solid #575757;
cursor:text;
font-size:11pt;
}
.MainMenu_MenuContainer {
background:transparent;
width:217px;
}
.MainMenu_MenuBar {
cursor:hand;
background-color:Transparent;
}
.MainMenu_MenuIcon{ display:none; }
.MainMenu_MenuArrow{ display:none; }
.MainMenu_RootMenuArrow{ display:none; }
.MainMenu_MenuBreak{ display:none; }
.ModuleTitle_MenuItemSel {background-color:transparent;}
.MainMenu_MenuItemSel {background-color:transparent;}
.MainMenu_MenuItem TD {
color:#a90000;
background:transparent;
height:38px;
cursor:hand;
font-weight:bold;
font-style:normal;
font-family:Arial, Helvetica, Verdana, sans-serif;
font-size:13pt;
padding:0px 0px 0px 4px;
}
.MainMenu_MenuItemSel TD {
color:#FF3737;
background:transparent;
height:38px;
cursor:hand;
font-weight:bold;
font-style:normal;
font-family:Arial, Helvetica, Verdana, sans-serif;
font-size:13pt;
padding:0px 0px 0px 4px;
}
.MainMenu_SubMenu td {
background-image:none;
background-color:#EEEEEE;
height:24px;
font-size:11pt;
font-weight:bold;
font-style:normal;
color:#A90000;
padding:0px;
width:210px;
border:0px;
z-index:1000;
cursor:hand;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#696969', Direction=135, Strength=3);
}
/* mac hide \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide */
/* do not change or amalgamate clearfix styles*/
Thank you in advance for any help you can give me.