6 replies [Last post]
Twood
Offline
newbie
Last seen: 12 years 21 weeks ago
Joined: 2008-02-07
Posts: 3
Points: 0

Hi,

I'm still getting my footing with CSS and I am attempting to lay out 3 250px wide divs side by side inside of a fixed div called "footer". For some reason my left and center column are correct in the document flow but the right column is getting kicked down for some reason.

I played with negative margins and could move the right column up where I needed but I would prefer a more unhacked approach.

I have other "3 column layouts" inside of my main "content" div and they lay out properly and stay middle aligned with one another when showing side by side(although sometimes center has to come last of the three divs). I applied similar css markup inside of this div and I could not acheive what I was looking for. After moving things around I still haven't gotten to what I would like. This footer has a fixed position at Left:0 Right:0 and bottom:0 and I think this is the reason I am having issues is because of the fixed position.

A pic of this issue is at http://www.tannersspace.com/images/ff2ie7.jpg. You can also see my next issue to sort out, that it is hiding my grid content. I have overflow on and have increased padding and top margins on the footer div and the div that touches the top of "footer".

If someone has the time to look at this and explain why these issues are happening it will help me very much to finish my project and to clear up some concepts that I have not fully understood as of this time.

-------------!html--------------------------

------------!CSS ----------------------
#wrapper
{
/* hack for IE 6 (if not present, content shows below footer)*/
overflow: visible auto;
text-align: center;
margin: 0px auto;
vertical-align:middle;
display: block;
height: 100% auto;
width: 950px ;
min-height:100%;
padding-bottom: 10px;
margin-bottom: -20px; */this might be what's screwing me over/*
}
#footer
{
/* if clear:left is not present, it does not know where to position div */
/* it will try to position it to the left of wrapper */
clear: both;
font-size: 1em;
text-transform: uppercase;
text-align: center;
background: Silver;
width: auto;
position:fixed;
bottom: 0; left: 0; right: 0;
border: solid 1px black;
padding: 5px;
color: black;
height: auto;
}
#left { float:left;
width:200px;
padding:8px;
}
#right { float:right;
width:200px;
padding:8px;
}
#center { margin-right:215px;
margin-left:215px;
padding:8px;
}

***** I figured you didn't want ALL of my html markup and css markup, but if it is determined it is needed to drill down to the issue I will post it promptly*****

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 16 weeks 17 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Twood wrote:***** I figured

Twood wrote:
***** I figured you didn't want ALL of my html markup and css markup, but if it is determined it is needed to drill down to the issue I will post it promptly*****

It does say at the top of the forum "all" so yes, please post it all, or better yet a link to the page Wink

Verschwindende wrote:
  • CSS doesn't make pies

Twood
Offline
newbie
Last seen: 12 years 21 weeks ago
Joined: 2008-02-07
Posts: 3
Points: 0

As requested, Here is my

As requested, Here is my full stylesheet, my masterpage follows..
..sorry no link to the actual page(Drunk is available. This is part of an interface/maintenance package and it not available to the outside world.

body
{
font-family: Lucida Sans, Verdana, Arial, SunSans-Regular, Sans-Serif;
font-size: 85%;
margin: 0 auto;
background-color: White;
height: 100%;
text-align:center;
position: relative; /*** Let's be nice to IE ***/
width: 100%; /*** Content Width ***/
display: table; /*** For non-IE browsers ***/
padding: 0;
}
form
{
text-align:center;
}
html{height:100%; margin:0; padding:0;}
p
{
font-size: 1.0em;
height: 1%;
}
/* Three-pixel bug fix: http://www.positioniseverything.net/explorer/threepxtest.html */
* html p
{
height: 1%;
}

h1
{
text-align: right;
font-size: 2em;
font-weight: bolder;
}
h2
{
font-size: 1.1em;
}

h3
{
font-size: 1em;
}

h4
{
font-size: .9em;
}

/* LINK VISTED HOVER ACTIVE selectors must remain in this order to work */
a:link
{
color: yellow;
}

a:visited
{
color: Red;
}

a:hover
{
text-decoration: none;
}

a:active
{
color: green;
}
/* BEGIN AREA INSIDE BODY */

.bannerwidth
{
max-height: 60px;
max-width: 1100px;

}

#headerdiv
{
font-size: 1em;
background: url(six_0.gif);
color: White;
width: auto;
height: auto;
border: solid 1px black;
padding: 5px 0px 5px 0px;
text-align:left;
}
/* Begin stuff for menu */
/* menu bar styles */
#menu-container
{
padding: 0 5px 0 5px;
border-bottom: 1px solid #FFFFFF;
}
.menu-strip
{
font-size: 1.2em;
margin: 0px;
padding: 0 10px 0 10px;
vertical-align: middle;
height: auto;

}
/* all levels styles */
.menu-level1, .menu-level2, .menu-level3
{
padding: 0 3px 0 3px;
margin: 0px;

}
.menu-level1 a:link, .menu-level1 a:visited, .menu-level1 a:hover, .menu-level1 a:active
{
color: Silver;
}

/* menu level 1 styles */
.menu-level1
{
padding: 3px;
margin: 0px;
}
.menu-level1-selected
{
/* need to find a way to change the color here*/
text-decoration: none;
height: auto;
}
.menu-level1-hover
{
background: #990000;
width: auto;
height: auto;
}
.menu-level1-hover a:link, .menu-level1-hover a:visited, .menu-level1-hover a:hover, .menu-level1-hover a:active
{
color: white;
}

/* menu level 2 styles */
.menu-level2-submenu
{
margin: 0px;
padding: 0px;
}
.menu-level2
{
/* need to use a small no repeat bottom left image of the M */

background-color: #9D9D9D;
text-align:left;
padding: 5px;
margin: 0px;
width: 100%;
text-decoration: none;
}
.menu-level2-selected
{
/* background-color: Red; color: White;*/
}
.menu-level2-hover
{
background: #990000;
}
.menu-level2 a:link, .menu-level2 a:visited, .menu-level2 a:hover, .menu-level2 a:active
{
color: Black;
}
.menu-level2-hover a:link, .menu-level2-hover a:visited, .menu-level2-hover a:hover, .menu-level2-hover a:active
{
color: white;
}

#breadcrumbandstatus
{

background-image: url(breadcrumbandstatusgradient.png);
background-repeat:repeat-x;
opacity: 80;
filter: alpha(opacity=70);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
display:block;
vertical-align:middle;
padding: 5px 0px 5px 0px;
border-top: solid 1px white;
height: 40px;
}
.breadcrumb
{

float:left;
font-size: 1em;
text-align: left;
text-transform: uppercase;
padding-left: 5px;
color: white;
}
.status
{
float:right;
color:White;
padding-right: 5px;
}
#wrapper
{
/* hack for IE 6 (if not present, content shows below footer)*/
overflow: visible;
text-align: center;
margin: 0px auto;
vertical-align:middle;
display: block;
height: 100% auto;
width: 950px ;
min-height:100%;
padding-bottom: 10px;
margin-bottom: -20px;
}

/* you can use these divs to stack side by side */

/* USE FOR 3 COLUMNS only!!!! */
/* on your page the center *****MUST***** be first!!!!*/
/* or the layout takes a nosedive */
#left { float:left;
width:200px;
padding:8px;
}
#right { float:right;
width:200px;
padding:8px;
}
#center { margin-right:215px;
margin-left:215px;
padding:8px;
}

/* USE FOR 2 COLUMNS only!!!! */
/* on your page the center *****MUST***** be first!!!!*/
/* or the layout takes a nosedive */
#mecherrorleft { float:left;
width:300px;
padding:8px;
}
#mecherrorright { float:right;
width:300px;
padding:8px;
}
#mecherrorcenter { margin-right:315px;
margin-left:315px;
padding:8px;
}
/* end of 3 column div layout area */

#footer
{
/* if clear:left is not present, it does not know where to position div */ /* it will try to position it to the left of wrapper */
clear: both;
font-size: 1em;
text-transform: uppercase;
text-align: center;
background: Silver;
width: auto;
position:fixed;
bottom: 0; left: 0; right: 0;
border: solid 1px black;
padding: 5px;
color: black;
height: auto;
}

#footer a
{
color: Yellow;
}
/* end of DIV and body */

.widthauto
{
width: 100% auto;
}
.centered
{
display:table;
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: middle;
padding-bottom:20px;
}
.left
{
display: inline;
text-align: left;
}
.right
{
display: inline;
text-align: right;
vertical-align: inherit;
float: right;
}
.alignleft{text-align:left; }
.alignright{text-align:right;}
.floatleft{float:left;}
.floatright{float:right;}
.clearbr{clear:both;}
.clearright{clear:right;}
.contentpanel{opacity: 80;
filter: alpha(opacity=70);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

td#infolabel
{
text-align: center;
background-color: graytext;
height: 19px;
}

.mytdheader
{
text-align: center;
border: Solid 1px Black;
color: White;
background-color: Black;
font-size: 1em;
font-family: Sans-Serif;
font-weight: bold;
height: 15px;
padding: 0 0 0 0;
table-layout: auto;
}
.mytd
{
text-align: center;
height: 10px;
border: Solid 1px black;
color: black;
width: 90px;
background-color: white;
font-size: 1em;
font-family: Times New Roman;
}
/* these classes are used with the ajax accordion */
.accordionHeader
{
border: 1px solid #2F4F4F;
color: white;
background-color: silver;
font-family: Arial, Sans-Serif;
font-size: .7em;
font-weight: bold;
padding: 5px;
margin: 5px auto;
cursor: pointer;
text-align: center;
}
.accordionContent
{
background-color: silver;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
margin: 0 auto;
padding-top: 10px;
text-align: center;
display: table;
}
.accordionLink
{
color: black;
}

.paddedimage
{
padding: 0 0 5px 0;
width:auto;
}
.zeroed_right
{margin: 0px; padding: 0px; right:0;}

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" AutoEventWireup="false"
EnableViewState="true" %>
<%@ Register TagPrefix="uc1" TagName="ChuteStatus" Src="ChuteStatus.ascx" %>
<%@ Register TagPrefix="uc1" TagName="JackPotTotal" Src="JackPotTotal.ascx" %>
<%@ Register TagPrefix="uc1" TagName="AlarmTotal" Src="AlarmTotal.ascx" %>
<%@ Register TagPrefix="uc1" TagName="MechErrorSummary" Src="MechErrorSummary.ascx" %>

Mantissa Admin Tools



top.window.moveTo(0,0);
if (document.all)
{ top.window.resizeTo(screen.availWidth,screen.availHeight); }
else if
(document.layers || document.getElementById)
{
if
(top.window.outerHeight < screen.availHeight || top.window.outerWidth <
screen.availWidth)
{ top.window.outerHeight = top.screen.availHeight;
top.window.outerWidth = top.screen.availWidth; }
}



















































thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 16 weeks 17 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Parsed output, not ASP

Parsed output, not ASP source code please Wink

Verschwindende wrote:
  • CSS doesn't make pies

Twood
Offline
newbie
Last seen: 12 years 21 weeks ago
Joined: 2008-02-07
Posts: 3
Points: 0

not sure what you mean.

not sure what you mean. This is why I only posted a snippet of my code originally to leave out the asp stuff.

I will just figure it out on my own. Your forum has too many rules and I am only looking for quick help.

good day.

jinoturistica
Offline
Enthusiast
Jinotega, Nicaragua
Last seen: 12 years 19 weeks ago
Jinotega, Nicaragua
Timezone: GMT-6
Joined: 2007-11-16
Posts: 152
Points: 0

asp /parsed

We need to see the code that the browser sees.

Easiest way is to provide a link to a working page.

second easiest is to display the page then view source. Copy that to here inside <code> tags. That eliminates all questions about server system, maintenance levels, php/asp/net/iis/apache.

We offer CSS styling assistance, servers are off topic and we certainly will not have your specific server configuration available to simulate your entire situation.

Give us what we ask for and assistance will be fast and accurate.

Just doin' my best at www.jinotega.com
Tony Robins

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 16 weeks 17 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Twood wrote:I will just

Twood wrote:
I will just figure it out on my own. Your forum has too many rules and I am only looking for quick help.

we can't help at all unless you give us what we ask for Wink

Verschwindende wrote:
  • CSS doesn't make pies