10 replies [Last post]
llumi
Offline
newbie
Last seen: 14 years 16 weeks ago
Joined: 2007-07-11
Posts: 7
Points: 0

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




Tervetuloa

Jam-Fudge tekstiä ja sellaista







Tällä sivulla on:

  1. Ensimmäinen asia
  2. Toinen asia
  3. Kolmas asia

Alaotsikko

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.

Toinen alaotsikko

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.”

Recent Updates

  • May 31, 2007

    In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula…

  • May 26, 2007

    Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh…

  • May 22, 2007

    Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum…

  • May 17, 2007

    Nam pede erat, porta eu, lobortis eget, tempus et, tellus. Etiam nequea…

  • May 14, 2007

    Vivamus fermentum nibh in augue. Praesent a lacus at urna congue rutrum. Nulla enim eros…

 



Thanks for any help!

Razer
Razer's picture
Offline
Enthusiast
Thamel
Last seen: 12 years 7 weeks ago
Thamel
Timezone: GMT+5.75
Joined: 2007-07-01
Posts: 94
Points: 5

Hi llumi

: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}

llumi
Offline
newbie
Last seen: 14 years 16 weeks ago
Joined: 2007-07-11
Posts: 7
Points: 0

Thanks! It's working now.

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 Smile

Razer
Razer's picture
Offline
Enthusiast
Thamel
Last seen: 12 years 7 weeks ago
Thamel
Timezone: GMT+5.75
Joined: 2007-07-01
Posts: 94
Points: 5

align div center

: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

your template goes here

:thumbsup:

llumi
Offline
newbie
Last seen: 14 years 16 weeks ago
Joined: 2007-07-11
Posts: 7
Points: 0

Thanks for the help Razer,

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.

Smile

Razer
Razer's picture
Offline
Enthusiast
Thamel
Last seen: 12 years 7 weeks ago
Thamel
Timezone: GMT+5.75
Joined: 2007-07-01
Posts: 94
Points: 5

Hello llumi

: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

Your template goes here

:thumbsup: :thumbsup: :rolleyes: :rolleyes:

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 10 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

You're forgetting one

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!

Verschwindende wrote:
  • CSS doesn't make pies

llumi
Offline
newbie
Last seen: 14 years 16 weeks ago
Joined: 2007-07-11
Posts: 7
Points: 0

Thank you both! I'm not

Thank you both! Laughing out loud
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.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 10 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

DTD

You also had an incomplete doctype. Might wanna fix that.

Verschwindende wrote:
  • CSS doesn't make pies

Razer
Razer's picture
Offline
Enthusiast
Thamel
Last seen: 12 years 7 weeks ago
Thamel
Timezone: GMT+5.75
Joined: 2007-07-01
Posts: 94
Points: 5

Hey llumi

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

llumi
Offline
newbie
Last seen: 14 years 16 weeks ago
Joined: 2007-07-11
Posts: 7
Points: 0

Thanks guys! It's working

Thanks guys! It's working now :thumbsup: