CSS bit of a problem with left align in master page
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" :D
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...
1 Attachment(s)
Re: CSS bit of a problem with left align in master page
Re: CSS bit of a problem with left align in master page
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
Re: CSS bit of a problem with left align in master page
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?
Re: CSS bit of a problem with left align in master page
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
Re: CSS bit of a problem with left align in master page
Wha??
Ok i'll test it momentarily and will post all the code.But for now i'm like this :sick:
Re: CSS bit of a problem with left align in master page
....And now i'm like this: :mad:
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:
<%@ 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 :mad:
Re: CSS bit of a problem with left align in master page
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.
Re: CSS bit of a problem with left align in master page
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:overflow 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)
Re: CSS bit of a problem with left align in master page
In this situation, a picture says a thousand words. Can you post a screenshot?
Gary
1 Attachment(s)
Re: CSS bit of a problem with left align in master page
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? :p
Picture:
