Greetings,
My ongoing thanks to all who've helped in the past.
How can one stylesheet cause a different effect on essentially idential html pages? It can't, right?
Well if you can find a critical html faux pas that I can't, may your life be filled with rainbows, a pot of gold at the end of every one.
Please see
http://stevenjs.com/Help911/about.html and compare with the contact or home or the support pages. For some reason I cannot see, the mainCol div is up some number of pixels in the "about" page, not so the others, despite the parallel html, all ruled by the same style sheet, which reads as follows:
body {
background:#006699;
position:relative;
margin:0;
padding:0;
width:100%;
}
#head {
margin-top:30px;
margin-bottom:30px;
}
#whiteback {background-color:white;}
#wrapper {
width:625px;
height:440px;
background:#006699 url('it.gif') 50% 28px no-repeat;
margin-top:36px;
margin-left:auto;
margin-right:auto;
margin-bottom:36px;
}
#leftcol {
width:185px;
float:left;
background-color:#0000CC;
color: #e2e2e2;
}
#logo {
width:185px;
height:109px;
background:url('images/log
oSml.jpg')
;
margin:0;padding:0;
}
#logo span {display:none;}
#maincol {
float:left;
width:440px;
position:relative;
}
#flash {
height:84px;
padding: 0px;
margin-top: 7px;
}
#text {
margin: 0px;
background-color: #EFEFEF;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 8px;
padding-left: 8px;
}
#footer {clear:both;}
ul#mainNav {
list-style: none;
margin: 0;
padding: 0;
color: #e2e2e2;
background-color: #0000CC;
}
ul#mainNav li a:link, ul#mainNav li a:visited {
text-decoration: none;
color: #e2e2e2;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
display: block;
padding: 3px 0px 3px 3%;
width: 97%;
}
ul#mainNav li a:hover {
background-color: #6699cc;
color: #0000CC;
}
ul#mainNav li {
border-top: 1px solid #a5b5c6;
}
ul#mainNav ul.subNav {
list-style: none;
margin: 0;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 6px;
padding-left: 27px;
}
ul#mainNav ul.subNav li {
border-top: 0 none;
}
ul#mainNav ul.subNav li a:link, ul#mainNav ul.subNav li a:visited {
font-size: 12px;
}
ul#mainNav ul.subNav li a:hover {
background-color: #6699cc;
color: #0000CC;
}
.pageName {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: bold;
color: #003366;
text-transform: uppercase;
}
.bodyTxt {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #003366;
}
.emphasis {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: #003366;
text-align: center;
}
I like this stuff, but it is very unwieldy and seemingly unpredictable, illogical. For instance, why can't I position the "flash" div (lower) with a margin-top setting without messing up the position of the "text" div? This is more like Einstein's theory of relativity than a practical means of design. I think W3 needs a rap on the head.
So, it may seem very simple to an expert, but I am a newbie, and the above would not be possible without the help of Roonaan and others, but generally speaking, how does one "control" the positioning of text and images in this environment? For example, I loathe the excessive space that <p> tags create, but I have to have enclosing tags. How can one really DESIGN in this environment? Seems to me design is always sacrificed to the CSS technique. Do I use a style ruled div tag for every sentence? (Makes me want to run back to tables!) Or, what am I missing.
This is mission critical, your prompt and earnest help (to the main practical question at least, I do not welcome philosophical discussions) is hugely appreciated.
regards,
stevenjs
____________________
"I am but an egg."
--Stranger in a Strange land
