The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Attempt @ 2 Column ELASTIC Layout- Issues w/IE6
oldbrowsers_suck
post Jun 28 2009, 11:46 AM
Post #1





Group: Members
Posts: 7
Joined: 28-June 09
Member No.: 9,010
From what I understand, there are different ways to set up a 2-column elastic layout.
n-I used percentages as my widths, floated one of the columns (left one) and just recently added a min-and max-width to see if that would fix the problem (I have no way of testing this either since I don't have IE6on my comp....)
My client tested the site on a library computer running IE 7 and the right column is getting pushed down, instead of staying aligned with the left column. As I am running IE8 with the compatibility on and off it looks good, I don't wee how IE 7 on a library computer would change the layout so much that it would do what it did.
It will be probably painfully clear to a good web designer that my CSS is to blame, but I am a novice, working on a 2 column elastic layout for the first time....

My CSS:
#main-content {
width: 99%;
max-width: 85em;
min-width: 552px;
margin-right: auto;
margin-left: auto;
}
#main-contentRIGHT {
width: 30%;
margin-left: 70%;
z-index: 1;
margin-top: 122px;
}

#main-contentLEFT {
float: left;
width: 68%;
z-index: 1;
clear: left;
margin-top: 100px;
margin-right: 2%;
}

#main-contentMIDDLE {
z-index: 1;
padding-top: 100px;
}

The site is a networking site, not live yet, and requires you to sign up in order to access the pages.....If you want to take a look at the pages Register as an entrepreneur and check out the pages:
The Morgen Group
Any help/thoughts/suggestions (other than stick with the graphic design gig and not web design- believe me I know!) would be greatly appreciated...!
THX,
Emily

This post has been edited by oldbrowsers_suck: Jun 28 2009, 11:49 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 28 2009, 01:17 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
I have IE6 but I don't want to register and the page you link to returns 404 anyway.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
oldbrowsers_suck
post Jun 28 2009, 01:33 PM
Post #3





Group: Members
Posts: 7
Joined: 28-June 09
Member No.: 9,010
I understand completely, I am just trying to get some help with a problem in my CSS. Did you see anything strange in my CSS?
The link should have been www.themorgengroup.com/register
Sorry about that. I was in a hurry when I posted my link~!~
Emily
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 28 2009, 01:46 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
The CSS doesn't say much out of context.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
oldbrowsers_suck
post Jun 28 2009, 01:52 PM
Post #5





Group: Members
Posts: 7
Joined: 28-June 09
Member No.: 9,010
Here is the HTML of one of the pages using the two-column elastic layout and is giving me the problem. Thanks!!
Emily


<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!--#include file="../ScriptLibrary/global.asp" -->
<!--#include file="../ScriptLibrary/logout.asp" -->
<!--#include file="../Connections/connSQL.asp" -->
<!--#include file="../ScriptLibrary/check_https.asp" -->
<!--#include file="ScriptLibrary/invt_methods.asp" -->

<%
'Make Sure this user is logged in
CheckLogin()
'Make sure page is not secure for performance
ForceHTTP()
%>

<%
' *** Get UserID
Dim UserID
UserID = Session("TMG_INVT_UserID")

'Get first name
Dim m_FirstName
m_FirstName = GetFirstName(UserID)
%>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome to The Morgen Group</title>
<link href="../database_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main-content">
<div id="header"><a href="../index.html" target="_blank"><img src="../images/header.jpg" width="301" height="110" border="0" /></a>
<h1>Welcome <%= m_FirstName %>! - <a href="<%= MM_Logout %>">Log out</a></h1>
<div align="left"><%= TrialHTML %></div>
<hr color="#d9c97b"/><script language="JavaScript" type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

<ul id="navbar">
<li><a href="/invt/welcome.asp">Home</a>
<li><a href="/invt/profile.asp">Profile</a><ul>
<li><a href="/invt/profile.asp">View Profile</a></li>
<li><a href="/invt/updateprofile.asp">Update Profile</a></li></ul>
<li><a href="#">Search</a><ul>
<li><a href="/invt/searchresume.asp">Search Resumes</a></li>
<li><a href="/invt/searchplan.asp">Search Business Plans</a></li>
<li><a href="/invt/searchidea.asp">Search Business Ideas</a></li></ul>
</li>
</ul>
</div>
<div id="main-contentLEFT">
<p class="papyrusCentered">Welcome to your home page. Here you can begin to take advantage of the many services The Morgen Group offers you. </p>
<br />
<p><span class="papyrus">Find Talent.</span><br />
Your membership allows you to search <em>deal flow with ease. </em>There is no limit placed on your searching abilities and you can specify your search to your investment interest. Feel free to view any and all profiles relevant to your needs.</p>
<p><span class="papyrus">Download Relevant Materials.</span><br />
All business related documents posted by our entrepreneurs are viewable and available for download. Photos of current businesses or projects associated with the entrepreneur may also be included and available. The Power Point capability allows you to access and review thorough presentations, on your time. </p>
<p><span class="papyrus">Make Contact. </span><br />
Each entrepreneur's contact information is accessible based on your needs. Contact who you like, whenever you like - the choice is yours!</p>
<p><span class="papyrus">Talk Up the Forum.</span><br />
Take full advantage of your membership by capitalizing on our business forum. At the forum, you may access any of ongoing business conversations or perhaps initiate your own. </p>
<p><span class="papyrus">Enjoy Rewards.</span><br />
To show our appreciation for your membership, we extend complimentary advertising for your company within our site – this service remains free through the life of your membership.
Simply email your logo to <a href="mailto:advertise@themorgengroup.com">advertise@themorgengroup.com</a>. Please be certain to include your name and the email address currently on file. </p>
<p align="left"><em class="papyrus"><strong>Obtain Assistance</strong></em>.<br />
If you have any questions concerning your business profile, contact us at <a href="mailto:accounts@themorgengroup.com" title="mailto:accounts@themorgengroup.com">accounts@themorgengroup.com</a>. <br />Visit often; as we often add new features to better enhance your experience.<br /><br />
<p class="papyrusCentered">Once again, thank you for joining The Morgen Group! <br />
<span class="papyrussmall">...We&rsquo;re happy to have you in network.</span> </p>
</div>
<div id="main-contentRIGHT">Visit our Sponsors:<br /><hr color="#d9c97b" />
<!-- #BeginLibraryItem "/Library/Sponsor Links.lbi" -->
<div style="width:100%; overflow:auto;height:206px;">
<table width="22%" align="center" cellpadding="3">
<tr>
<td width="50%"><div align="center"><a href="http://genevish-graphics.com/" target="_blank"><img src="/images/links/button_gg.gif" width="120" height="60" border="0" style="border-right: solid 2px #432c15; border-bottom: solid 2px #432c15" alt="Graphic Design Services" title="Graphic Design Services"/></a></div></td>
<td width="50%"><div align="center"><a href="http://www.barttiming.com" target="_blank"><img src="/images/links/button_brs.gif" width="120" height="60" border="0" style="border-right: solid 2px #432c15; border-bottom: solid 2px #432c15" alt="Bart Timing Service" title="Bart Timing Service"/></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="http://www.cashflowrollercoaster.com/" target="_blank"><img src="../images/links/button_cfr.gif" width="120" height="60" border="0" style="border-right: solid 2px #432c15; border-bottom: solid 2px #432c15" alt="Financial Tools for the Business Professional- The Jordan Result" title="Financial Tools for the Business Professional- The Jordan Result"/></a></div></td>
<td><div align="center"><a href="http://www.floridahome360.net/" target="_blank"><img src="/images/links/button_fh360.gif" width="120" height="60" border="0" style="border-right: solid 2px #432c15; border-bottom: solid 2px #432c15" alt="Your Complete Home Improvement Source in Tampa Bay" title="Your Complete Home Improvement Source in Tampa Bay"/></a></div></td>
</tr>
<tr>
<td><div align="center"><img src="/images/links/button_placeholder.gif" width="120" height="60" border="0" style="border-right: solid 2px #432c15; border-bottom: solid 2px #432c15"/></div></td>
<td><div align="center"><img src="/images/links/button_placeholder.gif" width="120" height="60" border="0" style="border-right: solid 2px #432c15; border-bottom: solid 2px #432c15"/></div></td>
</tr>
<tr>
<td><div align="center"><img src="/images/links/button_placeholder.gif" width="120" height="60" border="0" style="border-right: solid 2px #432c15; border-bottom: solid 2px #432c15"/></div></td>
<td><div align="center"><img src="/images/links/button_placeholder.gif" width="120" height="60" border="0" style="border-right: solid 2px #432c15; border-bottom: solid 2px #432c15"/></div></td>
</tr>
<tr>
<td><div align="center"><img src="/images/links/button_placeholder.gif" width="120" height="60" border="0" style="border-right: solid 2px #432c15; border-bottom: solid 2px #432c15"/></div></td>
<td><div align="center"><img src="/images/links/button_placeholder.gif" width="120" height="60" border="0" style="border-right: solid 2px #432c15; border-bottom: solid 2px #432c15"/></div></td>
</tr>
</table>
</div>
<!-- #EndLibraryItem -->
<br /> <hr color="#d9c97b" />
</div>
<div id="footer">
<hr color="#d9c97b" />Investor Resources<br /><!-- #BeginLibraryItem "/Library/invt_links.lbi" -->
<div style="width:100%; vertical-align:bottom">
<table width="100%">
<tr>
<td colspan="4">&nbsp;</td>
</tr>
<tr>
<td><div align="center"><a href="http://www.marketwatch.com" target="_blank"><img src="../images/links/button_mw.gif" alt="Market Watch" title="Market Watch"width="95" height="48" border="0" style="border-right: solid 2px #432c15; border-bottom: solid 2px #432c15" /></a></div></td>
<td><div align="center"><a href="http://www.business.gov/" target="_blank"></a><a href="http://online.wsj.com/public/us" target="_blank"><img src="../images/links/button_wsj.gif" alt="The Wall Street Journal" title="The Wall Street Journal"width="95" height="48" border="0" style="border-right: solid 2px #432c15; border-bottom: solid 2px #432c15" /></a></div></td>
<td><div align="center"><a href="http://www.uschamber.com/default.htm" target="_blank"></a><a href="http://www.sec.gov" target="_blank"><img src="../images/links/button_sec.gif" width="95" height="48" border="0" alt="U.S. Securities and Exchange Commission" title="U.S. Securities and Exchange Commission" style="border-right: solid 2px #432c15; border-bottom: solid 2px #432c15" /></a></div></td>
<td><div align="center"><a href="http://www.treasurydirect.gov/" target="_blank"><img src="/images/links/button_td.gif" style="border-right: solid 2px #432c15; border-bottom: solid 2px #432c15"alt="Treasury Direct" title="Treasury Direct" width="95" height="45" border="0"/></a></div></td>
<td><div align="center"></div></td>
</tr>
</table>
</div><!-- #EndLibraryItem --></div>
</div>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
wacssabe
post Jun 28 2009, 03:19 PM
Post #6


Member
***

Group: Members
Posts: 48
Joined: 29-May 09
Member No.: 8,740
Hi, i had a simmilar problem. I remember the right div would flush down if i resized the window. That was because if for example left nav is min-width 10 em, and right nav has 80% width, when you resize the web it takes 80% of the page, a larger size than the pagewidth(em)-nav_minwidth(em). What i did is setting a min-width to the body in em's, so the 80% will never get up to a bigger than pagewidth-nav_minwidth. Besides, setting the body min-width in em's will prevent right nav flushing too because changing font-size in a small window where left nav is using its min-width with ems will also make a bigger body.

This post has been edited by wacssabe: Jun 28 2009, 03:21 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 28 2009, 04:32 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Start with fixing the HTML errors.
http://www.htmlhelp.com/tools/validator/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
oldbrowsers_suck
post Jun 28 2009, 05:51 PM
Post #8





Group: Members
Posts: 7
Joined: 28-June 09
Member No.: 9,010
It validated fine.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 28 2009, 07:21 PM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Maybe it did at some point. What you posted above doesn't. There are structural errors, so you should fix them.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
oldbrowsers_suck
post Jun 28 2009, 07:24 PM
Post #10





Group: Members
Posts: 7
Joined: 28-June 09
Member No.: 9,010
QUOTE(pandy @ Jun 28 2009, 08:21 PM) *

Maybe it did at some point. What you posted above doesn't. There are structural errors, so you should fix them.


Really- then the WDG validator doesnt work because the only things that didnt validate are little things like no alt tag etc - No structural probs at all.....

Document Checked

* URL: https://themorgengroup.c8.ixwebhosting.com/...ntr/welcome.asp
* Character encoding: ISO-8859-1
* Level of HTML: XHTML 1.0 Transitional

Errors and Warnings

* Line 10, character 129:

... 01" height="110" border="0" /></a>
^

Error: required attribute alt not specified
* Line 12, character 12:

<hr color="#d9c97b"/><br />
^

Error: there is no attribute color for this element (in this HTML version)
* Line 15, character 49:

... in" name="login" method="POST" action="/entr/index.asp?refer ...
^

Error: value of attribute method cannot be POST; must be one of get, post
* Line 54, character 75:

... g" width="855" height="460" />
^

Error: required attribute alt not specified


This post has been edited by oldbrowsers_suck: Jun 28 2009, 07:26 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
oldbrowsers_suck
post Jun 28 2009, 07:29 PM
Post #11





Group: Members
Posts: 7
Joined: 28-June 09
Member No.: 9,010
Validated fine in Dreamweaver too, so what specifically do you notice that is not structurally sound? I don't claim to be an expert, but I really don't know what you are referring to!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 28 2009, 10:21 PM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Try to validate the page you posted the markup for instead of the login page.

QUOTE
Document Checked

* URL: https://themorgengroup.c8.ixwebhosting.com/...ntr/welcome.asp
* Character encoding: ISO-8859-1
* Level of HTML: XHTML 1.0 Transitional
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 24th April 2024 - 08:33 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC