
Jam-Fudge tekstiä ja sellaista
Tällä sivulla on:
- Ensimmäinen asia
- Toinen asia
- Kolmas asia
Hi all,
I'm pretty new to CSS and have read around a bit, but can't figured out, what's wrong here. I've got two floats that are working just fine in FF, but in IE6 the sidebar drops under the main area.
I've tried adding text-align tags in the code and also making the floats a few pixels narrower, but I'm probably doing it somehow wrong, because neither is working.
Here's the CSS:
* {
margin: 0;
padding: 0;
}
body {
background: black;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: black;
}
h1, h2, h3 {
margin-bottom: 15px;
text-transform: lowercase;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: brown;
}
h1 {
letter-spacing: -1px;
font-size: 197%;
}
h2 {
letter-spacing: -1px;
}
h3 {
}
p, ol, ul {
margin-bottom: 1.5em;
line-height: 1.5em;
}
ul, ol {
margin-left: 3em;
}
blockquote {
padding: 0 3em;
font-style: italic;
}
a:link {
text-decoration: none;
color: brown;
}
a:visited {
color: #8B985F;
}
a:hover, a:active {
text-decoration: none;
color: #FFFFFF;
}
img {
border: none;
}
img.left {
float: left;
margin: 0 15px 0 0;
}
img.right {
float: right;
margin: 0 0 0 15px;
}
/* Header */
#header {
width: 710px;
height: 125px;
margin: 0 auto;
padding: 0 25px 10px 25px;
background: beige;
}
#header h1 {
margin: 0;
padding: 50px 0 0 40px;
letter-spacing: -2px;
font-size: 40px;
}
#header h1 a {
color: brown;
}
#header h2 {
margin: -10px 0 0 0;
padding: 0 0 0 175px;
letter-spacing: normal;
font: bold 10px Arial, Helvetica, sans-serif;
}
#header h2 a {
color: brown;
}
#header a {
}
/* Page */
#page {
width: 710px;
margin: 0 auto;
padding: 0 25px 0 25px;
background: white url(images/img02.gif) repeat-y center top;
}
/* Content */
#content {
float: left;
width: 560px;
padding: 5px 0 0 5px;
<-- background: url(images/img03.gif) no-repeat; -->
}
.post {
width: 520px;
padding: 20px 0 0 20px;
}
.post h1, .post h2, .post h3 {
}
.post ol {
list-style-position: inside;
}
.post .title {
padding: 0 0 5px 0;
<-- background: url(images/img08.gif) repeat-x left bottom; -->
}
.post .title span {
padding-right: 30px;
<-- background: url(images/img06.gif) no-repeat right center; -->
}
/* Sidebar */
#sidebar {
float: right;
width: 140px;
padding: 5px 5px 0 0;
background: beige;
}
.box {
width: 139px;
padding-left: 1px;
<-- background: url(img09.gif) repeat-y; -->
}
.box .title {
height: 33px;
margin: 0;
padding: 10px 0 0 20px;
<-- background: url(images/img09.gif) repeat-x; -->
font-size: 18px;
}
.box ul {
margin: 20px;
padding: 0;
list-style: none;
}
.box li {
padding: 5px 0;
<-- background: url(images/img10.gif) repeat-x; -->
}
.box li.first {
background: none;
}
.box h3 {
margin: 0;
font-size: 85%;
font-weight: bold;
}
.box p {
margin: 0;
line-height: normal;
}
.box a:link {
padding-left: 10px;
background: 0 5px;
text-decoration: none;
}
.box a:visited {
padding-left: 10px;
background: 0 5px;
text-decoration: none;
}
.box a:hover {
color: #565736; text-decoration: underline;
}
.nav {
margin: 0px;
margin-left:-5px;
margin-top: 1px;
text-decoration: none
}
.nav li {
list-style: none;
margin: 1px;
width: 110px;
border-bottom: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
background-color: #EEEEEE;
text-align: left;
font-size: 10px;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
}
.nav li a:link {
display: block;
width: 102px;
padding-left: 4px;
font-size: 12px;
text-decoration: none;
}
.nav li a:visited {
display: block;
width: 102px;
padding-left: 4px;
font-size: 12px;
}
.nav li a:hover{
background-color: black;
text-decoration: underline;
color: white;
padding-right: 4px;
}
.topMenuItem {
border-top: 1px solid #CCCCCC;
}
/* Footer */
#footer {
width: 710px;
height: 45px;
margin: 0 auto;
text-align: left;
padding: 0 25px 0 25px;
background: beige;
}
#footer p {
margin: 0;
padding: 14px 14px 14px 14px;
line-height: normal;
font-size: 77%;
color: #565736;
}
#footer a:link {
color: #565736;
}
#footer a:hover {
text-decoration: underline;
color: brown;
}
#legal {
float: left;
}
#links {
float: right;
}
And the HTML
Default
Jam-Fudge tekstiä ja sellaista
Tällä sivulla on:
In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus.
Vel consequat, suscipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdie:
“In posuere eleifend odio quisque semper augue
mattis wisi
maecenas ligula.Donec leo, vivamus fermentum nibh in augue praesent a
lacus at urna congue rutrum. Quisque dictum integer nisl risus,
sagittis convallis, rutrum id, congue, and nibh.”
In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula…
Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh…
Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum…
Nam pede erat, porta eu, lobortis eget, tempus et, tellus. Etiam nequea…
Vivamus fermentum nibh in augue. Praesent a lacus at urna congue rutrum. Nulla enim eros…
Thanks for any help!
:rolleyes: :rolleyes:
I had change little bit in your css code. So please change some attribute as shown below.I think it solve your probem about float the left box in the content page.
#footer{widht:761px}
#page{widht:761px}
#content{width:520px;}
#header{widht:761px}
Thanks! It's working now. Just one more question: how do I get everything to align in the middle in IE as it does in the FF? Tried adding align tags wherever there is a margin: 0 auto, but for some reason that is not working.
Thank you very much
:rolleyes: :rolleyes:
Dear llumi
the div template center we have to hack two ways
body{margin:0 auto;}
div.razer{align:center;}
Your structure should be like this
:thumbsup:
Thanks for the help Razer, unfortunately I still can't get it to work. In FF everything's fine, but in IE the left margin doesn't exist and I can't get the content off of the left side. I tried adding your code, but no help.
:ohdear: :ohdear: :ohdear:
Ohh Sorry Try this code this will help U.
div.razer{margin:0 auto;}
body {background: white;font-family: Arial, Helvetica, sans-serif;font-size: 13px;color: black;margin: 0 auto;padding: 0 auto;}
Your HTML code goes like this
Razer Testing
:thumbsup: :thumbsup: :rolleyes: :rolleyes:
You're forgetting one thing.
By default, DIVs (and the body element) will fill up all the space.
Unless you set a width on the element then it won't have any left and right margins to center!
Thank you both!
I'm not actually worried about the body tag, but rather with #header, #page and #footer. The body is fine as it is, it should begin at the left side with no margin.
But, I got the left margin for the content to work in IE7 by adding this in #header, #page and #footer.
margin: 0 auto;
margin-left: 85px;
Of course, it's not as elegant as it could be, but working for now. IE6 on the other hand still refuses to co-operate.
You also had an incomplete doctype. Might wanna fix that.
If U wrape your header content and footer into one div then U can align the div in the center.As I had gave code already
Thanks guys! It's working now :thumbsup: