Any .css pros here?

[Rhomal]

Need help with correcting slight issue with the skin on my site, only in IE does the left image display above the rest of the page. non-IE browsers render the page fine. See the site in my sig, if you need the .css file I'll post here.

 

Any help appreciated, thanks!

[samm]

What about posting the section of the css responsible for that image here? There are many css-files mentioned on your page.

What can also cause issues is incorrect markup, because it then depends even more on the browser how things are interpreted. Check this out: http://validator.w3.org/check?uri=http%3A%...ine&group=0

[Rhomal]

What about posting the section of the css responsible for that image here? There are many css-files mentioned on your page.

What can also cause issues is incorrect markup, because it then depends even more on the browser how things are interpreted. Check this out: http://validator.w3.org/check?uri=http%3A%...ine&group=0

 

Here is the .css in question, the image in question is Game1_01.jpg ill check that link thanks and if you have any other suggestions please let me know!

 

.outbox {

background-color: #000000;

margin:0 ;

text-align:center;

width:100%;

}

.inbox {

position:relative;

margin:0 auto;

text-align:left;

width: 1024px;

background-color: #000000;

}

.leftbg {

background:url(images/Game1_01.jpg) no-repeat left top #000000;

float:left;

width:214px;

height:800px;

}

.skinbody {

float:right;

width:810px;

}

.toppart {

background-image:url(images/Game1_02.jpg);

background-position:left;

background-repeat:no-repeat;

background-color:#000000;

height:176px;

}

.center {

height:370px;

background-color:#efd99d;

}

 

body{ background:#ffffff; border-left:0px; border-right:0px; height:100%; }

.controlpanel{ background:#ffffff; border:#000000 solid; border-width:0px 0px 2px; width:100%;}

.controlpanel IMG{ margin:15px 5px 0px; }

.controlpanel TD TD TD TD IMG{ margin:0px; }

.controlpanel TD TD TD{ width:auto; }

.controlpanel DIV{ border:#000 solid; border-width:0px 1px; width:3px; height:100px; }

.controlpanel TD.SubHead{ background:#ffffff; font-size:12px; color:#292524; font-weight:bold; }

.controlpanel TD TD TD .SubHead{ background:transparent; border:0px; font-size:11px; color:#292524; font-weight:normal; }

.controlpanel TD TD TD input{ background:#fff; font-size:11px; color:#000; padding-left:4px; }

.controlpanel TD TD TD select{ background:#fff; font-size:11px; color:#333; }

.controlpanel A.CommandButton{ font-size:10px; text-decoration:underline; }

.controlpanel A.CommandButton:link{ color:#292524;text-decoration:underline; }

.controlpanel A.CommandButton:visited{ color:#292524; text-decoration:underline;}

.controlpanel A.CommandButton:active{ color:#292524; text-decoration:underline;}

.controlpanel A.CommandButton:hover{ color:#292524; text-decoration:none;}

 

.BannerPane{

PADDING: 0px; WIDTH: 100%px; BORDER: 0px;

}

.HeaderPane{

PADDING: 0px; WIDTH: 100%px; BORDER: 0px;

}

.TopPane {

PADDING-RIGHT: 7px; PADDING-LEFT: 7px; PADDING-BOTTOM: 0px; WIDTH: 100%; PADDING-TOP: 0px

}

.TopPane2 {

PADDING-RIGHT: 7px; PADDING-LEFT: 7px; PADDING-BOTTOM: 0px; WIDTH: 100%; PADDING-TOP: 0px

}

.LeftPane {

PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 0px; WIDTH: 50%; PADDING-TOP: 0px

}

.RightPane {

PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 0px; WIDTH: 50%; PADDING-TOP: 0px

}

.LeftPane2 {

PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px

}

.ContentPane {

PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px

}

.ContentPane2 {

PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px

}

.RightPane2 {

PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px

}

.BottomPane {

PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 0px; WIDTH: 100%; PADDING-TOP: 0px

}

.LeftPane3 {

PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 0px; WIDTH: 33%; PADDING-TOP: 0px

}

.ContentPane3 {

PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px

}

.RightPane3 {

PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 0px; WIDTH: 33%; PADDING-TOP: 0px

}

.BottomPane2 {

PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 0px; WIDTH: 100%; PADDING-TOP: 0px

}

 

 

.Head {

FONT-WEIGHT: bold; FONT-SIZE: 13px; COLOR: #000000;FONT-FAMILY: tahoma;

}

.SubHead {

FONT-SIZE: 11px; COLOR: #000000;FONT-FAMILY: tahoma;

}

.SubSubHead {

FONT-SIZE: 11px; COLOR: #000000;FONT-FAMILY: tahoma;

}

.Normal {

FONT-SIZE: 11px; COLOR: #000000;FONT-FAMILY: tahoma;

}

.CommandButton ,A.CommandButton:link,A.CommandButton:visited,A.CommandButton:active {

COLOR: #ca5505; TEXT-DECORATION: none;FONT-FAMILY: tahoma;

}

A.CommandButton:hover {

COLOR: #ca5505; TEXT-DECORATION: underline;FONT-FAMILY: tahoma;

}

TH ,TD,DIV{

FONT-SIZE: 11px; COLOR: #000000;FONT-FAMILY: tahoma;

}

A ,A:link ,A:visited,A:active {

COLOR: #ca5505; TEXT-DECORATION: underline;FONT-FAMILY: tahoma;

}

A:hover {

COLOR: #333333; TEXT-DECORATION: none;FONT-FAMILY: tahoma;

}

A.user:link ,A.user:active,A.user:visited ,.user {

FONT-SIZE: 11px; COLOR: #ffffff; TEXT-DECORATION: none;FONT-FAMILY: tahoma;

}

A.user:hover {

FONT-SIZE: 11px; COLOR: #ca5505; TEXT-DECORATION:none;FONT-FAMILY: tahoma;

}

.date {

FONT-WEIGHT:normal; FONT-SIZE: 11px; COLOR: #fffff;TEXT-DECORATION:none;FONT-FAMILY: tahoma;

}

#dnn_dnnSEARCH_txtSearch.NormalTextBox { height:17px; background: #000; width: 120px; padding: 1px 1px 1px 2px; color:#FFFFFF; border: 1px solid #de9d03; cursor:text; vertical-align:middle;}

.search,A.search:link ,A.search:active ,A.search:visited {

FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #ffffff;FONT-FAMILY: tahoma;

}

A.search:hover {

FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #ca5505;FONT-FAMILY: tahoma;

}

.footer,A.footer:link,A.footer:active,A.footer:visited {

FONT-SIZE: 11px; COLOR: #ffffff; TEXT-DECORATION: none;FONT-FAMILY: tahoma;

}

A.footer:hover {

COLOR: #ca5505; TEXT-DECORATION: none;FONT-FAMILY: tahoma;

}

.links,A.links:link,A.links:active ,A.links:visited {

FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #ffffff; TEXT-DECORATION: none;FONT-FAMILY: tahoma;

}

A.links:hover {

FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #ca5505; TEXT-DECORATION: none;FONT-FAMILY: tahoma;

}

 

 

.MainMenu_MenuContainer {

background-color: Transparent;

}

.MainMenu_MenuBar {

}

.MainMenu_MenuIcon {

DISPLAY: none

}

.MainMenu_RootMenuArrow {

DISPLAY: none

}

.MainMenu_MenuArrow {

DISPLAY: none

}

.MainMenu_MenuItemSel {

BACKGROUND: none transparent scroll repeat 0% 0%

}

.MainMenu_MenuItem {

BORDER: #000000 1px solid;

PADDING-RIGHT: 15px;

PADDING-LEFT: 10px; PADDING-BOTTOM: 2px;

FONT: bold 10px Tahoma, Arial, Helvetica, sans-serif;

COLOR: #e0c47b;

PADDING-TOP: 2px;

 

}

 

.submenuitemselected,.submenuitembreadcrumb {

BORDER: #000000 1px solid;

PADDING-RIGHT: 15px;

PADDING-LEFT: 10px;

BACKGROUND: #926a2d;

PADDING-BOTTOM: 2px;

MARGIN: 0px;

FONT: bold 10px Tahoma, Arial, Helvetica, sans-serif;

COLOR: #fff;

FILTER: Alpha(Opacity=90);

PADDING-TOP: 2px;

}

.submenu {

BORDER: #666666 1px solid;

MARGIN-TOP: 0px; Z-INDEX: 1000;

BACKGROUND: #000000;

FILTER: Alpha(Opacity=90);

CURSOR: hand;

}

.rootmenuitem TD{

color:#926a2d;

BACKGROUND: none transparent;

font-size:13px; font-weight:bold;

font-family:Arial, Helvetica, sans-serif;

text-align:center;

padding-right:10px;

padding-left:10px;

height:27px;

}

.rootmenuitemselected TD,.rootmenuitembreadcrumb TD{

color:#c27819; font-size:13px; font-weight:bold;

font-family:Arial, Helvetica, sans-serif;

BACKGROUND: none transparent;

text-align:center;

padding-right:10px;

padding-left:10px;

height:27px;

}

 

.MainMenu_MenuBreak {

border: transparent 0px solid;

background-color: transparent;

height: 1px;

}

 

.Eventday,.Eventweekenday{background-color:#FFFFFF}

.DataGrid_AlternatingItem{background-color:#e9d69b}

.DataGrid_Item{background-color:#e9d69b}

Edited December 22, 2008 by Rhomal

[Spider]

I'd change .skinbody to float:left and make sure it appears after leftbg in the html (as in immediately after, nothing between them). Should help with IE6 compability as well (where float right always causes problems)

[Rhomal]

I'd change .skinbody to float:left and make sure it appears after leftbg in the html (as in immediately after, nothing between them). Should help with IE6 compability as well (where float right always causes problems)

 

Thanks you so much! However the creator of the skin I am using finally did reply, she not only fixed the .css file but also cleaned up my images to blend into the skin better. So alls good. I tested the site out in IE7 (I don't have 6 anymore) and its fixed as least on that version. Thanks again none the less!

[samm]

Just tested it, it's fine in IE 6 too