[WSG] Vertical alignment of columns
Hello,
I wonder if anyone could shed any light on this problem?
My StyleMaster created web-site is at:
http://ito.gn.apc.org
Note: this problem does not occur in Firefox 1.07--just in IE.
I have a 3 column set up with header and footer created by the
Stylemaster layout editor. I also later added a Navbar.
The problem is with the vertical alignment of the contents of the left
and right outer columns. The left column text is right justified and
the text of the right column is left justified to give a symmetrical
appearance. Column padding is 2%.
When viewing the page in the latest version of IE6 (the one that comes SP2),
the text and images lose their uniformity of vertical alignment and padding.
So on first loading any of the pages in IE6, the vertical alignment and
padding seems fine until a point is reached, say halfway down the column,
where the padding is lost and the text and images appear flush with the
border for the rest of the column downwards. This gives a kinked appearance.
If I refresh the page, the vertical alignment and padding becomes uniform
and the problem disappears until I go to another page and see the same
problem again in one or both of the columns.
I would be grateful to know if other people experience this problem when
viewing the site.
The stylesheet is as follows:
body {
padding: 0;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.4em;
font-weight: normal;
margin-left: +2%;
margin-right: +2%;
margin-top: +0%;
margin-bottom: +0%;}
p.breadcrumbs {font-size: .9em;
font-family: sans-serif;
background-color: #d39161;
border-top: solid #08d301 thin;
border-bottom: solid #08d301 thin;}
p.breadcrumbs a:link {color: #3659f1;}
p.breadcrumbs a:visited {color: #3659f1;}
p.breadcrumbs a:hover {color: #43d55c;}
.currentpage {color: #e9f01d;}
span.separator {color: #c91ad3;
font-size: .9em;}
.bold {font-weight: bold}
h1 {font-family: Verdana, Helvetica, Arial, sans-serif ;
color: #009966;
font-size: 140%;
font-weight: bold;
font-style: normal;
font-family: Verdana, Helvetica, Arial, sans-serif;}
h2 {font-family: Verdana, Helvetica, Arial, sans-serif;
color: #009966;
font-size: 130%;
font-weight: bold;
font-style: normal;}
h3 {color: #6a4723;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 120%;
font-weight: bold;
font-style: normal;}
h4 {color: #00;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 110%;
font-weight: bold;
font-style: normal;}
h5 {color: #00;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 105%;
font-weight: bolder;
font-style: normal;}
h6 {color: #00;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 100%;
font-weight: bold;
font-style: normal;}
img {border: 4px #c58240 solid;}
a:link {color: #ff;
text-decoration: underline;}
a:visited {color: #80;
text-decoration: underline;}
a:hover {color: #e87d3b;
text-decoration: underline;}
div#navbar {font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 180%;
font-weight: bold;
text-align: center;
background-color: #F0F0D6;
font-weight: bold;
padding: 10px;
text-decoration: none;
margin: +20px;
border: #61bb11 solid;}
#navbar ul li a:link {color: #6a4723;
display: inline;
text-decoration: none;}
#navbar ul li a:visited {color: #d58543;
display: inline;
text-decoration: none;}
#navbar ul li a:hover {color: #27cb5d;
display: inline;
text-decoration: none;}
#navbar a.current {border-right: none ;
text-decoration: none;}
#navbar ul li {margin: 0px;
padding: 20px;
list-style-type: none;
display: inline;
text-decoration: none;}
#navbar ul {margin: 0px;
padding: 0px;}
div#header {padding: 2%;
text-align: center;
background-color: #e0ffe7;
color: #00;
margin-bottom: 20px;
border: #61bb11 solid}
div#footer {padding: 2%;
text-align: center;
clear: both;
background-color: #ff;
color: #fffaf0;
border: #61bb11 none;}
div#maincontent {padding: 2%;
text-align: left;
margin-right: 22%;
margin-left: 22%;
background-color: #ff;
margin-bottom: 0px;
margin-top: 0px;
}
div#leftcolumn {padding: 2%;
float: left;
text-align: right;
background-color: #F0F0D6;
width: 17%;
cursor: auto;
border: #61bb11 solid;
}
div#rightcolumn {padding: 2%;
float: right;
text-align: left;
background-color: #F0F0D6;
width: 17%;
cursor: auto;
border: #61bb11 solid;
}
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
[WSG] vertical alignment
Hey list,
Since ditching tables I've lost the ability of vertical alignment, so
I've been using line heights for vertical positioning.
For vertically centred, this works best in IE. By setting a line
height in px, font resizing doesnt affect this value and the text
stays perfectly aligned in the middle as it grows.
eg.
#menu li {
list-style: none;
margin: 0;
padding: 0;
height: 60px;
line-height: 30px;
}
How do I achieve this in firefox and other browsers?
Have I given up too quickly on 'vertical-align'? Is there something
i'm missing which is preventing it from working?
thanks guys
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] vertical alignment
Duncan Stigwood wrote:
Have I given up too quickly on 'vertical-align'? Is there something
i'm missing which is preventing it from working?
if memory serves me well, which it tricks me sometimes, i think you can
do this in your css:
{display:table-cell;vertical-align:center;}
someone correct me if i'm wrong, please.
hth,
dwain
--
Dwain Alford
[EMAIL PROTECTED]
http://www.alforddesigngroup.com
The Savior replied;
There is no such thing as sin;...
'The Gospel of Mary of Magdala'
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] vertical alignment
But it doesn't work in IE . . . , naturally.
Bob
dwain alford wrote:
Duncan Stigwood wrote:
Have I given up too quickly on 'vertical-align'? Is there something
i'm missing which is preventing it from working?
if memory serves me well, which it tricks me sometimes, i think you
can do this in your css:
{display:table-cell;vertical-align:center;}
someone correct me if i'm wrong, please.
hth,
dwain
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] vertical alignment
Have I given up too quickly on 'vertical-align'? Is there something i'm missing which is preventing it from working? Its own specification. See the specs which display values use the vertical-align. -- Jan Brasna aka JohnyB :: www.alphanumeric.cz | www.janbrasna.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] vertical alignment
But it doesn't work in IE . . . , naturally. http://www.jakpsatweb.cz/css/css-vertical-center-solution.html -- Jan Brasna aka JohnyB :: www.alphanumeric.cz | www.janbrasna.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] vertical alignment
designer wrote:
But it doesn't work in IE . . . , naturally.
Bob
dwain alford wrote:
Duncan Stigwood wrote:
Have I given up too quickly on 'vertical-align'? Is there something
i'm missing which is preventing it from working?
if memory serves me well, which it tricks me sometimes, i think you
can do this in your css:
{display:table-cell;vertical-align:center;}
figures, but at least it works in ff.
dwain
--
Dwain Alford
[EMAIL PROTECTED]
http://www.alforddesigngroup.com
The Savior replied;
There is no such thing as sin;...
'The Gospel of Mary of Magdala'
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] vertical alignment
that's perfect then. because in IE it doesnt resize a px line-height. Thanks guys :) ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Vertical Alignment + sliding doors
Hi Darren I think the only way to solve your problem is dynamic, since the buttons are renderd dynamic. I realize this has got nothing to do with html, css or webstandards but it is an answer to your problem so i'll give it to you anyway. You have one known variable: the max number of characters that fit on one line (=x). If the number of characters = x use class=y else use class=z. Class y has a margin-top which makes a 'one-line-link' align vertically. Class z has a margin-top which makes a 'two-line-link' align vertically. I think that will solve your peoblem, don't you think. Rilke. Darren Wood wrote: Hello World! I've been struggling with a vertical alignment issue...have a look at the links below: http://shopperanswers.dev.netconcepts.com/understanding-your-shoppers.php [line 86] http://shopperanswers.dev.netconcepts.com/includes/default.css [line 288] i'm having an issue the with tab looking things at the bottom of the body text [Observational research, Intercept amp; exit interviews, Integration...] Those are links, they are also dynamic (so I cant just wack a class on the li's)...some of them wrap and some dont. What i want to do is have them vertically aligned regardless of whether they're on one line or two...( hope that makes sense.) Any ideas? Thanks in advance Darren ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Vertical Alignment + sliding doors
Hello World! I've been struggling with a vertical alignment issue...have a look at the links below: http://shopperanswers.dev.netconcepts.com/understanding-your-shoppers.php [line 86] http://shopperanswers.dev.netconcepts.com/includes/default.css [line 288] i'm having an issue the with tab looking things at the bottom of the body text [Observational research, Intercept amp; exit interviews, Integration...] Those are links, they are also dynamic (so I cant just wack a class on the li's)...some of them wrap and some dont. What i want to do is have them vertically aligned regardless of whether they're on one line or two...( hope that makes sense.) Any ideas? Thanks in advance Darren ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Vertical Alignment + sliding doors
Hi Darren Not entirely sure of the effect you're looking for, but #navSub li a looks to be missing a width: 100px; The effect of relying on max-width is that IE6/Win doesn't wrap the tabs and Opera 8.02/Win collapses all the a tags together on the left-hand side. Firefox 1.0.6/Win appears to render OK. Cheers Peter Darren Wood wrote: Hello World! I've been struggling with a vertical alignment issue...have a look at the links below: http://shopperanswers.dev.netconcepts.com/understanding-your-shoppers.php [line 86] http://shopperanswers.dev.netconcepts.com/includes/default.css [line 288] i'm having an issue the with tab looking things at the bottom of the body text [Observational research, Intercept amp; exit interviews, Integration...] Those are links, they are also dynamic (so I cant just wack a class on the li's)...some of them wrap and some dont. What i want to do is have them vertically aligned regardless of whether they're on one line or two...( hope that makes sense.) Any ideas? Thanks in advance Darren ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** -- Peter Asquith http://www.wasabicube.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Vertical Alignment of Relatively Sized Text
Hello, I have a small (some may say petty) problem with the vertical alignment of relatively sized text. My query relates to the following; Markup: http://www.paulfarrell.com.au/dev/index.php CSS:http://www.paulfarrell.com.au/dev/mainstyle.css I have a series of floats in a header. In particular I have a string of text on the right marking the spot for a date script output. I would like to know if anyone knows a way I can maintain an alignment where the bottom of the date string is aligned to the bottom of the text in the logo as a user increases/decreases font size. At the moment I have it set up so the header expands downwards as the text expands, and would be happy with this if I can't find a solution. I thought I would throw it up in this list in the off chance someone has a simple solution. Regards Paul Farrell ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Vertical Alignment of Relatively Sized Text
Paul Farrell wrote: I have a series of floats in a header. In particular I have a string of text on the right marking the spot for a date script output. I would like to know if anyone knows a way I can maintain an alignment where the bottom of the date string is aligned to the bottom of the text in the logo as a user increases/decreases font size. Hi Paul, You might want to check out Doug Bowman's article on the positioning solution for the menu at http://www.adaptivepath.com: http://www.stopdesign.com/articles/absolute/ In this article is the answer to your question. While it might not be an exact 'baseline' match, I think you can get very close if you tinker with the technique Doug describes. (For something totally different: I would advice against using [h3] for your date script output. Use a [span] or [div] instead, maybe a [p], but reserve [h3] for a real heading at the third level of a document structure.) Good luck, Jeroen -- vizi fotografie grafisch ontwerp - http://www.vizi.nl/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
