How do I fix this problem theme look great in IE but not in FF?

[dreams83]

I modified the connection theme to use for my site. http://www.ehmongmusic.com and the theme display correctly in IE but it doesn't look right in FireFox.

Here is my style.css

Code Select Expand

/*
Theme Name: Connections
Version: 1.0
Description: A Theme from wpthemes.Info
Author: Patricia Muller
Author URL: http://www.vanillamist.com/blog/
Ported to CPG by: Billy Bullock
Porter URL: http://billygbullock.com
*/

body {
margin:0;
padding:0;
font-family: 'Trebuchet MS',Georgia, Times, 'Times New Roman', sans-serif;
font-size: 0.9em;
text-align:center;
color:#29303B;
line-height:1.3em;
background: #F3F6ED;
}

table {
        font-size: 12px;
}

h1, h2, h3, h4 {
font-family: Georgia, "Lucida Sans Unicode", lucida, Verdana, sans-serif;
font-weight: normal;
letter-spacing: 1px;
}

h3 {
margin: 0;
padding: 0;
font-size:1.3em;
}
p {
margin: 0 0 1em;
padding: 0;
line-height: 1.5em;
}

ul {
        margin-left: 5px;
        padding: 0px;
}

li {
        margin-left: 10px;
        margin-top: 4px;
        margin-bottom: 4px;
        padding: 0px;
        list-style-position: outside;
        list-style-type: none;
}

.textinput {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 100%;
        border: 1px solid #D1D7DC;
        padding-right: 3px;
        padding-left: 3px;
}

.listbox {
        font-family: Verdana, Arial, Arial, Helvetica, sans-serif;
        font-size: 100%;
        border: 1px solid #D1D7DC;
        vertical-align : middle;
}

.button {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 100%;
        border: 1px solid #005D8C;
        background-image : url(images/button_bg.gif);
        background-position : bottom;
}

.comment_button {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 85%;
        border: 1px solid #005D8C;
        background-image : url(images/button_bg.gif);
        background-position : bottom;
        padding-left: 3px;
        padding-right: 3px;
}

.radio {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 100%;
        vertical-align : middle;
}

.checkbox {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 100%;
        vertical-align : middle;
}

a {
    color: #909D73;
    text-decoration:none;
}
a:visited {
    color: #8a3207;
}
a:hover {
    color: #753206;
    text-decoration:underline;
}

.bblink a {
        color: #0033CC;
        text-decoration: none;
}

.bblink a:hover {
        color: #0033CC;
        text-decoration: underline;
}

.maintable {
        border: 1px solid #E6EADB;
        margin-top: 1px;
        margin-bottom: 1px;
}

.tableh1 {
        background: #E6EADB;
    color: #676E04;
        font-weight: bold;
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}

.tableh1_compact {
        background: transparent;
    color: #676E04;
        padding-top: 2px;
        padding-right: 5px;
        padding-bottom: 2px;
        padding-left: 5px;
}

.tableh2 {
        background: #E6EADB;
        color : #000000;
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}

.tableh2_compact {
        background: transparent;
        color : #000000;
        padding-top: 2px;
        padding-right: 5px;
        padding-bottom: 2px;
        padding-left: 5px;
}

.tableb {
        background: transparent;
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}


.tableb_compact {
        background: transparent;
        padding-top: 2px;
        padding-right: 5px;
        padding-bottom: 2px;
        padding-left: 5px;
}

.tablef {
        background: transparent;;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
}

.catrow_noalb {
        background: transparent;
        color : #000000;
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}

.catrow {
        background: transparent;
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}

.album_stat {
        font-size: 85%;
        margin: 5px 0px;
}

.thumb_filename {
        font-size: 80%;
        display: block;
}

.thumb_title {
        font-weight : bold;
        font-size: 80%;
        padding: 2px;
        display : block;
}

.thumb_caption {
        font-size: 80%;
        padding: 1px;
        display : block;
}

.thumb_caption a {
        text-decoration: underline;
        color: #000000;
}

.thumb_num_comments {
        font-weight: normal;
        font-size: 80%;
        padding: 2px;
        font-style : italic;
        display : block;
}

.user_thumb_infobox {
        margin-top: 1px;
        margin-bottom: 1px;
}

.user_thumb_infobox th {
        font-weight : bold;
        font-size: 100%;
        margin-top: 1px;
        margin-bottom: 1px;
        text-align : center;
}

.user_thumb_infobox td {
        font-size: 80%;
        margin-top: 1px;
        margin-bottom: 1px;
        text-align : center;
}

.user_thumb_infobox a {
        text-decoration: none;
        color: #000000;
}

.user_thumb_infobox a:hover {
        color: #000000;
        text-decoration: underline;
}

.sortorder_cell {
        background : #E6EADB;
        color : #FFFFFF;
        padding: 0px;
        margin: 0px;
}

.sortorder_options {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        background : #E6EADB;
        color : #676E04;
        padding: 0px;
        margin: 0px;
        font-weight: normal;
        font-size: 80%;
        white-space: nowrap;
}

.navmenu {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #909D73;
        background : #FFFFFF;
        font-size: 100%;
        font-weight: bold;
        border-style: none;
}

.navmenu img {
        margin-top: 1px;
        margin-right: 5px;
        margin-bottom: 1px;
        margin-left: 5px;
}

.navmenu a {
        position: relative;
        display: block;
        padding-top: 2px;
        padding-right: 5px;
        padding-bottom: 2px;
        padding-left: 5px;
        text-decoration: none;
    color: #909D73;
}

.navmenu a:hover {
        text-decoration: none;
        color: #990000;
}

.admin_menu_thumb {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 85%;
        border: 1px solid #005D8C;
        background-image : url(images/button_bg.gif);
        background-position : bottom;
        color: #000000;
        font-weight: bold;
        margin-top: 0px;
        margin-bottom: 0px;
        width: 85px;
}

.admin_menu_thumb a {
        color: #000000;
        text-decoration: none;
        display: block;
        position: relative;
        padding-top: 1px;
        padding-bottom: 1px;
        padding-left: 10px;
        padding-right: 10px;
}


.admin_menu_thumb a:hover {
        color: #000000;
        text-decoration: underline;
}

.admin_menu {
        font-family: 'Trebuchet MS',Georgia, Times, Times New Roman, sans-serif;
    font-size: 0.85em;
        border:#E1D6c6 1px solid;
        background-color: #F3F6ED;
        color:#CCCCCC;
        margin-top: 0px;
        margin-bottom: 0px;
        text-align: center;
}

.admin_menu a {
        color: #909D73;
        text-decoration: none;
        display: block;
        position: relative;
        padding-top: 1px;
        padding-bottom: 1px;
        padding-left: 2px;
        padding-right: 2px;
}

.admin_menu a:hover {
        color: #990000;
        text-decoration: underline;
}

td #admin_menu_anim {
        background-image : url(images/button_bg_anim.gif);
}

.comment_date{
        color : #5F5F5F;
        font-size : 90%;
        vertical-align : middle;
}

.image {
        border-style: solid;
        border-width:1px;
        border-color: #000000;
        margin: 2px;
}

.imageborder {
        border: 2px solid #E6EADB;
        background-color: #FFFFFF;
        margin-top: 30px;
        margin-bottom: 30px;
}

.display_media {
        background: #F3F6ED;
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}

.thumbnails {
        background: transparent;
        padding: 5px;
}

.footer {
        font-size : 9px;
}

.footer a {
        text-decoration: none;
        color: #676E04;
}

.footer a:hover {
        color: #990000;
        text-decoration: underline;
}

.statlink {
        color: #676E04;
}

.statlink h2{
        color: #676E04;
  font-size: 12px;
  font-weight: bold;
}

.statlink a {
        text-decoration: none;
        color: #676E04;
}

.statlink a:hover {
        color: #990000;
        text-decoration: underline;
}

.alblink a {
        text-decoration: underline;
        color: #676E04;
}

.alblink a:hover {
        color: #990000;
        text-decoration: underline;
}

.catlink {
        display: block;
        margin-bottom: 2px;
}

.catlink a {
        text-decoration: underline;
        color: #676E04;
}

.catlink a:hover {
        color: #990000;
        text-decoration: underline;
}

.topmenu {
        line-height : 130%;
        font-size: 100%;
}

.topmenu a {
        color : #0033CC;
        text-decoration : none;
}

.topmenu a:hover  {
        color : #0033CC;
        text-decoration : underline;
}

.img_caption_table {
        border: none;
        background-color: #FFFFFF;
        width : 100%;
        margin : 0px;
}

.img_caption_table th {
        background: #D1D7DC ;
        font-size: 100%;
        color : #000000;
        padding-top: 4px;
        padding-right: 10px;
        padding-bottom: 4px;
        padding-left: 10px;
        border-top : 1px solid #FFFFFF;
}

.img_caption_table td {
        background: #EFEFEF ;
        padding-top: 6px;
        padding-right: 10px;
        padding-bottom: 6px;
        padding-left: 10px;
        border-top : 1px solid #FFFFFF;
        white-space: normal;
}

.debug_text {
        border: #BDBEBD;
        background-color: #EFEFEF;
        width : 100%;
        margin : 0px;
}

.clickable_option {
        cursor : default;
}

.listbox_lang {
        color: #000000;
        background-color: #D1D7DC;
        border: 1px solid #D1D7DC;
        font-size: 80%;
        font-family: Arial, Helvetica, sans-serif;
        vertical-align : middle;

}

/* Wordpress styling */

/* Main wrapper */
#rap {
background:#FFF url(images/rap.jpg) center repeat-y;
width:990px;
margin:0 auto;
padding:0px 8px;
text-align:left;
font-family: Trebuchet MS,Georgia, Arial, serif;
font-size: 0.9em;
}

#main {
margin:0 auto;
padding:0;
background:#000 url(images/content_bg.gif) repeat;
width:100%;
}

#content {
width:846px;
float:right;
padding:0px;
margin:0;
overflow:auto;
display:inline;
}

#content ul {
margin-left: 0;
padding-left: 45px;
list-style-type: none;
}

#content ul li {
background: url(images/bullet.gif) no-repeat 0 7px;
padding-left: 1.5em;
}

#header {
background:#FFF url(images/top.jpg) no-repeat bottom;
height: 85px;
margin: 0 auto;
width:100%;
padding:0;
border:#fc9 0px solid;

}

#topdiv {
background:#FFF url(images/topdivide.jpg) no-repeat bottom;
height: 5px;

width: 974px;
padding:0;
border:#fc9 0px solid;

}

#topad {
background: #FFF url(images/adtop.gif) no-repeat;
width: 974px;
height:100px;

}

#header h1 {
margin: 0;
font-size: 1.6em;
padding:10px 20px 0 0;
text-align:right;
}

#header h1 a {
color:#FFFFFF;
text-decoration:none;
}

#header h1 a:hover {
color:#F7F3ED;
}

#header #desc {
font-weight:normal;
font-style:italic;
font-size:1em;
color:#9E3208;
text-align:right;
margin:0;
padding:0 20px 0 0;
}

#topnav {
list-style:none;
font-size:0.9em;
margin:0 auto;
padding:12px 20px 0 0;
text-align:right;
font-family:Verdana, Arial, Sans-Serif;
}

#topnav li {
list-style:none;
display:inline;
padding:0;
margin:0;
font-weight:bold;
}

#topnav li a:link, #topnav li a:visited {
text-decoration:none;
color:#BBC4A3;
}

#topnav li a:hover, #topnav li a:active {
color:#F7F3ED;
}

#sideclear{
background:#F3F6ED url(images/sidebg.gif) no-repeat center;
width:124px;
float:left;
height:629px;

}
#sidebar {
width:122px;
float:left;
padding:0px 0px 0px 0px;
padding-left:2px;
margin:0;
font-size:1em;
color:#333;
display:inline;
}

#sidebar h2 {
margin: 0px 0 0 0;
padding:0px;
font-size: 1em;
color: #676E04;
text-align:center;
background:url(images/sidenav_top.jpg) no-repeat center;
border:#ccc 0px solid;
height:22px;
font-weight:bold;
}

#sidebar ul {
list-style-type: none;
padding: 0px;
margin: 0;
font-size: 0.9em;
padding-bottom:3em;
background:#F3F6ED url(images/sidenav_bottom.jpg) no-repeat bottom;
border:#E1D6c6 1px solid;
border-top:#f3f6ed 1px solid;
}

#sidebar ul li {
margin: 0.1em 0 0 0;
padding: 0;
}

#sidebar li a {
text-decoration: none;
border:none;
}

#sidebar li a:link {
color: #909D73;
}

#sidebar li a:visited {
color: #999999;
}

#sidebar li a:hover, #sidebar li a:active {
color: #990000;
}

#footer {
margin:0 auto;
padding: 7px 0;
border-top:#BBC4A3 1px solid;
clear: both;
font-size: 0.8em;
color: #999;
text-align:center;
width:740px;
}

#footer a {
      border:none;
      color:#7A7636;
}

#vanity a {
        display:block;
        width:57px;
        height:20px;
        margin: 3px 20px;
}
#vanity img {border:0}
#v_php {float:left;background-image:url(../../images/powered-php.gif);}
#v_php:hover {background-image:url(../../images/h_powered-php.gif);}
#v_mysql {float:left;background-image:url(../../images/powered-mysql.gif);}
#v_mysql:hover  {background-image:url(../../images/h_powered-mysql.gif);}
#v_xhtml {float:right;background-image:url(../../images/valid-xhtml10.gif);}
#v_xhtml:hover {background-image:url(../../images/h_valid-xhtml10.gif);}
#v_css {float:right;background-image:url(../../images/valid-css.gif);}
#v_css:hover{background-image:url(../../images/h_valid-css.gif);}

Picture to What it looks like in IE
Picture to What it looks like in Firefox

Can you guys and girls help me fiigure what I need to do to make it look right on both IE and Firefox.

[Gizmo]

I can only "guess" at what the problem is from a picture so I'll say take a look at the "margins" for the main content in the style.css file. If you want more help, you'll have to post a link to your gallery.

[EDIT] I can see the link in the image attached so I'll take a look.

[Gizmo]

Try pasting this code into your style.css and see if it doesn't clear up the problem.  While I couldn't see it immediately, it looks like there is a margin being added to the "content" styling or a surrounding box.

Code Select Expand


*
{
   -moz-box-sizing: border-box !important;
}


I would also suggest you move your main menu off the javascript driven menu box. I have 2 themes that use that type of menu and I asked several friends to test it for me and only half could see if because they use Firefox with javascript turned off. That's exactly the way I surf the web and I won't turn it on when I come across a site that has so many ads. When I turned it on to check your site, I got a popup ad so I won't be back.

[dreams83]

The code seems to have fixed the upper portion of the theme here is what it looks like.

here is the code for template.html

Code Select Expand

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="{LANG_DIR}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />

<title>{TITLE}</title>

{META}
<link rel="stylesheet" href="themes/connections/style.css" type="text/css" />

</head>
<body>


{CUSTOM_HEADER}
<div id="rap">
<div id="header">
    <div>
        {SYS_MENU}
        </div>
        <h1><a href="index.php">{GAL_NAME}</a></h1>
        <div id="desc">{GAL_DESCRIPTION}</div>
</div>
    <div id="main">
<center><div><script type="text/javascript">
AC_FL_RunContent( 'width','974','height','100','codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab','src','jpgrotator','pluginspage','http://www.macromedia.com/go/getflashplayer','wmode','transparent','movie','jpgrotator' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="974" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">
  <param name="movie" value="jpgrotator.swf" />
  <param name="wmode" value="transparent" />
  <embed width="974" height="100" src="jpgrotator.swf" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="transparent" />
</object></noscript></div></center>
<div id="topad" align="center"><div style="position:relative; margin-top:5px;"><script type="text/javascript"><!--
google_ad_client = "pub-2212343180330962";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text_image";
google_ad_channel ="7013038808";
google_color_border = "FDFBF8";
google_color_bg = "F3F6ED";
google_color_link = "8A3207";
google_color_text = "676E04";
google_color_url = "78B749";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div></div>
    <div id="sideclear">
<div style="position:relative; margin-top:27px; margin-left:2px;">
<!--<a href="http://www.hmongmusiconline.com" target="_blank"><img src="hmongmusiconline.gif" border="0" /></a> --><script type="text/javascript"><!--
google_ad_client = "pub-2212343180330962";
google_ad_width = 120;
google_ad_height = 600;
google_ad_format = "120x600_as";
google_ad_type = "text";
google_ad_channel ="5231483488";
google_color_border = "FDFBF8";
google_color_bg = "F3F6ED";
google_color_link = "8A3207";
google_color_text = "676E04";
google_color_url = "78B749";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
</div>
        <div id="content">
        <div>{ADMIN_MENU}</div>
            <div>{GALLERY}</div><br/>
<div align="center" id="footer">Copyright &copy 2006, eHmongMusic.com. All rights reserved.| <a href="terms.php">Terms of Service</a>
</div>
<div align="center">
            {LANGUAGE_SELECT_FLAGS}
            {LANGUAGE_SELECT_LIST}{THEME_SELECT_LIST}
                <!-- {VANITY} -->
          </div>
</div>
</div>
</div>
{CUSTOM_FOOTER}
<div id="dwindow" style="position:absolute;background-color:#EBEBEB;cursor:hand;left:0px;top:0px;display:none" onMousedown="initializedrag(event)" onMouseup="stopdrag()" onSelectStart="return false">
<div align="right" style="background-color:navy"><img src="max.gif" id="maxname" onClick="maximize()"><img src="close.gif" onClick="closeit()"></div>
<div id="dwindowcontent" style="height:100%">
<iframe id="cframe" src="" width=100% height=100%></iframe>
</div>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-898332-1";
urchinTracker();
</script>
</body>
</html>

I took off some of the javascript code so it would fit on the post.
Thank You

[Joachim Müller]

I can only "guess" at what the problem is from a picture so I'll say take a look at the "margins" for the main content in the style.css file. If you want more help, you'll have to post a link to your gallery.

Don't post screenshots, but actual links to your coppermine-driven gallery if you want help.

[dreams83]

the gallery link is:

http://www.ehmongmusic.com

[Gizmo]

You did not specify what your issues are. I checked in IE and FF and see that the background might be missing. I then checked the site source and see that you have a bunch of javascript before the DOCTYPE declaration which means your site will not validate - http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ehmongmusic.com%2F. Fix this problem and maybe the other issues will fix themselves. I can't comment further on a site that's so full of javascript and flash.

[dreams83]

I got it fixed now.

http://www.positioniseverything.net/articles/onetruelayout/equalheight

That article helped.