CSS Forum

**mb2000inc** · 12-16-2008, 11:04 AM

OK, this is a tricky one.
Here's the scenario:

Quote:

My Development machine is running 1024x768. This is where the magic happens. I've been given a test laptop (a small dell XPS M1210) currently the resolution is set to 1280 x 800. What I'm working on looks like crap in that resolution. Things don't line up where they are supposed to and it's a little maddening.

So, that all being said, is there a CSS fix for different resolutions?

Please see example images below. I took out all sensitive information so that you can only see the issue and not who it's for. Note the deep blue areas in the top container... the first one doesn't fit the area given, but in the second image, it's fine.

This first one is at 1280X800:

This second one is at 1024x768:

If there's anything anyone can do to help me out, it would be greatly appreciated.

**wayfarer07** · 12-16-2008, 11:41 AM

Any chance you're going to give us some code, or better, a link? Asking for a CSS fix with nothing to compare it to is a lot like asking for butter without toast.

**mb2000inc** · 12-16-2008, 12:54 PM

What's wrong with a stick of plain butter every now and again?

Yeah,I was working on that. I didn't have any ready for viewing, yet when I posted it. I will post some code in a few moments, I have to finish editing some of it out for security reasons. For the same security reasons I cannot post a link (since you'd have to have an account with us just to view the home page... until it goes live, that is.)

(btw, I have over 1500 lines of CSS for the front page, alone...)
(and about 800 lines of HTML and javascript in the body...but hey, butter is butter, right?

)

**LadynRed** · 12-16-2008, 03:13 PM

1500 lines of css JUST for the home page

??? Geez, Louise.. that sounds like overkill.

**mb2000inc** · 04:09 PM

That's what I get for using dot net nuke... I'm almost done editing.... I promise you'll see some code examples soon.

**mb2000inc** · 12-16-2008, 04:38 PM

Ok, here's the CSS's:
I have three....
Skin.css
ieFix.css
ie7Fix.css

Based on the images posted before...
TopLeftNavPane (golden navigation section top left corner)
TopPane (blue section top right)
LeftSidePane (First Column on the left)
LeftPane (Second column)
ContentPane (Third Column)
RightPane (Last Column)

I would post the homepage backend but, as I stated previously, I'm using Dot Net Nuke.... they use a default page, a skin page, tab pages and loadable online content. you won't see the layout as you normally would on any HTML or ASPX or ASCX pages...

For the HomePage: (remember it's not the same as a typical web document, it links to the other pages and content through other codes and such)

Code:

<%@ Page Language="vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.Framework.DefaultPage" CodeFile="Default.aspx.vb" %>
<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Common.Controls" Assembly="DotNetNuke" %>
<asp:literal id="skinDocType" runat="server"></asp:literal>
<html <%=xmlns%> <%=LanguageCode%>>
<head id="Head" runat="server">
    <meta id="MetaRefresh" runat="Server" http-equiv="Refresh" name="Refresh" />
    <meta id="MetaDescription" runat="Server" name="DESCRIPTION" />
    <meta id="MetaKeywords" runat="Server" name="KEYWORDS" />
    <meta id="MetaCopyright" runat="Server" name="COPYRIGHT" />
    <meta id="MetaGenerator" runat="Server" name="GENERATOR" />
    <meta id="MetaAuthor" runat="Server" name="AUTHOR" />
    <meta name="RESOURCE-TYPE" content="DOCUMENT" />
    <meta name="DISTRIBUTION" content="GLOBAL" />
    <meta name="ROBOTS" content="INDEX, FOLLOW" />
    <meta name="REVISIT-AFTER" content="1 DAYS" />
    <meta name="RATING" content="GENERAL" />
    <meta http-equiv="PAGE-ENTER" content="RevealTrans(Duration=0,Transition=1)" />
    <style type="text/css" id="StylePlaceholder" runat="server"></style>
    <asp:placeholder id="CSS" runat="server" />
<!--[if IE 6]>
    <link href="/portals/_default/skins/emscorporateNEWHomePageSkin/ieFix.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE 7]
    <link href="/portals/_default/skins/emscorporateNEWHomePageSkin/ie7Fix.css" rel="stylesheet" type="text/css">
<![endif]-->
   
</head>
<body id="Body" runat="server" >
    <noscript></noscript>
    <dnn:Form id="Form" runat="server" ENCTYPE="multipart/form-data" style="height: 100%;" autocomplete="off">
        <asp:Label ID="SkinError" runat="server" CssClass="NormalRed" Visible="False"></asp:Label>
        <asp:PlaceHolder ID="SkinPlaceHolder" runat="server" />
        <input id="ScrollTop" runat="server" name="ScrollTop" type="hidden" />
        <input id="__dnnVariable" runat="server" name="__dnnVariable" type="hidden" />
    </dnn:Form>
</body>
</html>

And, for the skin page:

Code:

<%@ Control language="vb" CodeBehind="~/admin/Skins/skin.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>
<%@ Register TagPrefix="dnn" TagName="BANNER" Src="~/Admin/Skins/Banner.ascx" %>
<%@ Register TagPrefix="dnn" TagName="NAV" Src="~/Admin/Skins/Nav.ascx" %>
<%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LANGUAGE" Src="~/Admin/Skins/Language.ascx" %>
<%@ Register TagPrefix="dnn" TagName="CURRENTDATE" Src="~/Admin/Skins/CurrentDate.ascx" %>
<%@ Register TagPrefix="dnn" TagName="BREADCRUMB" Src="~/Admin/Skins/BreadCrumb.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" %>
<%@ Register TagPrefix="dnn" TagName="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %>
<%@ Register TagPrefix="dnn" TagName="DOTNETNUKE" Src="~/Admin/Skins/DotNetNuke.ascx" %>
<%@ Register TagPrefix="uc1" TagName="HouseMenu" Src="~/DesktopModules/HouseMenuSkinObject/HouseMenuSkinObject.ascx" %>

<script runat="server">
    Protected Sub dnnSEARCH_Load(ByVal sender As Object, ByVal e As System.EventArgs)

    End Sub

    Protected Sub dnnNAV_Load(ByVal sender As Object, ByVal e As System.EventArgs)

    End Sub
</script>

<!--[if IE 6]>
    <link href="ieFix.css" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE 7]
    <link href="ie7Fix.css" rel="stylesheet" type="text/css">
<![endif]-->

<!--<script type="text/javascript">
    if (document.createStyleSheet)
        document.createStyleSheet("<%= SkinPath %>ieFix.css");
</script>-->




    <div id="header">
        <div id="logo"><dnn:LOGO runat="server" id="dnnLOGO" /></div>
        <div id="login"><dnn:CURRENTDATE runat="server" id="dnnCURRENTDATE" /><br /><dnn:USER runat="server" id="dnnUSER" />&nbsp;or&nbsp;<dnn:LOGIN runat="server" id="dnnLOGIN" /></div>
        <div id="search"><dnn:SEARCH runat="server" id="dnnSEARCH" showWeb="False" cssclass="topcss" ShowSite="False" /></div>           
    </div>   
    
    <div id="main">   
        <!--<div class="leftSide"></div>-->
        <div class="TopLeftNavPane">
                        
                        <script type="text/javascript">
                        // Node Functions
                            if(!window.Node){
                              var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
                            }

                            function checkNode(node, filter){
                              return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
                            }

                            function getChildren(node, filter){
                              var result = new Array();
                              var children = node.childNodes;
                              for(var i = 0; i < children.length; i++){
                                if(checkNode(children[i], filter)) result[result.length] = children[i];
                              }
                              return result;
                            }

                            function getChildrenByElement(node){
                              return getChildren(node, "ELEMENT_NODE");
                            }

                            function getFirstChild(node, filter){
                              var child;
                              var children = node.childNodes;
                              for(var i = 0; i < children.length; i++){
                                child = children[i];
                                if(checkNode(child, filter)) return child;
                              }
                              return null;
                            }

                            function getFirstChildByText(node){
                              return getFirstChild(node, "TEXT_NODE");
                            }

                            function getNextSibling(node, filter){
                              for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
                                if(checkNode(sibling, filter)) return sibling;
                              }
                              return null;
                            }
                            function getNextSiblingByElement(node){
                                    return getNextSibling(node, "ELEMENT_NODE");
                            }

                            // Menu Functions & Properties

                            var activeMenu = null;

                            function showMenu() {
                              if(activeMenu){
                                activeMenu.className = "";
                                getNextSiblingByElement(activeMenu).style.display = "none";
                              }
                              if(this == activeMenu){
                                activeMenu = null;
                              } else {
                                this.className = "active";
                                getNextSiblingByElement(this).style.display = "block";
                                activeMenu = this;
                              }
                              return false;
                            }

                            function initMenu(){
                              var menus, menu, text, a, i;
                              menus = getChildrenByElement(document.getElementById("menu"));
                              for(i = 0; i < menus.length; i++){
                                menu = menus[i];
                                text = getFirstChildByText(menu);
                                a = document.createElement("a");
                                menu.replaceChild(a, text);
                                a.appendChild(text);
                                a.href = "#";
                                a.onclick = showMenu;
                                a.onfocus = function(){this.blur()};
                              }
                            }

                            if(document.createElement) window.onload = initMenu;
                        </script>
                        <ul id="menu" style="padding-left:20px;margin-top:9px;width:150px;">
                          <li style="font-size: 10pt;">page1
                            <ol style="padding-left:15px;">
                                <li style="font-size: 8pt;"><a href="http://insertlinkhere">Introduction</a></li>
                                <li style="font-size: 8pt;"><a href="http://insertlinkhere">link1</a></li>
                                <li style="font-size: 8pt;"><a href="http://insertlinkhere">link2</a></li>
                                <li style="font-size: 8pt;"><a href="http://insertlinkhere">link3t</a></li>
                            </ol>
                          </li>
                          <li style="font-size: 10pt;">page2
                            <ol style="padding-left:15px;">
                                <li style="font-size: 8pt;"><a href="http://insertlinkhere">Introduction</a></li>
                                <li style="font-size: 8pt;"><a href="http://insertlinkhere">link1</a></li>
                                <li style="font-size: 8pt;"><a href="http://insertlinkhere">link2</a></li>
                                <li style="font-size: 8pt;"><a href="http://insertlinkhere">link3</a></li>
                                <li style="font-size: 8pt;"><a href="http://insertlinkhere">link4</a></li>
                                <li style="font-size: 8pt;"><a href="http://insertlinkhere">link5</a></li>
                                <li style="font-size: 8pt;"><a href="http://insertlinkhere">link6</a></li>
                            </ol>
                          </li>
                          <li style="font-size: 10pt;">page3
                            <ol style="padding-left:15px;">
                                <li style="font-size: 8pt;"><a href="http://insertlinkhere">Introduction</a></li>
                                <li style="font-size: 8pt;"><a href="http://insertlinkhere">link1</a></li>
                                <li style="font-size: 8pt;"><a href="http://insertlinkhere">link2</a></li>
                                <li style="font-size: 8pt;"><a href="http://insertlinkhere">link3</a></li>
                                <li style="font-size: 8pt;"><a href="http://insertlinkhere">link4</a></li>
                                <li style="font-size: 8pt;"><a href="http://insertlinkhere">link5</a></li>
                                <li style="font-size: 8pt;"><a href="http://insertlinkhere">link6</a></li>
                            </ol>
                          </li>
                          <li style="font-size: 10pt;">page4
                            <ol style="padding-left:15px;">
                                <li style="font-size: 8pt;"><a href="http://insertlinkhere">Introduction</a></li>
                                <li style="font-size: 8pt;"><a href="http://insertlinkhere">link1</a></li>
                            </ol>
                          </li>
                          <li style="font-size: 10pt;">page5
                            <ol style="padding-left:15px;">
                                <li style="font-size: 8pt;"><a href="http://insertlinkhere">Introduction</a></li>
                                <li style="font-size: 8pt;"><a href="http://insertlinkhere">link2</a></li>
                                <li style="font-size: 8pt;"><a href="http://insertlinkhere">link3</a></li>
                                <li style="font-size: 8pt;"><a href="http://insertlinkhere">link4</a></li>
                                <li style="font-size: 8pt;"><a href="http://insertlinkhere">link5</a></li>
                            </ol>
                          </li>
                        </ul>
                    </div>
                <div class="TopPane" id="TopPane" runat="server" >
                    
                </div>
            <div class="LeftSidePane" id="LeftSidePane" runat="server" ></div>
            <div class="leftPane" id="LeftPane" runat="server" ></div>
            <div class="contentPane" id="ContentPane" runat="server" ></div>  
            <div class="rightPane" id="RigntPane" runat="server" ></div>
            <div class="clear"></div>
    </div>
     <div id="footer">
            <div id="footerNav">
                <div class="footerNavPane" id="FooterNavPane" runat="server" >
                </div>
                <div class="quickFindPane" id="QuickFindPane" runat="server" >
                </div>  
                <div class="contactPane" id="ContactPane" runat="server" >
                </div>        
                <div class="clear"></div>            
            </div>
            <div id="copyright">
                <dnn:COPYRIGHT runat="server" id="dnnCOPYRIGHT" />
            </div>
    </div>

Enjoy!

**Brian07002** · 12-16-2008, 05:25 PM

No tep ad

Whoops, I meant to say notepad...It will take all that jibberish code and put it to rest.

rip garbage code

**mb2000inc** · 12-16-2008, 05:49 PM

AH-HA!

I figured it out. IE 7 sucks boinkers (don't ask). In the Internet Options/Settings there's a great little button called "Restore Defaults"... it worked like a charm.....

Thanks for your input and time.

*sigh!*

I'm such a dork.

**Mick** · 01-02-2009, 05:27 AM

Use a liquid layout