Website Talk > CSS
Ok, I give up...
Patric Ahlqvist:
Anyone looking for a CSS to disect ? http://p-ahlqvist.com/sNews/patric_9 behaves in mysterious ways ;).
I have three things I caqn't get the better of:
1. The top of container in IE goes al the way up, it should.. But not in FF.
2. The footer moves to the left as one hovers the links (this is really odd)
3. And that shitty "clear" or whatever I can't get to work. The leftside "runs over"
when clicking ie "login" or any other link that has less content.
Can any one help me before I go nuts.
Patric.
George Antoniadis:
Some info about what your problems were:
1. don't use too many children if you don't need them... browsers **ck up... I just removed the header p and put it's contents into header
2. you've allready set lelft/right margins to auto on the content sto neither you need to do this again in center/header or footer (this was you problem)
3. I don't think that clear works with absolute positioning... So I removed it... Also clear needs to be set on the NEXT element not the current...
for example for the left the clear but be set on the footer! ;)
--- Code: ---body { font: 11px georgia,times,serif; color: #F0E9CE; background: #F0E9CE; margin: 0; text-align: center;}
a { color: #F0AC4A; text-decoration: none; }
a:hover,a:active { text-decoration: underline; }
form, input, select, textarea {
font-family: georgia,times,serif;
font-size: 100%;
margin: 0;
}
ul, ol, dl, p, h1, h2, h3, h4, h5, h6 {
font-family: georgia,times,serif;
margin-top: 15px;
margin-bottom: 15px;
padding: 0 0 0 0;
}
ul ul, ul ol, ol ul, ol ol {margin-top: 0; margin-bottom: 0;}
h1, h2, h3, h4, h5, h6 {
color: #515752;
font-family: Georgia, "Trebuchet MS", serif;
}
h1 {font-size: 240%; border: none; }
h2 {font-size: 120%;}
h3 {font-size: 120%;}
h4 {font-size: 100%;}
h5 {font-size: 70%;}
h6 {font-size: 50%;}
li a { display: block; color: #2B0101; font-weight: bold; font-size: 11px; text-transform: none; padding: 2px 0 3px 0;}
li a.c { font-size: 9px; font-weight: normal; display: inline; padding: 0; text-transform: uppercase;}
/* ------------ Layout -------------------*/
.content {
text-align: left;
background: #2b0101;
width: 800px;
padding: 0px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.header {
height: 287px;
background:#DCD5B8 url("../images/top.gi") no-repeat left;
margin: 0px;
color: #979486;
font-size:200%;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
}
.left h2 {
border-bottom: 1px solid #F0E9CE;
color: #F0AC4A;
line-height: 1.6em;
margin: 15px 0 10px 0;
padding: 0px 5px 0px 0px;
}
.left {
float:left;
color: #2B0101;
width: 191px;
margin-top: -15;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
padding-top: 0em;
padding-right: 0;
padding-bottom: 1em;
padding-left: 15px;
}
.subleft{background: url("../lselectBttm.gif") no-repeat bottom; padding-bottom: 12px; margin-top: 15px;}
.subleft p{color: #F0E9CE;}
.subleft h3{ height: 18px; width: 189px; margin: 0; text-indent: 0px; color: #F0AC4A;font-size: 12px;border-bottom: 1px solid #F0E9CE;}
.past { margin: 0px 0 10px 0; padding: 0 0 12px 0px; border-bottom: 0px solid #eee;width:120px; }
.past p { color: #F0E9CE; }
.past a { padding:0; margin: 0;}
.new { margin: 0px 0 10px 0; padding: 0px 0 20px 0px; border-bottom: 1px solid #eee; width:120px; }
.new p { color: #F0E9CE; }
.center { width: 500px; padding: 0 0 0 260px; margin:0 10px 0 0;background: #2b0101;}
.center h2 {
border-bottom: 1px solid #F0E9CE;
color: #F0AC4A;
line-height: 1.6em;
margin: 15px 0 10px 0;
padding: 0px 5px 0px 0px;
}
.footer {
display:block;
width: 800px;
text-align: center;
font: 11px georgia,times,serif;
text-transform: lowercase;
background-color: #DCD5B8;
padding-top: 15px;
padding-right: 0;
padding-bottom: 15px;
padding-left: 0;
clear: both;
}
.footer a {color: #979486;}
.footer a:hover { background: #CBC7B5; color: #2B0101;}
/* ------------ Images --------------- */
.img{ margin-top: 10px; margin-left: 0px; margin-bottom: 10px; padding: 0px 0px 0px 0px; border: 1px solid #ccc;}
.imgRight {width: 133px;height: 150px; margin-top: 10px; margin-left: 10px; margin-bottom: 10px; padding: 0px 0px 0px 0px; border: 1px solid #ccc;}
.imgLeft {width: 133px;height: 100px; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; padding: 0px 0px 0px 0px; border: 1px solid #ccc;}
.imgRight { float: right;}
/* ------------------- Navigation ------------------------ */
.menu {margin: 0; }
.menu ul, .menu ul li {display: block; list-style-type: none; margin: 0; padding: 0; }
.menu ul li ul, .menu ul li ul li ul {border-top: 1px solid #eee;}
.menu ul li {border-bottom: 1px solid #eee;}
.menu ul li, .menu ul li a {display: block; line-height: normal; margin: 0; padding: 0;}
.menu ul li a {display: block; padding: 5px 5px 6px 5px;}
.menu ul li a, .menu ul li a:link, .menu ul li a:visited, .menu ul li a:active, .menu ul li a:hover {
text-decoration: none;
cursor: pointer;
}
.menu .last, .menu ul li.last, .menu ul li ul li.last, .menu ul li ul li.last {border-bottom: none;}
/* hide from IE5.0/Win and IE5/Mac, IE needs this to fix a rendering problem */
* html .menu ul li a, * html .menu li ul li a, * html .menu li ul li ul li a {height: 0.01%;}
* html .menu ul, * html li ul, * html li ul li ul {position: relative;}
/*** NAVIGATION THEME ***/
/* First Sub Level */
.menu ul li a:link, .menu ul li a:visited, .menu ul li a:active {
background-color: #814E04;
color: #F0E9CE;
padding-left: 15px;
}
.menu ul li a:hover {background-color: #F0AC4A; color: #000; padding-left:25px;}
/* Second Sub Level */
.menu li ul li a:link, .menu li ul li a:visited, .menu li ul li a:active {
background-color: #BCB;
color: #000;
padding-left: 30px;
}
.menu li ul li a:hover {background-color: #DDB; color: #000; }
/* Third Sub Level */
.menu li ul li ul li a:link, .menu li ul li ul li a:visited, .menu li ul li ul li a:active {
background-color: #CDC;
color: #000;
padding-left: 45px;
}
.menu li ul li ul li a:hover {background-color: #EEC; color: #000;}
/*-------------- data thingies -----------------*/
form.search {
padding: 0;
margin: 0;
}
form {
padding: 0 0 0 20px;
}
fieldset {
border: 1px solid #eee;
padding-left: 10px;
}
textarea.text {
height: 150px;
width: 90%;
border: 1px solid #ccc;
background: #fff;
color: #000;
}
textarea.text:hover {
border: 1px solid #eee;
background: #FFFFF4;
color: #000;
}
input.field {
border: 1px solid #ccc;
background-color: #FFFFFF;
width: 200px;
color: #000;
height:15px;
}
input.field:hover {
border: 1px solid #eee;
background: #FFFFF4;
color: #000;
}
input.text {
margin: 0;
width: 88px;
border: 1px solid #eee;
background: #FFF;
color: #000;
height:15px;
}
input.text:hover {
border: 1px solid #ccc;
}
input.searchbutton {
margin: 0;
font-size: 100%;
font-family: georgia,times,serif;
border: none;
background: #FFFFFF;
color: #808080;
padding: 1px;
font-weight: bold;
}
.date {
color: #ccc;
background: transparent;
text-align: right;
margin: 4px 0 5px 0;
padding: 0.4em 0 0 0;
border-top: 1px solid #eee;
}
input.button {
background: #FFFFF4;
color: #808080;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.comments {
padding: 10px 10px 8px 10px;
margin: 0 0 7px 0;
background: #f8f8f8;
color: #000;
}
.commentsbox {
padding: 8px 0 10px 10px;
margin: 0 0 10px 0;
background: #f4f4f4;
color: #000;
}
--- End code ---
hope this is ok... ^_^
Patric Ahlqvist:
*Fiddudle thohoooo
In FF that's greaaaaaat. But the majority of surfers do in fact use the urinal-browser, IE. And there it's still two small issues.
1. The "footer" moves to the left when hovering links.
2. The "center" isn't aligned as it should. It positions itself benieth and to the right of "left"...
Grreeat effort in helping me, I do thank you, you're the man, 'a' ;)
EDIT --> ok center thing fixed...I floated it right...Footer still remains a flaw
George Antoniadis:
hmmm indeed the center is broken but the footer doesn't move on my ie! o_O
I'm just fixing the center sorry bout that
George Antoniadis:
ok the center should be ok now... could you please try it and let me know?
--- Code: ---body { font: 11px georgia,times,serif; color: #F0E9CE; background: #F0E9CE; margin: 0; text-align: center;}
a { color: #F0AC4A; text-decoration: none; }
a:hover,a:active { text-decoration: underline; }
form, input, select, textarea {
font-family: georgia,times,serif;
font-size: 100%;
margin: 0;
}
ul, ol, dl, p, h1, h2, h3, h4, h5, h6 {
font-family: georgia,times,serif;
margin-top: 15px;
margin-bottom: 15px;
padding: 0 0 0 0;
}
ul ul, ul ol, ol ul, ol ol {margin-top: 0; margin-bottom: 0;}
h1, h2, h3, h4, h5, h6 {
color: #515752;
font-family: Georgia, "Trebuchet MS", serif;
}
h1 {font-size: 240%; border: none; }
h2 {font-size: 120%;}
h3 {font-size: 120%;}
h4 {font-size: 100%;}
h5 {font-size: 70%;}
h6 {font-size: 50%;}
li a { display: block; color: #2B0101; font-weight: bold; font-size: 11px; text-transform: none; padding: 2px 0 3px 0;}
li a.c { font-size: 9px; font-weight: normal; display: inline; padding: 0; text-transform: uppercase;}
/* ------------ Layout -------------------*/
.content {
text-align: left;
background: #2b0101;
width: 800px;
padding: 0px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.header {
height: 287px;
background:#DCD5B8 url("../images/top.gi") no-repeat left;
margin: 0px;
color: #979486;
font-size:200%;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
}
.left h2 {
border-bottom: 1px solid #F0E9CE;
color: #F0AC4A;
line-height: 1.6em;
margin: 15px 0 10px 0;
padding: 0px 5px 0px 0px;
}
.left {
float:left;
color: #2B0101;
width: 191px;
margin-top: -15;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
padding-top: 0em;
padding-right: 0;
padding-bottom: 1em;
padding-left: 15px;
}
.subleft{background: url("../lselectBttm.gif") no-repeat bottom; padding-bottom: 12px; margin-top: 15px;}
.subleft p{color: #F0E9CE;}
.subleft h3{ height: 18px; width: 189px; margin: 0; text-indent: 0px; color: #F0AC4A;font-size: 12px;border-bottom: 1px solid #F0E9CE;}
.past { margin: 0px 0 10px 0; padding: 0 0 12px 0px; border-bottom: 0px solid #eee;width:120px; }
.past p { color: #F0E9CE; }
.past a { padding:0; margin: 0;}
.new { margin: 0px 0 10px 0; padding: 0px 0 20px 0px; border-bottom: 1px solid #eee; width:120px; }
.new p { color: #F0E9CE; }
.center {
width: 500px;
background: #2b0101;
margin-top: 0;
margin-right: 10px;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 30px;
float: left;
}
.center h2 {
border-bottom: 1px solid #F0E9CE;
color: #F0AC4A;
line-height: 1.6em;
margin: 15px 0 10px 0;
padding: 0px 5px 0px 0px;
}
.footer {
display:block;
width: 800px;
text-align: center;
font: 11px georgia,times,serif;
text-transform: lowercase;
background-color: #DCD5B8;
padding-top: 15px;
padding-right: 0;
padding-bottom: 15px;
padding-left: 0;
clear: both;
}
.footer a {color: #979486;}
.footer a:hover { background: #CBC7B5; color: #2B0101;}
/* ------------ Images --------------- */
.img{ margin-top: 10px; margin-left: 0px; margin-bottom: 10px; padding: 0px 0px 0px 0px; border: 1px solid #ccc;}
.imgRight {width: 133px;height: 150px; margin-top: 10px; margin-left: 10px; margin-bottom: 10px; padding: 0px 0px 0px 0px; border: 1px solid #ccc;}
.imgLeft {width: 133px;height: 100px; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; padding: 0px 0px 0px 0px; border: 1px solid #ccc;}
.imgRight { float: right;}
/* ------------------- Navigation ------------------------ */
.menu {margin: 0; }
.menu ul, .menu ul li {display: block; list-style-type: none; margin: 0; padding: 0; }
.menu ul li ul, .menu ul li ul li ul {border-top: 1px solid #eee;}
.menu ul li {border-bottom: 1px solid #eee;}
.menu ul li, .menu ul li a {display: block; line-height: normal; margin: 0; padding: 0;}
.menu ul li a {display: block; padding: 5px 5px 6px 5px;}
.menu ul li a, .menu ul li a:link, .menu ul li a:visited, .menu ul li a:active, .menu ul li a:hover {
text-decoration: none;
cursor: pointer;
}
.menu .last, .menu ul li.last, .menu ul li ul li.last, .menu ul li ul li.last {border-bottom: none;}
/* hide from IE5.0/Win and IE5/Mac, IE needs this to fix a rendering problem */
* html .menu ul li a, * html .menu li ul li a, * html .menu li ul li ul li a {height: 0.01%;}
* html .menu ul, * html li ul, * html li ul li ul {position: relative;}
/*** NAVIGATION THEME ***/
/* First Sub Level */
.menu ul li a:link, .menu ul li a:visited, .menu ul li a:active {
background-color: #814E04;
color: #F0E9CE;
padding-left: 15px;
}
.menu ul li a:hover {background-color: #F0AC4A; color: #000; padding-left:25px;}
/* Second Sub Level */
.menu li ul li a:link, .menu li ul li a:visited, .menu li ul li a:active {
background-color: #BCB;
color: #000;
padding-left: 30px;
}
.menu li ul li a:hover {background-color: #DDB; color: #000; }
/* Third Sub Level */
.menu li ul li ul li a:link, .menu li ul li ul li a:visited, .menu li ul li ul li a:active {
background-color: #CDC;
color: #000;
padding-left: 45px;
}
.menu li ul li ul li a:hover {background-color: #EEC; color: #000;}
/*-------------- data thingies -----------------*/
form.search {
padding: 0;
margin: 0;
}
form {
padding: 0 0 0 20px;
}
fieldset {
border: 1px solid #eee;
padding-left: 10px;
}
textarea.text {
height: 150px;
width: 90%;
border: 1px solid #ccc;
background: #fff;
color: #000;
}
textarea.text:hover {
border: 1px solid #eee;
background: #FFFFF4;
color: #000;
}
input.field {
border: 1px solid #ccc;
background-color: #FFFFFF;
width: 200px;
color: #000;
height:15px;
}
input.field:hover {
border: 1px solid #eee;
background: #FFFFF4;
color: #000;
}
input.text {
margin: 0;
width: 88px;
border: 1px solid #eee;
background: #FFF;
color: #000;
height:15px;
}
input.text:hover {
border: 1px solid #ccc;
}
input.searchbutton {
margin: 0;
font-size: 100%;
font-family: georgia,times,serif;
border: none;
background: #FFFFFF;
color: #808080;
padding: 1px;
font-weight: bold;
}
.date {
color: #ccc;
background: transparent;
text-align: right;
margin: 4px 0 5px 0;
padding: 0.4em 0 0 0;
border-top: 1px solid #eee;
}
input.button {
background: #FFFFF4;
color: #808080;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.comments {
padding: 10px 10px 8px 10px;
margin: 0 0 7px 0;
background: #f8f8f8;
color: #000;
}
.commentsbox {
padding: 8px 0 10px 10px;
margin: 0 0 10px 0;
background: #f4f4f4;
color: #000;
}
--- End code ---
Navigation
[0] Message Index
[#] Next page
Go to full version