Hey guys.
I have a problem with my wordpress blog. It looks fine on FF, but when I open it on IE and Chrome, it's totally wrong.
I've already validated the code, but I couldn't solve all the errors - i think because it takes the page done, it doesn't read the real code (it says the post id, that appears like numbers, isn't a valid atribute).
Anyway, the biggest problem is that it looks different on IE and FF, and I can't put the footer on it's right place (it has to be in the end of the page, but when the page scrolls, it goes to right and makes a horizontal scroll).
The site is rodadegaia.com.br, and here is the css:
@charset "utf-8"; /* CSS Document */ body { margin: 0px auto; padding: 0px; text-align: left; background-color: #3bbec0; background-image:url(images/background.jpg); background-repeat:repeat-y; background-position:center; } h1, h2, h3, ul, li, p, form { margin: 0px; padding: 0px } hr { display: none; } a{ text-decoration:none; color: #58595b; } a:hover{ text-decoration:underline; } .space { clear: both; } #page { margin: 0px auto; padding: 0; width: 960px; } #header { background-image: url('images/header/rotate.php'); background-repeat:no-repeat; background-position:top center; height: 200px; width: 520px; padding-left: 350px; text-align:left; } #logo { background-image: url('./images/logo.png'); background-repeat:no-repeat; background-position: 97px 0px; height: 200px; width: 520px; margin: 0px; text-align: left; padding-top: 0px; padding-left: 90px; } #content { float: left; text-align: left; } .blogcontent { float: left; padding: 48px 0px 10px 30px; width: 470px; font-family:Verdana, Tahoma, sans-serif; color: #743f67; } .post { text-align: left; font-size:10px; color: #743f67; } .post h2 { padding: 0px; color: #743f67; } .post .post_title { float: left; width: 90%; } .post_title h2, a { padding: 0px; margin: 0px; color: #743f67; } .post_title a { text-decoration: none; color: #743f67; } .post_title a:hover { color: #58595b; } .post_title small { } .post_title small a { padding: 0px; margin: 0px; } .post .postmetadata { float: right; height: 34px; padding: 12px 5px; width: 35px; color: #743f67; } .postmetadata a { text-decoration: none; color: #58595b; } .postmetadata span { padding-left:5px; } .entry a { padding: 0px; margin: 0px; color: #58595b; } .entry a:hover { text-decoration:underline; } .entry blockquote { border: 2px dashed #ff99cc; } .entry img { float: center; } .entry ol li { list-style: decimal; } .entry p { text-align: justify; padding: 0px; } .clear { clear: both; } #sidebar { float: left; padding: 0px 10px 0px 130px; text-align: left; width: 111px; } #sidebar ul { list-style: none; margin: 0px; } #sidebar li { margin: 0px; } #sidebar li h2 { margin: 0px; } #sidebar ul ul { list-style: none; margin: 0px; } #sidebar ul ul li { margin: 0px; } #sidebar ul ul li a { text-decoration:none; color: #58595b; } .sidebar_paginas { background: url('./images/menu1.jpg') no-repeat bottom center; float: right; height: 81px; width: 110px; padding: 25px 0px 0px 55px; *padding-left: 105px; font-family:Tahoma, Verdana, sans-serif; font-size:11px; font-color: #58595b; margin-top: 0px; } .sidebar_paginas a:hover { color: #2f84a7; } .sidebar_paginas ul { padding-top: 10px; } .sidebar_midia { background: url('./images/menu2.jpg') no-repeat bottom center; float: right; height: 37px; width: 111px; padding: 10px 0px 0px 55px; font-family:Tahoma, Verdana, sans-serif; font-size:11px; font-color: #58595b; margin-top: 0px; } .sidebar_midia a:hover { color: #90819d; } .sidebar_midia ul { padding-top: 5px; } .sidebar_contato { background: url('./images/menu3.jpg') no-repeat bottom center; float: right; height: 57px; width: 111px; padding: 10px 0px 0px 55px; font-family:Tahoma, Verdana, sans-serif; font-size:9px; font-color: #58595b; } .sidebar_contato a:hover { color: #91b569; } .sidebar_contato ul { padding-top: 10px; } .contatoform { background-color: #FFF; border: 1px solid #91b569; color: #58595b; font-size:9px; height: 10px; width: 65px; } .contatosubmit { background:#91b569; color: #FFFFFF; font-size: 7px; font-weight:bold;s height: 15px; width: 30px; border-color:91b569; } #footer { height: 10px; text-align: right; width: 100px; padding: 0px 0px 0px 1000px; font-size: 9px; font-family:Verdana, Tahoma, sans-serif; color: #58595b; position:absolute; bottom: 0; } #footer .column1 { float: right; width: 100px; } .column1 a { text-decoration:underline; }
Thanks!
Validate it. The errors look
Validate it. The errors look pretty straight forward..Just take out those numbers after the class=""
You are missing multiple
You are missing multiple closing
's. Try to fix everything otherwise random stuff occurs like your footer.
that is the problem. There
that is the problem. There isn't any numbers on my tags, and all the
Ok, I got the validation,
Ok, I got the validation, but the problem still exists...=/
#footer { height:
#footer { height: 10px; text-align: right; width: 100px; <span style="font-weight:bold">padding: 0px 0px 0px 1000px;</span> font-size: 9px; font-family:Verdana, Tahoma, sans-serif; color: #58595b; position:absolute; bottom: 0; }
It's doing exactly as you told it to. Pad 1000px to the left, therefore pushing it out to the right and creating the scroll bar.
Also, remove the position:absolute and it will put the footer in the footer!
Hope that helps
Now it works on IE and not
Now it works on IE and not on FF!
I'm getting crazy here. x_x
remove the
remove the position:relative;
remove the bottom: 0;
remove the left: 1000px;
add clear:left;
ok, it worked! and what
ok, it worked!
and what about the position of the sidebar, that's different on IE and FF?
thanks.
Mess around with your
Mess around with your padding on the sidebar. The sidebar paginas has different padding left than the two below.
I got it! =D Thanks so very
I got it! =D
Thanks so very much, FernE97 and Deuce. =D