Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,472
There are 1609 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

Need Assistance: Cross Browser Fix

Thread title: Need Assistance: Cross Browser Fix
Reply    
    Thread tools Search this thread Display Modes  
09-10-2010, 12:56 AM
 #1
Ethan is offline Ethan
Ethan's Avatar
Status: I'm new around here
Join date: Sep 2006
Location: US
Expertise: html, css, photoshop
Software: photoshop, notepad, wordpress
 
Posts: 22
iTrader: 0 / 0%
 

Ethan is on a distinguished road

  Old  Need Assistance: Cross Browser Fix

I'm currently working on a portfolio that I've created out of Wordpress theme. I made the mistake of only previewing it in Chrome while I was changing it around. In Chrome, it looks nice and functions well. However, recently, I opened up Firefox and IE8 and noticed some issues in which I'm having some significant trouble locating.

This is my site: http://s281065418.onlinehome.us/gem/portfolio/

Issue 1: When viewing it chrome, all seems well. Viewing it in IE8 shows 3 errors, two having to do with my twitter embedding script at the bottom of the page and another error just says "Object doesn't support this property or method: portfolio/ on line 112955119" but more obviously you can see that it breaks the scrolling thumbnails script which displays the large images at the front of the page.

Issue 2: When viewing in firefox, I can't seem to get -moz-border-radius to work on any of the images. I've double checked whether this should work and if I have my code correct which seems so.

This is my index.php code where the scrolling thumbnail script is located:

HTML Code:
<?php get_header(); ?>

<!-- This is the scroll content area; the one with the bigger images -->	

<div id="main">

	<!-- And this is where you configure your scroll content -->

<div id="pages">

		
                <!-- page #1 -->
		<div class="page">

		<!-- sub navigator #1 -->

		<div class="navi"></div>

		<!-- inner scrollable #1 -->
		<div class="scrollable">

		<!-- root element for scrollable items -->
		<div class="items">

		<?php $recent = new WP_Query("category_name='websites'&showposts=3"); while($recent->have_posts()) : $recent->the_post();?>

		<!-- items  -->
		<div class="item">

		<?php $thumbnail = get_post_meta($post->ID, 'Thumbnail', true); ?>
		<?php if($thumbnail !== '') { ?>
		<img src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php echo $thumbnail; ?>&amp;h=300&amp;w=898&amp;zc=1" alt="<?php the_title(); ?>" />
		<?php } ?>

		<h1><span></span><a href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title(); ?>"><?php the_title2('', '..', true, '75'); ?></a></h1>
		<!-- <div class="meta-data">Posted by <?php the_author() ?> | Published on <?php the_time('l, F jS, Y') ?> | <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></div> -->
		<?php if (function_exists('the_content_limit')) { the_content_limit(550, ""); } else { echo 'You have not uploaded and acivated the limit posts plugin. This is required.'; } ?>
		<div class="meta-data"><!--Taged in:--> <!?php the_tags(' ', ', ', ', '); ?></div>

		</div>

		<?php endwhile; ?>

		</div>
		</div>
		</div>


		<!-- page #2 -->
		<div class="page">

		<!-- sub navigator #2 -->

		<div class="navi"></div>

		<!-- inner scrollable #2 -->
		<div class="scrollable">

		<!-- root element for scrollable items -->
		<div class="items">

		<?php $recent = new WP_Query("category_name='print-media'&showposts=3"); while($recent->have_posts()) : $recent->the_post();?>

		<!-- items  -->
		<div class="item">

		<?php $thumbnail = get_post_meta($post->ID, 'Thumbnail', true); ?>
		<?php if($thumbnail !== '') { ?>
		<img src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php echo $thumbnail; ?>&amp;h=300&amp;w=898&amp;zc=1" alt="<?php the_title(); ?>" />
		<?php } ?>

		<h1><a href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title(); ?>"><?php the_title2('', '..', true, '75'); ?></a></h1>
		<!-- <div class="meta-data">Published on <?php the_time('l, F jS, Y') ?> | <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></div> -->
		<?php if (function_exists('the_content_limit')) { the_content_limit(550, ""); } else { echo 'You have not uploaded and acivated the limit posts plugin. This is required.'; } ?>
		<!-- <div class="meta-data">Taged in: <?php the_tags(' ', ', ', ', '); ?></div> -->

		</div>

		<?php endwhile; ?>

		</div>
		</div>
		</div>


		<!-- page #3 -->
		<div class="page">

		<!-- sub navigator #3 -->

		<div class="navi"></div>

		<!-- inner scrollable #3 -->
		<div class="scrollable">

		<!-- root element for scrollable items -->
		<div class="items">

		<?php $recent = new WP_Query("category_name='corporate-branding'&showposts=3"); while($recent->have_posts()) : $recent->the_post();?>

		<!-- items  -->
		<div class="item">

		<?php $thumbnail = get_post_meta($post->ID, 'Thumbnail', true); ?>
		<?php if($thumbnail !== '') { ?>
		<img src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php echo $thumbnail; ?>&amp;h=300&amp;w=898&amp;zc=1" alt="<?php the_title(); ?>" />
		<?php } ?>

		<h1><a href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title(); ?>"><?php the_title2('', '..', true, '75'); ?></a></h1>
		<!-- <div class="meta-data">Published on <?php the_time('l, F jS, Y') ?> | <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></div> -->
		<?php if (function_exists('the_content_limit')) { the_content_limit(550, ""); } else { echo 'You have not uploaded and acivated the limit posts plugin. This is required.'; } ?>
		<!-- <div class="meta-data">Taged in: <?php the_tags(' ', ', ', ', '); ?></div> -->

		</div>

		<?php endwhile; ?>

		</div>
		</div>
		</div>


		<!-- page #4 -->
		<div class="page">

		<!-- sub navigator #4 -->

		<div class="navi"></div>

		<!-- inner scrollable #4 -->
		<div class="scrollable">

		<!-- root element for scrollable items -->
		<div class="items">

		<?php $recent = new WP_Query("category_name='logos-icons'&showposts=3"); while($recent->have_posts()) : $recent->the_post();?>

		<!-- items  -->
		<div class="item">

		<?php $thumbnail = get_post_meta($post->ID, 'Thumbnail', true); ?>
		<?php if($thumbnail !== '') { ?>
		<img src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php echo $thumbnail; ?>&amp;h=300&amp;w=898&amp;zc=1" alt="<?php the_title(); ?>" />
		<?php } ?>

		<h3><a href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title(); ?>"><?php the_title2('', '..', true, '75'); ?></a></h3>
		<div class="meta-data">Published on <?php the_time('l, F jS, Y') ?> | <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></div>
		<?php if (function_exists('the_content_limit')) { the_content_limit(550, ""); } else { echo 'You have not uploaded and acivated the limit posts plugin. This is required.'; } ?>
		<div class="meta-data">Taged in: <?php the_tags(' ', ', ', ', '); ?></div>

		</div>

		<?php endwhile; ?>

		</div>
		</div>
		</div>


		<!-- page #5 -->
		<div class="page">

		<!-- sub navigator #5 -->

		<div class="navi"></div>

		<!-- inner scrollable #5 -->
		<div class="scrollable">

		<!-- root element for scrollable items -->
		<div class="items">

		<?php $recent = new WP_Query("category_name='themes-templates'&showposts=3"); while($recent->have_posts()) : $recent->the_post();?>

		<!-- items  -->
		<div class="item">

		<?php $thumbnail = get_post_meta($post->ID, 'Thumbnail', true); ?>
		<?php if($thumbnail !== '') { ?>
		<img src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php echo $thumbnail; ?>&amp;h=300&amp;w=898&amp;zc=1" alt="<?php the_title(); ?>" />
		<?php } ?>

		<h3><a href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title(); ?>"><?php the_title2('', '..', true, '75'); ?></a></h3>
		<div class="meta-data">Published on <?php the_time('l, F jS, Y') ?> | <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></div>
		<?php if (function_exists('the_content_limit')) { the_content_limit(550, ""); } else { echo 'You have not uploaded and acivated the limit posts plugin. This is required.'; } ?>
		<div class="meta-data">Taged in: <?php the_tags(' ', ', ', ', '); ?></div>

		</div>

		<?php endwhile; ?>

		</div>
		</div>
		</div>

	</div>
</div>

<div id="bottom">
<!-- This is the left navigation on Home Page -->
<ul id="main_navi">
	<li><img src="<?php bloginfo('stylesheet_directory'); ?>/images/web.jpg" alt="Websites" /></li>
	<li><img src="<?php bloginfo('stylesheet_directory'); ?>/images/print.jpg" alt="Print Media" /></li>
	<li><img src="<?php bloginfo('stylesheet_directory'); ?>/images/branding.jpg" alt="Corporate Branding" /></li>
	<li><img src="<?php bloginfo('stylesheet_directory'); ?>/images/logos.jpg" alt="Logos Icons" /></li>
	<li><img src="<?php bloginfo('stylesheet_directory'); ?>/images/themes.jpg" alt="Themes Templates" /></li>
</ul>

<div id="twitter-feed">
	<ul id="twitter_update_list"><li></li></ul>
</div>

<div id="search-form">
	<?php $search_text = "Search"; ?> 
	<form method="get" id="searchform"  
	action="<?php bloginfo('home'); ?>/"> 
	<input type="text" value="<?php echo $search_text; ?>"  
	name="s" id="s"  
	onblur="if (this.value == '')  
	{this.value = '<?php echo $search_text; ?>';}"  
	onfocus="if (this.value == '<?php echo $search_text; ?>')  
	{this.value = '';}" /> 
	<input type="hidden" id="searchsubmit" /> 
	</form>
</div>

<!-- KEEP THIS FOR TWITTER FEED -->
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/gemarrs.json?callback=twitterCallback2&count=1"></script>

</div>
<br clear="all" />

<script type="text/javascript">
$(document).ready(function() {
$("#main").scrollable({
	vertical: true,
	size: 1,
	clickable: false,
	keyboard: 'static',
	onSeek: function(event, i) {
		horizontal.scrollable(i).focus();
	}
}).navigator("#main_navi");
var horizontal = $(".scrollable").scrollable({size: 1}).circular().navigator(".navi");
horizontal.eq(0).scrollable().focus();
});
</script>

<?php get_footer(); ?>
This is my primary CSS:

Code:
/*************************************
Custom Fonts
*************************************/

@font-face {
  font-family: "headthinker";
  src: url("http://s281065418.onlinehome.us/gem/fonts/headthinker.ttf"); 
}

/*************************************
Universal Settings
*************************************/
body {
background : #333 url(images/bg-home.jpg) repeat-x center top;
color : #bbb;
font-family : "Arial", Helvetica, sans-serif;
font-size : 10px;
line-height : 16px;
margin : 0;
padding : 0;
text-align : center;
}
#wrap {
margin : 0 auto;
text-align : left;
width : 980px;
padding : 0;
}
#content {
background : url(images/content-bg.jpg) no-repeat left top;
font-size : 1.2em;
float : left;
padding-top : 30px;
padding-left : 40px;
padding-right : 30px;
width : 589px;
border-right : 1px solid #616262;
}
/*************************************
Typography & General Styles
*************************************/
h1, h2, h3, h4, h5 a{
font-family : Myriad-Pro, "Arial", Helvetica, sans-serif;
color: #ccc;
text-align : center;
text-transform: uppercase;
margin: 5px 0; 
 
        text-shadow: 0 2px 3px #000;  
        -webkit-transition: all .3s;  
        -moz-transition: all .3s;  
        transition: all .3s;

}


h5 {
font-weight: normal;
}
h1, h2, h3, h4, h5 a:hover {
color: #aaa;
}
h1 {
font-size : 20px;
line-height : 20px;
font-family: Myriad-Pro, "Arial Black", "Arial";
font-weight: normal;
letter-spacing: -1px; 
color: #bbb;
padding: 5px;
background-color: #222;
background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.10, rgb(50,50,50)),
    color-stop(0.72, rgb(22,22,22))
);
background: -moz-linear-gradient(
    center top,
    rgb(50,50,50) 10%,
    rgb(22,22,22) 72%
);
text-align: center;

-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
border-radius: 3px;
border-top:1px #000 solid;
border-right:1px #000 solid;
border-bottom:1px #777 solid;
border-left:1px #000 solid;

}

background: -moz-linear-gradient(
    center top,
    rgb(80,80,80) 10%,
    rgb(22,22,22) 72%
);
  position: absolute;
  display: block;
  width: 100%;
  height: 31px;
}

h2 {
font-size : 18px;
line-height : 20px;
}
h3 {
font-size : 14px;
line-height : 16px;
}
h4 {
font-size : 12px;
line-height : 14px;
}
h5 {
font-size : 11px;
line-height : 12px;
margin: 7px 3px;
text-align: left;
}
a {
text-decoration : none;
color: #999;
}
a:hover {
text-decoration : none;
color: #ddd;
}
a img {
border : none;
}
ul li {
list-style-type : none;
}
.thumbnail {
border : 1px solid #444;
float : left;
margin : 0 15px 15px 0;
}
.meta-data {
font-size : 10px;
line-height : 15px;
color: #aaa;
position : relative;
float : left;
width : 100%;
text-transform : uppercase;
padding : 0 0 0 1px;
margin: 5px 0;
}
.floatleft {
float : left;
}
.floatright {
float : right;
}
.clear, .cleared {
clear : both;
}
.seperator {
margin: 20px 0;
border-bottom : 1px solid #626262;
}
/*************************************
Header & Logo
*************************************/
#header {
background : url(images/header-bg.jpg) no-repeat left top;
height : 150px;
padding : 0;
margin : 0;
}
.logo img {
float : left;
padding-top : 40px;
padding-left : 60px;
border : none;
}
/*************************************
Top Navigation Columns
*************************************/
#top-nav-wrapper {
width : 480px;
height : 120px;
padding : 0;
margin : 5px 30px 0 0;
float : right;
display : block;
}
#top-nav-wrapper ul {
padding : 0;
margin: 5px 0;
width : 140px;
}
#top-nav-wrapper ul li {
border-bottom : 1px solid #555;
padding : 1px 5px;
}
.column-one {
width : 150px;
float : left;
padding : 5px;
}
.column-two {
width : 150px;
float : left;
padding : 5px;
}
.column-three {
width : 150px;
float : left;
padding : 5px;
}
/*************************************
Home Slider Styles
*************************************/
#main {
background : url(images/slider-bg.jpg) no-repeat left top;
background-color:#000;
position : relative;
overflow : hidden;
height : 475px;
font-size: 11px;
}
#pages {
position : absolute;
height : 600px;
}
.page {
padding : 30px 0;
height : 500px;
width : 980px;
}
.scrollable {
position : relative;
overflow : hidden;
width : 900px;
height : 475px;
margin : 0 auto;

}
.scrollable .items {
width : 20000em;
position : absolute;
clear : both;
}
.item {
float : left;
cursor : pointer;
width : 900px;
height : 300px;
font-size:15px;
text-align: center;
-webkit-border-radius: 30px; /* Saf3+, Chrome */

	border-radius: 30px; /* Opera 10.5, IE 9 */

	-moz-border-radius: 30px;  /* FF1+ */
}
.item img {
background-color: #000;
border : 1px solid #222;
-webkit-border-radius: 20px; /* Saf3+, Chrome */
border-radius: 20px; /* Opera 10.5, IE 9 */
-moz-border-radius: 20px; 
}

.item img:hover {
}

#bottom {
background : url(images/home-bottom-bg.jpg) no-repeat left top;
position : relative;
overflow : hidden;
height : 170px;
margin-top : 1px;
padding : 0 40px;
}
#main_navi {
background : #333;
width : 900px;
height : 66px;
padding : 0 !important ;
margin : 0 auto !important ;
border-top : 1px solid #444;
border-bottom : 1px solid #444;
}
#main_navi li {
background-color : #222;
height : 65px;
padding : 0 0 1px 0;
width : 180px;
cursor : pointer;
list-style-type : none;
float : left;
}
#main_navi li:hover {
background-color : #555;
}
#main_navi li.active {
background-color : #777;
}
#main_navi img {
float : left;
margin-right : 10px;
}
#main_navi strong {
display : block;
}
#main div.navi {
margin-left : 250px;
cursor : pointer;
}
/*************************************
Post Styles
*************************************/
.entry {
margin-bottom : 15px;
}
.entry img {
border: 1px solid #555;
}
.entrybody {
margin : 15px 0;
}
.entrymeta {
font-size : 11px;
padding : 5px 0 0 0;
}

.post_thumb {
border: 2px #000 solid;
padding: 0px;
margin: 0px;
width: 589px;
height: 202px;
}

.post_thumb, .post_thumb img { 
padding: 0px;
-webkit-border-radius: 10px; /* Saf3+, Chrome */
border-radius: 10px; /* Opera 10.5, IE 9 */
-moz-border-radius: 10px;  /* FF1+ */

}

/*************************************
Sidebar Styles
*************************************/
#sidebar {
background : url(images/sidebar-bg.jpg) no-repeat right top;
background-color : transparent;
font-size : 12px;
float : right;
padding-top : 0px;
padding-right : 40px;
padding-left : 30px;
width : 250px;
margin: 0;
}
#sidebar h4 {
margin : 20px 0 10px 0;
padding : 5px;
font-size : 14px;
line-height: 18px;
font-weight: bold;
background-color: #222;
background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.10, rgb(50,50,50)),
    color-stop(0.72, rgb(22,22,22))
);
background: -moz-linear-gradient(
    center top,
    rgb(50,50,50) 10%,
    rgb(22,22,22) 72%
);
text-align: center;

-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
border-radius: 3px;
border-top:1px #000 solid;
border-right:1px #000 solid;
border-bottom:1px #777 solid;
border-left:1px #000 solid;
}
#sidebar ul {
list-style-type : none;
margin : 0;
padding : 0;
font-size : 14px;
}
#sidebar ul li {
background : url(images/list-bg.png) no-repeat left;
border-bottom : 1px solid #404040;
margin-bottom : 0.3em;
padding : 3px 3px 3px 20px;
}
#sidebar ul li:hover {
background : url(images/list-bg-over.png) no-repeat left;
}
#ad-300 {
	width: 300px;
	float: left;
}
/*************************************
Comments Styles
*************************************/
.commentsblock {
width : 539px;
margin : 15px 0;
padding : 0;
}
.commentsblock textarea {
width : 539px;
background : #555;
}
.commentsblock input, .commentsblock textarea {
background : #555;
border : 1px solid #777;
}
.commentsblock textarea:focus {
background : #ddd;
border : 1px solid #555;
}
.commentsblock textarea:focus, .commentsblock input:focus {
background : #ddd;
border : 1px solid #555;
}
.commentauthor {
display : block;
font-size : 1.5em;
}
ol.commentlist {
color : #888;
font-size : 0.9em;
list-style-type : none;
margin : 0;
margin-top : 1.5em;
padding : 0;
}
.commentlist li {
margin-bottom : 0.5em;
padding : 0.5em 1em;
}
.alt {
background : #222;
border : 1px solid #333;
padding : 0.5em;
}
/*************************************
Portfolio Styles
*************************************/
#portfolio-container {
background : url(images/slider-bg.jpg) no-repeat left top;
float : left;
padding-top : 40px;
padding-left : 40px;
padding-right : 40px;
margin : 0;
width : 900px;
height : 450px;
list-style-type : none;
clear : both;
text-align: center;
}
.portfolio-thumbnail {
background : #252525;
border : 1px solid #555;
float : left;
width : 158px;
height : 100px;
margin : 0 5px 10px 5px;
padding : 5px;
overflow : hidden;
display : block;
}
#portfolio-title {
background : url(images/portfolio-header.jpg) no-repeat left top;
width : 900px;
height: 50px;
padding : 35px 0 20px 100px;
margin: 0;
float : left;
text-align : left;
display : block;
font-size : 35px;
text-transform : uppercase;
font-family: "Arial Black", Arial, Helvetica, sans-serif;
font-weight: bold;
color: #999;
}
#category-title {
width : 600px;
padding : 50px 0;
height : 100px;
float : right;
text-align : left;
display : block;
font-size : 35px;
text-transform : uppercase;
}

/*************************************
Services Page Navigation Tabs
*************************************/
#nav {
display : block;
height : 66px;
width : 900px;
margin : 0 auto;
}
#nav ul {
width : 900px;
padding : 0;
margin : 0 auto;
display : block;
}
#nav li {
border-right : 1px solid #222;
float : left;
list-style-type : none;
text-align : center;
}
#nav a {
display : block;
position : relative;
word-spacing : -2px;
font-size : 11px;
height : 66px;
text-decoration : none;
}
#nav a.current {
background : #333;
}
#nav img {
border : none;
display : block;
float : left;
}
#nav strong {
display : block;
font-size : 13px;
}
#panes {
background : url(images/slider-bg.jpg) no-repeat left top;
width : 980px;
min-height : 450px;
padding-left : 40px;
padding-top : 25px;
position : relative;
font-size: 11px;
}
#panes div {
display : block;
position : absolute;
width : 900px;
}
#panes img {
border : 1px solid #616262;
float : right;
margin-bottom : 15px;
}
#panes textarea {
width : 798px;
height : 75px;
background : #555;
border : 1px solid #777;
}
#panes input {
background : #333;
border : 1px solid #777;
}
#panes textarea:focus {
background : #ddd;
border : 1px solid #555;
}
#panes textarea:focus {
background : #ddd;
border : 1px solid #555;
}
#panes input:focus {
background : #ccc;
border : 1px solid #555;
}
#panes select {
background : #333;
color: #999;
border : 1px solid #777;
}
#panes select:focus {
background : #111;
color: #aaa;
border : 1px solid #777;
}
.more {
font-weight : bold;
}
.overlay {
display : none;
width : 900px;
padding : 20px;
}
/*************************************
Full Width Page Styles
*************************************/
#fullwidth-container {
background : url(images/slider-bg.jpg) no-repeat left top;
float : left;
padding-top : 30px;
padding-left : 40px;
padding-right : 40px;
margin : 0;
width : 900px;
list-style-type : none;
clear : both;
}
#fullwidth-container img {
border : 1px solid #616262;
float : right;
margin-bottom : 15px;
}
#fullwidth-container textarea {
width : 798px;
height : 75px;
background : #555;
}
#fullwidth-container input {
background : #333;
border : 1px solid #777;
}
#fullwidth-container textarea {
background : #333;
border : 1px solid #777;
}
#fullwidth-container textarea:focus {
background : #ddd;
border : 1px solid #555;
}
#fullwidth-container textarea:focus {
background : #ddd;
border : 1px solid #555;
}
#fullwidth-container input:focus {
background : #ccc;
border : 1px solid #555;
}
#fullwidth-container select {
background : #333;
color: #999;
border : 1px solid #777;
}
#fullwidth-container select:focus {
background : #111;
color: #aaa;
border : 1px solid #777;
}
/*************************************
Footer
*************************************/
#footer {
background : #111;
height : 35px;
clear : both;
font-size : 11px;
margin-top : 15px;
padding-top : 25px;
border-top : 1px solid #444;
text-align: left;
}
.notices {
width: 900px;
margin: 0 auto;
text-align: left;
}
.notices img{
float: right;
margin-top: 5px;
}
/*************************************
Twitter Feed on Homepage
*************************************/
#twitter-feed {
background : url(images/twitter-bg.png) no-repeat left top;
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
width : 550px;
float : left;
padding : 0 0 0 20px;
margin-top : 20px;
}
#twitter_div ul {
list-style-type : none;
}
#twitter_div li a {
text-decoration : none;
list-style-type : none;
}
#twitter_div li a:hover {
text-decoration : none;
}
/*************************************
Search Form, Search & Tags Page Title
*************************************/
#search-form {
margin-top : 20px;
padding-top : 14px;
float : right;
}
#search-form input {
width : 242px;
height : 25px;
background : #151515;
border : 1px solid #444;
color: #555;
padding : 3px;
-webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 10px;
font-size: 20px;
}
#search-tags-title {
width : 510px;
background: #111;

background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.13, rgb(50,50,50)),
    color-stop(0.85, rgb(22,22,22))
);
background: -moz-linear-gradient(
    center top,
    rgb(50,50,50) 13%,
    rgb(22,22,22) 85%
);
background: -webkit-box-shadow: 5px 5px 5px ;
-moz-box-shadow: 5px 5px 5px ;
box-shadow: 5px 5px 5px ;

margin: 0 0 10px 0;
padding : 0 10px;
line-height : 35px;
float : left;
text-align : left;
display : block;
font-family: "Arial Black", Arial, Helvetica, sans-serif;
font-size : 15px;
font-weight: bold;
color: #999;
text-transform : uppercase;
text-decoration: none;
}
/*************************************
PageNavi Container
*************************************/
#page-navigator {
float : right;
margin-top : 15px;
margin-bottom : 15px;
margin-right : 0px;
}
.navigation {
display : block;
text-align : center;
padding-top : 38px;
height : 50px;
padding-left : 6px;
margin : 0 auto;
}
/*************************************
WP Page Navi Styles
*************************************/
.wp-pagenavi a, .wp-pagenavi a:link {
padding : 2px 6px 2px 5px;
margin : 2px;
text-decoration : none;
border : 1px solid #626262;
background-color : #333;
}
.wp-pagenavi a:visited {
padding : 2px 6px 2px 5px;
margin : 2px;
text-decoration : none;
border : 1px solid #555;
background-color : #222;
}
.wp-pagenavi a:hover {
border : 1px solid #444;
color : #ccc;
background-color : #222;
}
.wp-pagenavi a:active {
padding : 2px 6px 2px 5px;
margin : 2px;
text-decoration : none;
border : 1px solid #626262;
background-color : #333;
}
.wp-pagenavi span.pages {
padding : 2px 8px 2px 6px;
margin : 2px 2px 2px 2px;
border : 1px solid #626262;
background-color : #111;
}
.wp-pagenavi span.current {
padding : 2px 6px 2px 5px;
margin : 2px;
font-weight : bold;
border : 1px solid #626262;
background-color : #222;
}
.wp-pagenavi span.extend {
padding : 2px 6px 2px 5px;
margin : 2px;
border : 1px solid #626262;
background-color : #333;
}
and this is my "if IE7" css:

Code:
/*************************************
Universal Settings
*************************************/
body {
background : #333 url(images/bg-home.jpg) repeat-x center top;
color : #777;
font-family : "Arial", Helvetica, sans-serif;
font-size : 11px;
line-height : 14px;
margin : 0;
padding : 0;
text-align : center;
}
#wrap {
margin : 0 auto;
text-align : justify;
width : 980px;
padding : 0;
}
#content {
background : url(images/content-bg.jpg) no-repeat left top;
font-size : 1.2em;
float : left;
padding-top : 30px;
padding-left : 40px;
padding-right : 30px;
width : 539px;
border-right : 1px solid #616262;
}
/*************************************
Typography Styles
*************************************/
h1, h2, h3, h4, h5 a{
font-family : "Arial", Helvetica, sans-serif;
color: #999;
text-align : left;
text-transform: uppercase;
margin: 5px 0 0 0;
}
h5 {
font-weight: normal;
}
h1, h2, h3, h4, h5 a:hover {
color: #aaa;
}
h1 {
font-size : 24px;
line-height : 26px;
}
h2 {
font-size : 18px;
line-height : 20px;
}
h3 {
font-size : 14px;
line-height : 16px;
}
h4 {
font-size : 12px;
line-height : 14px;
}
h5 {
font-size : 11px;
line-height : 12px;
margin: 7px 3px;
text-align: left;
}
a {
text-decoration : none;
color: #999;
}
a:hover {
text-decoration : none;
color: #bbb;
}
a img {
border : none;
}
ul li {
list-style-type : none;
}
.thumbnail {
border : 1px solid #444;
float : left;
margin : 0 15px 0 0;
}
.meta-data {
font-size : 10px;
line-height : 15px;
color: #aaa;
position : relative;
float : left;
width : 100%;
text-transform : uppercase;
padding : 0 0 0 1px;
margin: 5px 0;
}
.floatleft {
float : left;
}
.floatright {
float : right;
}
.clear, .cleared {
clear : both;
}
.seperator {
margin: 20px 0;
border-bottom : 1px solid #626262;
}
/*************************************
Header & Logo
*************************************/
#header {
background : url(images/header-bg.jpg) no-repeat left top;
height : 150px;
padding : 0;
margin : 0;
}
.logo img {
float : left;
padding-top : 60px;
padding-left : 50px;
border : none;
}
/*************************************
Top Navigation Columns
*************************************/
#top-nav-wrapper {
width : 480px;
height : 120px;
margin-right : 30px;
float : right;
display : block;
}
#top-nav-wrapper ul {
padding : 0;
margin: 5px 0;
width : 140px;
}
#top-nav-wrapper ul li {
border-bottom : 1px solid #555;
padding : 1px 5px;
}
.column-one {
width : 150px;
float : left;
padding : 5px;
}
.column-two {
width : 150px;
float : left;
padding : 5px;
}
.column-three {
width : 150px;
float : left;
padding : 5px;
}
/*************************************
Home Slider Styles
*************************************/
#main {
background : url(images/slider-bg.jpg) no-repeat left top;
position : relative;
overflow : hidden;
height : 475px;
}
#pages {
position : absolute;
height : 600px;
}
.page {
padding : 30px 0;
height : 475px;
width : 980px;
}
.scrollable {
position : relative;
overflow : hidden;
width : 900px;
height : 450px;
margin : 0 auto;
}
.scrollable .items {
width : 20000em;
position : absolute;
clear : both;
}
.item {
float : left;
cursor : pointer;
width : 900px;
height : 300px;
}
.item img {
border : 1px solid #616262;
}
.item a {
color : #888;
}
#bottom {
background : url(images/home-bottom-bg.jpg) no-repeat left top;
position : relative;
overflow : hidden;
height : 170px;
margin-top : 1px;
padding : 0 40px;
}
#main_navi {
background : #333;
width : 900px;
height : 66px;
padding : 0 !important ;
margin : 0 auto !important ;
border-top : 1px solid #444;
border-bottom : 1px solid #444;
}
#main_navi li {
background-color : #222;
height : 65px;
padding : 0 0 1px 0;
width : 180px;
cursor : pointer;
list-style-type : none;
float : left;
}
#main_navi li:hover {
background-color : #555;
}
#main_navi li.active {
background-color : #777;
}
#main_navi img {
float : left;
margin-right : 10px;
}
#main_navi strong {
display : block;
}
#main div.navi {
margin-left : 250px;
cursor : pointer;
}
/*************************************
Post Styles
*************************************/
.entry {
margin-bottom : 15px;
}
.entry img {
border: 1px solid #555;
}
.entrybody {
margin : 15px 0;
}
.entrymeta {
font-size : 11px;
padding : 5px 0 0 0;
}
/*************************************
Sidebar Styles
*************************************/
#sidebar {
background : url(images/sidebar-bg.jpg) no-repeat right top;
font-size : 12px;
float : right;
padding-top : 30px;
padding-right : 40px;
padding-left : 30px;
width : 300px;
margin: 0;
}
#sidebar ul {
list-style-type : none;
margin : 0;
padding : 0;
font-size : 11px;
}
#sidebar ul li {
background : url(images/list-bg.png) no-repeat left;
border-bottom : 1px solid #404040;
margin-bottom : 0.3em;
padding : 3px 3px 3px 20px;
}
/*************************************
Comments Styles
*************************************/
.commentsblock {
width : 539px;
margin : 15px 0;
padding : 0;
}
.commentsblock textarea {
width : 539px;
background : #555;
color: #ccc;
}
.commentsblock input, .commentsblock textarea {
background : #555;
border : 1px solid #777;
color: #ccc;

}
.commentsblock textarea:focus {
background : #ddd;
border : 1px solid #555;
}
.commentsblock textarea:focus, .commentsblock input:focus {
background : #ddd;
border : 1px solid #555;
}
.commentauthor {
display : block;
font-size : 1.5em;
}
ol.commentlist {
color : #888;
font-size : 0.9em;
list-style-type : none;
margin : 0;
margin-top : 1.5em;
padding : 0;
}
.commentlist li {
margin-bottom : 0.5em;
padding : 0.5em 1em;
}
.alt {
background : #222;
border : 1px solid #333;
padding : 0.5em;
}

/*************************************
Portfolio Styles
*************************************/
#portfolio-container {
background : url(images/slider-bg.jpg) no-repeat left top;
float : right;
padding-top : 40px;
padding-left : 40px;
padding-right : 40px;
margin : 0;
width : 900px;
height : 475px;
list-style-type : none;
clear : both;
}
.portfolio-thumbnail {
background : #252525;
border : 1px solid #555;
float : left;
width : 160px;
height : 100px;
margin : 0 10px 10px 0;
padding : 5px;
overflow : hidden;
display : block;
}
#portfolio-title {
background : url(images/portfolio-header.jpg) no-repeat left top;
width : 900px;
height: 50px;
padding : 35px 0 20px 100px;
margin-bottom: -40px;
float : left;
text-align : left;
display : block;
font-size : 35px;
font-family : "Arial Black", Arial, Helvetica, sans-serif;
text-transform : uppercase;
color : #999;
}
#category-title {
width : 600px;
padding : 50px 0;
height : 100px;
float : right;
text-align : left;
display : block;
font-size : 35px;
font-family : "Arial Black", Arial, Helvetica, sans-serif;
text-transform : uppercase;
color : #222;
}

/*************************************
Services Page Navigation Tabs
*************************************/
#nav {
display : block;
height : 66px;
width : 900px;
margin : 0 auto;
}
#nav ul {
width : 900px;
padding : 0;
margin : 0 auto;
display : block;
}
#nav li {
border-right : 1px solid #222;
float : left;
list-style-type : none;
text-align : center;
}
#nav a {
color : #333333;
display : block;
position : relative;
font-size : 11px;
height : 66px;
text-decoration : none;
}
#nav a.current {
background : #333;
}
#nav img {
border : none;
display : block;
float : left;
}
#nav strong {
display : block;
font-size : 13px;
}

#panes {
background : url(images/slider-bg.jpg) no-repeat left top;
width : 900px;
min-height : 450px;
padding: 30px 40px;
position : relative;
}
#panes div {
display : block;
position : absolute;
width : 900px;
}
#panes img {
border : 1px solid #616262;
float : right;
margin-bottom : 15px;
}
#panes textarea {
width : 798px;
height : 75px;
background : #555;
border : 1px solid #777;
color : #aaa;
}
#panes input {
background : #333;
border : 1px solid #777;
color : #888;
}
#panes textarea:focus {
background : #ddd;
border : 1px solid #555;
}
#panes textarea:focus {
background : #ddd;
border : 1px solid #555;
}
#panes input:focus {
background : #ccc;
border : 1px solid #555;
}
#panes select {
background : #333;
border : 1px solid #777;
color : #999;
}
#panes select:focus {
background : #333;
border : 1px solid #777;
color : #ccc;
}
.more {
color : #fff;
font-weight : bold;
}
.overlay {
display : none;
width : 900px;
padding : 20px;
}

/*************************************
Full Width Page Styles
*************************************/
#fullwidth-container {
background : url(images/slider-bg.jpg) no-repeat left top;
float : left;
padding: 30px 40px;
margin : 0;
width : 900px;
list-style-type : none;
clear : both;
color : #ccc;
}
#fullwidth-container img {
width: 900px;
border : 1px solid #616262;
float : left;
margin: 0;
padding: 0;
}
#fullwidth-container textarea {
width : 798px;
height : 75px;
background : #555;
}
#fullwidth-container input {
background : #333;
border : 1px solid #777;
}
#fullwidth-container textarea {
background : #333;
border : 1px solid #777;
}
#fullwidth-container textarea:focus {
background : #ddd;
border : 1px solid #555;
}
#fullwidth-container textarea:focus {
background : #ddd;
border : 1px solid #555;
}
#fullwidth-container input:focus {
background : #ccc;
border : 1px solid #555;
}
#fullwidth-container select {
background : #333;
border : 1px solid #777;
color : #999;
}
#fullwidth-container select:focus {
background : #333;
border : 1px solid #777;
color : #ccc;
}

/*************************************
Footer
*************************************/
#footer {
background : #111;
height : 35px;
color : #666;
clear : both;
font-size : 11px;
margin-top : 15px;
padding-top : 25px;
}
.notices {
width: 900px;
margin: 0 auto;
text-align: left;
}

.notices img{
float: right;
padding: 0;
margin: -10px 0 0 0;
}

/*************************************
Twitter Feed on Homepage
*************************************/
#twitter-feed {
background : url(images/twitter-bg.png) no-repeat left top;
font-family : Arial, Helvetica, sans-serif;
color : #666;
font-size : 12px;
width : 550px;
float : left;
padding : 15px 0 0 20px;
margin-top : 20px;
}
#twitter_div ul {
list-style-type : none;
}
#twitter_div li a {
color : #a1a1a1;
text-decoration : none;
list-style-type : none;
}
#twitter_div li a:hover {
color : #ffffff;
text-decoration : underline;
}

/*************************************
Search Form, Search & Tags Page Title
*************************************/
#search-form {
margin-top : 20px;
padding-top : 14px;
float : right;
}
#search-form input {
width : 292px;
background : #151515;
color : #555;
border : 1px solid #444;
padding : 3px;
}
#search-tags-title {
width : 510px;
background: #111;
margin: 0 0 10px 0;
padding : 20px 15px;
line-height : 35px;
float : left;
text-align : left;
display : block;
font-size : 35px;
font-family : "Arial Black", Arial, Helvetica, sans-serif;
text-transform : uppercase;
color : #999;
}
/*************************************
PageNavi Container
*************************************/
#page-navigator {
float : right;
margin-top : 15px;
margin-bottom : 15px;
margin-right : 0px;

}
.navigation {
display : block;
text-align : center;
padding-top : 38px;
color : #fff;
height : 50px;
padding-left : 6px;
margin : 0 auto;

}

/*************************************
WP Page Navi Styles
*************************************/
.wp-pagenavi a, .wp-pagenavi a:link {
padding : 3px 6px 3px 5px;
margin : 3px;
text-decoration : none;
border : 1px solid #626262;
line-height: 26px;
color : #ccc;
background-color : #333;
}
.wp-pagenavi a:visited {
padding : 3px 6px 3px 5px;
margin : 3px;
text-decoration : none;
border : 1px solid #555;
color : #777;
background-color : #222;
}
.wp-pagenavi a:hover {
border : 1px solid #444;
color : #ccc;
background-color : #222;
}
.wp-pagenavi a:active {
padding : 3px 6px 3px 5px;
margin : 3px;
text-decoration : none;
border : 1px solid #626262;
color : #999;
background-color : #333;
}
.wp-pagenavi span.pages {
padding : 3px 6px 3px 5px;
margin : 2px 2px 2px 2px;
color : #999;
border : 1px solid #626262;
background-color : #111;
}
.wp-pagenavi span.current {
padding : 3px 6px 3px 5px;
margin : 3px;
font-weight : bold;
border : 1px solid #626262;
color : #eee;
background-color : #222;
}
.wp-pagenavi span.extend {
padding : 3px 6px 3px 5px;
margin : 3px;
border : 1px solid #626262;
color : #999;
background-color : #333;
}
Now just another note here: The scrollable thumbnail script should work in IE. I've checked with the original theme here to check and see and it works fine. I just can't seem to find where mine has changed where it won't work in IE8 for me.

If there's anything else you need me to show, just let me know. I really appreciate any help.

- E
Reply With Quote
09-10-2010, 02:09 PM
 #2
Tomos is offline Tomos
Status: Junior Member
Join date: Aug 2007
Location: Wales, UK
Expertise: Front End Development
Software: Photoshop / Textmate
 
Posts: 79
iTrader: 6 / 100%
 

Tomos is on a distinguished road

  Old

For the moz-border issue maybe this will help:

http://stackoverflow.com/questions/1...crop-out-image
Reply With Quote
09-11-2010, 06:28 PM
 #3
Ethan is offline Ethan
Ethan's Avatar
Status: I'm new around here
Join date: Sep 2006
Location: US
Expertise: html, css, photoshop
Software: photoshop, notepad, wordpress
 
Posts: 22
iTrader: 0 / 0%
 

Ethan is on a distinguished road

  Old

Thank you Tomos.

Actually, I went ahead and reverted my index.php back to the original and re-edited it. I'm still not sure what the issue was but whatever it was, its fixed now.
Reply With Quote
Reply    

« Previous Thread | Next Thread »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed  

Home   |     |   News   |   Rules   |   FAQ   |  


Powered by HandsOnWebHosting.com

The time is now 03:17 PM (GMT).


Powered by: vBulletin Version 3.8.4 Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.