PDA

Click to See Complete Forum and Search --> : CSS problem in IE

Ruriko
10-31-2007, 05:37 AM
This is my layout http://ruriko.v3host.net/news.php
It looks perfect in Firefox but it doesn't look right in IE6. In IE7 I don't know what it looks like. Anyone with IE7 can you check the layout and compare it with firefox and see if it needs fixing?

In IE6 you noticed the whole layout isn't centered the links aren't correct either cause when you hover the white bg is supose to have the same height of the menu bar.Also the border on the right of the content div is too thick.

/* CSS Document */
body {
background-color: #660000;
background-image: url(images/bg.gif);
}

#wrapper {
display: block;
width:900px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #FFFFFF;
border: 3px solid #FFFFFF;
}

#header {
width:900px;
background-color: #660000;
background-image: url(images/header.jpg);
height: 201px;
background-repeat: no-repeat;
}

#sidebar {
width:180px;
background-color: #FFCFCE;
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 5px;
color: #660000;
}

#sidebar a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #660000;
text-decoration: none;
}

#sidebar a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FF0000;
text-decoration: none;
}

#sidebar2 {
width:180px;
background-color: #FFCCCC;
float: right;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #660000;
padding: 10px;
}

#sidebar2 a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #660000;
text-decoration: none;
}

#sidebar2 a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FF0000;
text-decoration: none;
}

#content {
width:480px;
background-color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 5px;
color: #660000;
text-align: left;
float: left;
}

#content a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #660000;
text-decoration: none;
}

#content a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FF0000;
text-decoration: none;
}

#footer {
width:890px;
height:25px;
background-color: #000000;
margin-bottom: 0px;
clear: both;
float: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-align: center;
vertical-align: middle;
padding: 5px;
}

#footer a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}

#footer a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: none;
background-color: #FFFFFF;
}

.tbox {
border: 1px solid #660000;
background-color: #FFCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #660000;
}

.button {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #660000;
border: 1px solid #660000;
background-color: #FFCCCC;
}

#dataform {
text-align: left;
}


.forumheader, .forumheader2, .forumheader3, .forumheader4, .fcaption, .finfobar {
background-color: #fff;
text-align: left;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #bbb;
padding: 5px;
}

.helpbox {
width: 400px;
}

.spacer{
padding: 5px 0px;
}

.fcaption, .forumheader5 {
background-color: #f7f7f7;
}

#chatbox_posts {
border: 1px solid #660000;
padding: 3px;
height: 250px;
overflow-X: hidden;
}

#cmessage {
width: 140px;
background-color: #FFCCCC;
}

Nav Links

div.menuBar,
div.menuBar a.menuButton, div.menuButton, div.menuButton_over,
div.menu,
div.menu a.menuItem {
font-weight: bold;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}

div.menuBar {
text-align: center;
background-color: #660000;
vertical-align: middle;
padding-top: 5px;
padding-bottom: 6px;
}

div.emenuBar {
background-color: #660000;
border-top: 1px solid #ffffff;
border-bottom: 0px solid #000;
text-align: left;
}

div.menuBar a.menuButton, div.menuButton, div.menuButton_over {
color: #FFFFFF;
cursor: default;
/*
if using a link icon replace line above with this one
padding: 2px 4px 2px 22px;
*/
position: relative;
text-decoration: none;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
text-align: left;
}

div.menuBar a.menuButton:hover, div.menuButton:hover, div.menuButton_over {
background-color: #FFFFFF;
color: #660000;
padding-top: 5px;
padding-bottom: 7px;
}

div.menuBar a.menuButtonActive, div.menuButtonActive, div.menuButtonActive:hover,
div.menuBar a.menuButtonActive:hover {
background-color: #FFFFFF;
color: #660000;
padding-top: 6px;
padding-bottom: 6px;
}

div.menu {
background-color: #660000;
left: 0px;
position: absolute;
top: 0px;
visibility: hidden;
vertical-align: middle;
}

div.menu a.menuItem {
cursor: default;
display: block;
text-decoration: none;
white-space: nowrap;
width: 120px;
color: #FFFFFF;
padding-top: 5px;
padding-bottom: 5px;
text-align: left;
padding-left: 5px;
}

div.menu a.menuItem:hover, div.menu a.menuItemHighlight {
background-color: #FFFFFF;
color: #660000;
padding-top: 5px;
padding-bottom: 5px;
}

div.menu a.menuItem span.menuItemBuffer {
padding: 0px;
color: #ffffff;
text-align: left;
}

div.menu a.menuItem:hover span.menuItemBuffer {
color: #000000;
}

div.menu a.menuItem span.menuItemText {
text-align: left;
}

div.menu a.menuItem span.menuItemArrow {
text-align: left;
}

div.menu div.menuItemSep {
border-top: 1px solid #a5a5a5;
border-bottom: 1px solid #ffffff;
}
Kravvitz
10-31-2007, 06:48 AM
You've got an extra </div> end tag near the end of that page.

The XML declaration (the line above the doctype) forces IE6 into quirks mode, which is usually a bad thing. (They fixed that bug in IE7.)

XHTML 1.1, when used correctly, is not compatible with IE (as of version 7). Therefore, I recommend that you switch to HTML 4.01 Strict or XHTML 1.0 Strict. (If you want more information, just ask. :) )

In IE7 the scrollbar for #chatbox_posts is missing. You should add overflow:auto before the declaration of overflow-x:hidden.

Don't forget that only IE5+/Win, Firefox 1.5+ (Mozilla 1.8+), and Safari 3+ support overflow-x and overflow-y so far.
sticks464
10-31-2007, 05:32 PM
*Agree with Kravvitz

Remove position: relative; from div.menuBar a.menuButton, div.menuButton, div.menuButton_over for the menu to look the same in IE. To get the chatbox the same I would remove the -X from overflow on the #chatbox_post.
Ruriko
10-31-2007, 06:05 PM
if I remove the -x from the overflow then you'll see a horizonal bar. Is there another way to get rid of the horizonal bar in the chatbox?
sticks464
10-31-2007, 08:09 PM
Put the X back in and see what happens. Supposedly IE6+ supports it.
Kravvitz
10-31-2007, 10:22 PM
if I remove the -x from the overflow then you'll see a horizonal bar.
We will? In which browsers does that happen? It doesn't seem to happen in FF2, IE7, or IE6.
Ruriko
10-31-2007, 10:55 PM
Ahh nvm that fixed the chatbox. I tried changing the doctype to XHTML Strict 1.0 but it doesn't center my whole layout and still see a thick border on the right hand side
Kravvitz
10-31-2007, 10:58 PM
You have several elements before the doctype. That is forcing IE6 and IE7 into quirks mode. These should be in the <body>:
<div align="center"><script type="text/javascript"><!--
google_ad_client = "pub-3044720661761799";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text_image";
//2007-10-31: v3host.net header free sites
google_ad_channel = "2823945266";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "008000";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<p><font face="Verdana, Arial, Helvetica, sans-serif" color="#0000FF" size="+1">To Remove these ADS please click here <a href="mailto:adsremove@v3host.net">adsremove@v3host.net</a></font></p></div>

Like I said before, the XML declaration (the line above the doctype) forces IE6 into quirks mode, which is usually a bad thing. (They fixed that bug in IE7.)

