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
/*
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 (http://img237.imageshack.us/img237/3817/ehmongmusicieay1.png)
Picture to What it looks like in Firefox (http://img237.imageshack.us/img237/9416/ehmongmusicffki8.png)
Can you guys and girls help me fiigure what I need to do to make it look right on both IE and Firefox.
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.
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.
*
{
-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.
The code seems to have fixed the upper portion of the theme here is what it looks like. (http://img292.imageshack.us/img292/6760/upperbk3.png)
here is the code for template.html
<!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 © 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
Quote from: Gizmo on November 14, 2006, 11:29:52 AM
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.
the gallery link is:
http://www.ehmongmusic.com
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 (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.
I got it fixed now.
http://www.positioniseverything.net/articles/onetruelayout/equalheight
That article helped.