CSS bit of a problem with left align in master page

**sapator** · Jan 2nd, 2011, 09:25 PM

Hi.
So i am trying to left aligh with a listbox.I'm almost there but the problem is that i have a gap after the listbox ends.
Can you help me "fill the gap"

I would like the red color to start right after the listbox.

Code:

<html xmlns="http://www.w3.org/1999/xhtml">


<head id="Head1" runat="server">
<title>My Testing Master Page</title>
  <style media="all" type="text/css">
.mylistbox {
background: lightblue;
color: Black;
font-size:medium;
height: 166px;
width: 189px;
font-weight:normal;
border: 0;
float:left;
}
.myleftheight
{
background: lightblue;
height: 0px; 
width: 189px;	
float:left;
}	
.myleftspans
{
background: red;	
height: 230px;
width: 189px;	
float:left;
}
</style>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<table cellpadding="3" border="1">
<tr bgcolor="silver">
<td colspan="2">
<h1>My Testing Home Page</h1>
</td>
</tr>
<tr>
<td>




<table class="myleftheight">
<tr class="myleftheight">


<asp:ListBox ID="ListBox1" runat="server" CssClass="mylistbox" Rows="9" AutoPostBack="true" >
<asp:ListItem Text="Hello Hello-o-o" Value="http://localhost:3333"  Enabled="true"/>
<asp:ListItem Text="Jim individuacls" Value="http://localhost:3333"  Enabled="true"/>
<asp:ListItem Text="Is it true?" Value="http://localhost:3333"  Enabled="true"/>
<asp:ListItem Text="Broken <br /> <b> orak </b>" Value="http://localhost:3333"  Enabled="true"/>
<asp:ListItem Text="OKa" Value="11"  Enabled="true"/>
<asp:ListItem Text="Soooome" Value="http://localhost:3333"  Enabled="true"/>
<asp:ListItem Text="Yes it is (I" Value="http://localhost:3333"  Enabled="true"/>
</asp:ListBox>
<td class="myleftspans" align="left" >
</td>
</tr>

</table> 

<asp:ContentPlaceHolder ID="ContentPlaceHolder1"
runat="server">
</asp:ContentPlaceHolder>
</td>
<td>
<asp:ContentPlaceHolder ID="ContentPlaceHolder2"
runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<td colspan="2">
Copyright 2011 - My Company
</td>
</tr>
</table>
</form>
</body>
</html>

Yes it has 2 ContentPlaceHolders, just ignore that, i was testing something.

Picture in next post...

**sapator** · Jan 2nd, 2011, 09:25 PM

picture:

**gep13** · Jan 3rd, 2011, 08:21 AM

Hey Sap,

The markup and CSS that you posted, doesn't result in the screen shot that you have shown.

Can you post the exact code that you are using?

Gary

**sapator** · Jan 3rd, 2011, 07:53 PM

Hi Gary.
Just ignore the calendar.I'm showing the default.aspx page and i have a calendar in the contentplaceholder.

What i think i need to modify somehow is this (+ the CSS)

Code:

<table class="myleftheight">
<tr class="myleftheight">


<asp:ListBox ID="ListBox1" runat="server" CssClass="mylistbox" Rows="9" AutoPostBack="true" >
<asp:ListItem Text="Hello Hello-o-o" Value="http://localhost:3333"  Enabled="true"/>
<asp:ListItem Text="Jim individuacls" Value="http://localhost:3333"  Enabled="true"/>
<asp:ListItem Text="Is it true?" Value="http://localhost:3333"  Enabled="true"/>
<asp:ListItem Text="Broken <br /> <b> orak </b>" Value="http://localhost:3333"  Enabled="true"/>
<asp:ListItem Text="OKa" Value="11"  Enabled="true"/>
<asp:ListItem Text="Soooome" Value="http://localhost:3333"  Enabled="true"/>
<asp:ListItem Text="Yes it is (I" Value="http://localhost:3333"  Enabled="true"/>
</asp:ListBox>
<td class="myleftspans" align="left" >
</td>
</tr>

</table>

Why is it having a "gap"?I cannot figure it out.Is the listbox doing that?Is it a default behavior and i need some other html for a left side panel?

**gep13** · Jan 4th, 2011, 03:06 AM

Hey,

It wasn't the calendar that I was referring to. When I take the code that you gave, and put it into a project, and run it, the red portion is over on the right, it doesn't sit under the left hand column.

Just want to confirm that we are talking about the same markup and CSS before continuing.

Gary

**sapator** · Jan 4th, 2011, 08:04 PM

Wha??
Ok i'll test it momentarily and will post all the code.But for now i'm like this

**sapator** · Jan 4th, 2011, 10:06 PM

....And now i'm like this:

Apparently Firefox is rendering the red portion right and iexplorer at the bottom.So because i trust firefox i did something else that works but i have a question here.
First let me show the project.

Code:

<&#37;@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!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 id="Head1" runat="server">
<title>My Testing Master Page</title>
  <style media="all" type="text/css">
.leftColumn
{
float:left;
width:189px;


}  
.mylistbox {
background: lightblue;
color: Black;
font-size:medium;
height: 166px;
width: 189px;
font-weight:normal;
border: 0;
float:left;
}
.myleftheight
{
background: red;
height: 400px; 
width: 189px;	
float:left;
}	
.myleftspans
{
background: red;	
height: 200px;
width: 150px;	
float:left;
}
</style>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<table cellpadding="3" border="1">
<tr bgcolor="silver">
<td colspan="2">
<h1>My Testing Home Page </h1>
</td>
</tr>
<tr>
<td>



 <div class="myleftheight">
 <table id="leftColumn">                               
<asp:ListBox ID="ListBox1" runat="server" CssClass="mylistbox"   Rows="9" AutoPostBack="true" >
<asp:ListItem Text="Hello Hello-o-o" Value="http://localhost:3333"  Enabled="true"/>
<asp:ListItem Text="Hello Hello-o-o" Value="http://localhost:3333"  Enabled="true"/>
<asp:ListItem Text="IHello Hello-o-o" Value="http://localhost:3333"  Enabled="true"/>
<asp:ListItem Text="Broken <br /> <b> orak </b>" Value="http://localhost:3333"  Enabled="true"/>
<asp:ListItem Text="OKa" Value="11"  Enabled="true"/>
<asp:ListItem Text="Soooo" Value="http://localhost:3333"  Enabled="true"/>
<asp:ListItem Text="Yes it is (I" Value="http://localhost:3333"  Enabled="true"/>
</asp:ListBox>    
</table>
 </div>

<asp:ContentPlaceHolder ID="ContentPlaceHolder1"
runat="server">
</asp:ContentPlaceHolder>
</td>
<td>
<asp:ContentPlaceHolder ID="ContentPlaceHolder2"
runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<td colspan="2">
Copyright 2011 - My Company
</td>
</tr>
</table>
</form>
</body>
</html>

Ok here it work on both browsers.The problem is that in firefox the calendar is shown half inside the contentplaceholder and half outside.If i expand the "My Testing Home Page" text on the master page it eventually will fit the calendar.This will not possibly be a problem because a banner will be covering all the upper title but i wonder if there is a solution.
Btw my default.aspx page markup is this:

Code:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" MasterPageFile="~/MasterPage.master" Inherits="_Default" %>

<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

 
 <div>
     <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
 </div>

</asp:Content>

Edit:I added a CSS on the table that includes the, "My testing home page", like this:

Code:

.masterexpand
{
height: 30px;		
width: 550px;
}

Ok it expands now the problem is that in firefox title is a little more expanded than iexplorer.I mean in firefox it is centered so it will take a little more height that i adjust in tr with line-height but again the spacing remains.

Ok my complete master page now with the upper title centered in firefox, without me specifying something like this:

Code:

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!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 id="Head1" runat="server">
<title>My Testing Master Page</title>
  <style media="all" type="text/css">
.leftColumn
{
float:left;
width:189px;


}  
.mylistbox {
background: lightblue;
color: Black;
font-size:medium;
height: 166px;
width: 189px;
font-weight:normal;
border: 0;
float:left;

 */
}
.myleftheight
{
background: red;
height: 400px; 
width: 189px;	
float:left;
}	
.myleftspans
{
background: red;	
height: 200px;
width: 450px;	
float:left;
}
.masterexpand
{
height: 30px;		
width: 550px;
}
.mastertr
{
	line-height: 30px;	
}

</style>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<table cellpadding="3" border="1" class="masterexpand">
<tr bgcolor="silver" class="mastertr">
<td colspan="2"  >
<h1>My Testing Home Page </h1>
</td>
</tr>
<tr>
<td>



 <div class="myleftheight">
 <table id="leftColumn">                               
<asp:ListBox ID="ListBox1" runat="server" CssClass="mylistbox"   Rows="9" AutoPostBack="true" >
<asp:ListItem Text="Hello Hello-o-o" Value="http://localhost:3333"  Enabled="true"/>
<asp:ListItem Text="Hello Hello-o-o" Value="http://localhost:3333"  Enabled="true"/>
<asp:ListItem Text="Hello Hello-o-o" Value="http://localhost:3333"  Enabled="true"/>
<asp:ListItem Text="Broken <br /> <b> orak </b>" Value="http://localhost:3333"  Enabled="true"/>
<asp:ListItem Text="OKa" Value="11"  Enabled="true"/>
<asp:ListItem Text="Soooo" Value="http://localhost:3333"  Enabled="true"/>
<asp:ListItem Text="Yes it is (I" Value="http://localhost:3333"  Enabled="true"/>
</asp:ListBox>    
</table>
 </div>




<asp:ContentPlaceHolder ID="ContentPlaceHolder1"
runat="server">
</asp:ContentPlaceHolder>
</td>
<td>
<asp:ContentPlaceHolder ID="ContentPlaceHolder2"
runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<td colspan="2">
Copyright 2011 - My Company
</td>
</tr>
</table>
</form>
</body>
</html>

Any thoughts?And also that is why i never wanted to mess with design

**sapator** · Jan 4th, 2011, 10:13 PM

Hmm.
I just sow something.
If you log out of this site, on the title it has :
To register for an Internet.com membership to receive newsletters and white papers, use the Register button ABOVE.
To participate in the message forums BELOW, click here:

The spaces are different on firefox and iexplorer.So is it a common "problem"?
I haven't taken notice because i never use iexlorer for browsing just with Visual Studio.

**sapator** · Jan 11th, 2011, 09:35 PM

Right.
Turns out that iexplorer won't display any problems.
Now what i do is using a table and div's.
Imagine the page exactly as i posted above with the exception that i use a accordion.Now the problem here is that the accordion will expand so here is the 2 problems i have.First i wanted the a accordion do expand OVER the second region, so CSS

verflow will not help.
The second problem i have is that while explorer show everything is fine, when i use firefox i see that the second region is expanding over the "Copyright 2011 - My Company" region.I believe using a table is the problem so any thought?
Here is the markup right after the master page contetplaceholder

Code:

    <form id="form1" runat="server">  
    <table cellpadding="3" border="1" class="masterexpand">  
    <tr bgcolor="silver" class="mastertr">  
    <td colspan="2"  >  
    <h1>My Testing Home Page </h1>  
    </td>  
    </tr>  
    <tr>  
    <td>  
     
   <div  class="myleftheightb">  
     <div class="myaccordionexternaldivstyle"> accordion here  
   </div>  
     <div style="display:block;" class="myleftheight">Content Here ....!!! This expand over the "Copyright 2011 - My Company" region </div>  
       <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  
        </asp:ToolkitScriptManager>  
   </div>  
   <asp:ContentPlaceHolder ID="ContentPlaceHolder1"  
   runat="server">  
  </asp:ContentPlaceHolder>  
   </td>  
   <td>  
   <asp:ContentPlaceHolder ID="ContentPlaceHolder2"  
   runat="server">  
   </asp:ContentPlaceHolder>  
   </td>  
   </tr>  
   <tr>  
   <td colspan="2">  
   Copyright 2011 - My Company  
   </td>  
   </tr>  
   </table>  
   </form>

Edit.Ignore the firefox problem.It came by having a div style="display:block;" and also a css class.If i write the "display:block;" inside the css class i don't have a problem.
I tried z index with relative positioning; between the first div with the accordion and the below div.It doesn't really work.I show that if i use top and left to pinpoint the exact position it might work but this will probably lead to problems with screen resolution or with moving something a little to the left or right(accordion will be on top of it)

**gep13** · Jan 12th, 2011, 12:41 AM

In this situation, a picture says a thousand words. Can you post a screenshot?

Gary

**sapator** · Jan 12th, 2011, 07:51 PM

Yes.As you can see,well imagine, the "Content here...!!!" will move down when i expand the accordion. Z-index makes quite a mess.Either not positioning or not steeping over.
I was thinking of trying to insert another div somewhere below the "content here..." div because the "content here..." div is hiding nicely when it expands downward to the Copyright 2011 <td>.So i was thinking of having another <td> before the 2011 <td> and use CSS overrr.Errr, hold, "overflow:hidden;" ,but i don't know where to try this.Also if i try this am i condemning my design to only stay left? I would also need a right column(static this time, thank almighty) with stuff.

P.S. Is it possible to remove some of my picture attachments from post?I don't know what posts have attachments, so how would i look for previous pics?Css design again?

Picture:

Thread: CSS bit of a problem with left align in master page

Thread Tools

Display

CSS bit of a problem with left align in master page

Re: CSS bit of a problem with left align in master page

Re: CSS bit of a problem with left align in master page

Re: CSS bit of a problem with left align in master page

Re: CSS bit of a problem with left align in master page

Re: CSS bit of a problem with left align in master page

Re: CSS bit of a problem with left align in master page

Re: CSS bit of a problem with left align in master page

Re: CSS bit of a problem with left align in master page

Re: CSS bit of a problem with left align in master page

Re: CSS bit of a problem with left align in master page

Posting Permissions