Remove the <font> elements. This is a bit old, but much of what it says is relevant -- What's wrong with the FONT element? (http://www.mcsr.olemiss.edu/~mudws/font.html)
What should you use instead of the FONT element? Beyond the FONT tag: Practical HTML text styling (http://style.cleverchimp.com/font_size/livetext.html)
Ruriko
11-01-2007, 01:54 AM
Ok I got rid of the xml declartion and it fixed a couple of bits. Now there's the menubar has a white border ontop of it which shouldn't be there. When you click on Anime the dropdown menu sublinks isn't align properly with the heading link. This is all what I see in IE6.

Updated site http://ruriko.ayrshirehosting.com/news.php

div.menuBar,
div.menuBar a.menuButton, div.menuButton, div.menuButton_over,
div.menu,
div.menu a.menuItem {
font-weight: bold;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}

div.menuBar {
text-align: center;
background-color: #660000;
vertical-align: middle;
padding-top: 5px;
padding-bottom: 5px;
}

div.emenuBar {
background-color: #660000;
border-top: 1px solid #ffffff;
border-bottom: 0px solid #000;
text-align: left;
}

div.menuBar a.menuButton, div.menuButton, div.menuButton_over {
color: #FFFFFF;
cursor: default;
text-decoration: none;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
text-align: left;
}

div.menuBar a.menuButton:hover, div.menuButton:hover, div.menuButton_over {
background-color: #FFFFFF;
color: #660000;
padding-top: 5px;
padding-bottom: 5px;
}

div.menuBar a.menuButtonActive, div.menuButtonActive, div.menuButtonActive:hover,
div.menuBar a.menuButtonActive:hover {
background-color: #FFFFFF;
color: #660000;
padding-top: 5px;
padding-bottom: 5px;
}

div.menu {
background-color: #660000;
left: 0px;
position: absolute;
top: 0px;
visibility: hidden;
vertical-align: middle;
}

div.menu a.menuItem {
cursor: default;
display: block;
text-decoration: none;
white-space: nowrap;
width: 120px;
color: #FFFFFF;
padding-top: 5px;
padding-bottom: 5px;
text-align: left;
padding-left: 5px;
}

div.menu a.menuItem:hover, div.menu a.menuItemHighlight {
background-color: #FFFFFF;
color: #660000;
padding-top: 5px;
padding-bottom: 5px;
}

div.menu a.menuItem span.menuItemBuffer {
padding: 0px;
color: #ffffff;
text-align: left;
}

div.menu a.menuItem:hover span.menuItemBuffer {
color: #000000;
}

div.menu a.menuItem span.menuItemText {
text-align: left;
}

div.menu a.menuItem span.menuItemArrow {
text-align: left;
}

div.menu div.menuItemSep {
border-top: 1px solid #a5a5a5;
border-bottom: 1px solid #ffffff;
}
Kravvitz
11-01-2007, 03:20 AM
Increase the top padding on ".menuBar" by 1px.

As for the alignment it's probably an issue with the badly coded JS menu script you're using.

Why do you want people to click on it to reveal the dropdown sub-menu anyway?

That navigation should be marked up as an unordered list.
I suggest you learn how semantics apply to X/HTML. (http://www.dynamicsitesolutions.com/html/semantic-markup/) Semantics is really a very important subject when it comes to X/HTML.
Ruriko
11-01-2007, 04:34 AM
In this page http://ruriko.ayrshirehosting.com/e107_plugins/forum/forum.php
There's white gaps between the headings forum, threads, replies & last post. I want to get rid of those gaps so how would I do that?

/* CSS Document */
body {
background-color: #660000;
background-image: url(images/bg.gif);
text-align: center;
}

#wrapper {
display: block;
width:900px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #FFFFFF;
border: 3px solid #FFFFFF;
}

#header {
width:900px;
background-color: #660000;
background-image: url(images/header.jpg);
height: 201px;
background-repeat: no-repeat;
}

#sidebar {
width:180px;
background-color: #FFCFCE;
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 10px;
color: #660000;
text-align: left;
}

#sidebar a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #660000;
text-decoration: none;
}

#sidebar a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FF0000;
text-decoration: none;
}

#sidebar2 {
width:180px;
background-color: #FFCCCC;
float: right;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #660000;
padding: 10px;
text-align: left;
}

#sidebar2 a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #660000;
text-decoration: none;
}

#sidebar2 a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FF0000;
text-decoration: none;
}

#content {
width:490px;
background-color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 5px;
color: #660000;
text-align: left;
float: left;
}

#content a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #660000;
text-decoration: none;
}

#content a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FF0000;
text-decoration: none;
}

#footer {
width:890px;
height:25px;
background-color: #000000;
margin-bottom: 0px;
clear: both;
float: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-align: center;
vertical-align: middle;
padding: 5px;
}

#footer a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}

#footer a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: none;
background-color: #FFFFFF;
}

.tbox {
border: 1px solid #660000;
background-color: #FFCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #660000;
}

.button {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #660000;
border: 1px solid #660000;
background-color: #FFCCCC;
}

#dataform {
text-align: left;
}


.forumheader, .forumheader2, .forumheader3, .forumheader4, .fcaption, .finfobar {
text-align: left;
padding: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #bbb;
margin: 0px;
}

.helpbox {
width: 400px;
}

.spacer{
padding: 5px 0px;
}

.fcaption, .forumheader5 {
background-color: #f7f7f7;
border: 1px solid #CCCCCC;
}

#chatbox_posts {
border: 1px solid #660000;
padding: 3px;
height: 250px;
overflow: auto
}

#cmessage {
width: 140px;
background-color: #FFCCCC;
}
Kravvitz
11-01-2007, 04:37 AM
Give border-spacing:0; to the table.