Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    Houston, TX
    Posts
    158
    Rep Power
    16

    CSS Renders Differently in Safari/Chrome than in IE8/FF3


    I am working on a development site (http://dev.asbco.com/products/commercialindustrial/ ) and I am getting different looks in Safari and Chrome.

    IE8/FireFox 3/Opera all render the page correctly, Safari and Chrome are off.

    Any ideas how to fix this issue?

    Thanks!

    [EDIT]
    I meant Safari and Chrome not Safari and FireFox 3.
    Last edited by xtremcoder; April 24th, 2009 at 02:35 PM.
  2. #2
  3. No Profile Picture
    Permanently Banned
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    16
    Rep Power
    0
    Sorry but I don't see any differences in those pages .
  4. #3
  5. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    You could float the images by wrapping them in a different div and floating that, then make sure its not too wide or it will get moved down.
    Last edited by EricReese; April 23rd, 2009 at 05:28 PM.
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  6. #4
  7. No Profile Picture
    Permanently Banned
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    16
    Rep Power
    0
    Er..if you mean the images going off the side of hte container then the problem is you have the width of hte sidebar too small thus the images are hanging out of the cnotainer.

    Remove the width on #r_sidebar.
  8. #5
  9. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Yes he means that. Did you check with your browsers?
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  10. #6
  11. No Profile Picture
    Permanently Banned
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    16
    Rep Power
    0
    Yes I did. I checked Safari, FF, and IE7.

    IE7 exhitibited this behavior and that was the fix.
  12. #7
  13. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    I checked Chrome, because he said that was one of the two browsers he had error with. If you did not check with the browsers he mentioned, how do you know it was the same error?
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  14. #8
  15. No Profile Picture
    Permanently Banned
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    16
    Rep Power
    0
    Lol You Edited Your Post To Say Rmeove The Width Of The Sidebar Rofl.
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    Houston, TX
    Posts
    158
    Rep Power
    16
    Thanks for the help, guys. I have removed the width from the r_sidebar section in the css file but that did not yield the desired results.

    This is what it looks like in Safari now:

  18. #10
  19. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Look at my first post. Try wrapping all images in a wrapper then floating it. Also, float the first div. For the footer, if there are issues on it staying on the bottom (I don't know if you have it in, Firebug is disabled on FF3.1 beta) try clear:both; on the footer.
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  20. #11
  21. No Profile Picture
    Permanently Banned
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    16
    Rep Power
    0
    Really? I removed the width and it all fell into place
  22. #12
  23. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    My page doesn't work if I remove the width. However, my floating idea does
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  24. #13
  25. No Profile Picture
    Permanently Banned
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    16
    Rep Power
    0
    Doing my idea does work.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head profile="http://gmpg.org/xfn/11">
    <base href="http://dev.asbco.com/products/commercialindustrial/" />
    <!--The Title-->
    <title>  Commercial/Industrial :: American Steel Building Co., Inc.</title>
    
    <!--The Favicon-->
    <link rel="shortcut icon" href="http://dev.asbco.com/wp-content/themes/iRealEstate/images/favicon.ico" type="image/x-icon" />
    
    <!--The Meta Info-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <!--To follow, or not to follow-->
    <meta name="robots" content="index,follow" />
    
    <!--Add Description and Keywords-->
    <meta name="description" content="American offers a full range of building systems for commercial and industrial applications, from office buildings, shopping centers and automobile agencies to complete manufacturing facilities, food and chemical processing plants.
    
    American’s extensive options include custom mansards and facade" />
    
    <!--The Stylesheets-->
    <style type="text/css" media="screen">
        @import url( http://dev.asbco.com/wp-content/themes/iRealEstate/style.css );
        @import url(http://dev.asbco.com/wp-content/themes/iRealEstate/css/dropdown.css);
        @import url(http://dev.asbco.com/wp-content/themes/iRealEstate/css/jtabber.css);
        @import url(http://dev.asbco.com/wp-content/themes/iRealEstate/css/custom.css);
    </style>
    <!--The Internet Explorer Specific Stuff-->
    <!--[if lte IE 7]>
        <link rel="stylesheet" href="http://dev.asbco.com/wp-content/themes/iRealEstate/css/lte-ie7.css" type="text/css" media="screen" />
    <![endif]-->
    <!--[if lt IE 7]>
        <link rel="stylesheet" href="http://dev.asbco.com/wp-content/themes/iRealEstate/css/lt-ie7.css" type="text/css" media="screen" />
        <script src="http://dev.asbco.com/wp-content/themes/iRealEstate/js/dropdown.js" type="text/javascript"></script>
    <![endif]-->
    <style type="text/css" media="screen">
    #container { background: url(http://dev.asbco.com/wp-content/themes/iRealEstate/images/container-bg-sidebar.gif) top center repeat-y; }
    </style>
    
    <script type='text/javascript' src='http://dev.asbco.com/wp-includes/js/jquery/jquery.js?ver=1.2.6'></script>
    <script type='text/javascript' src='http://dev.asbco.com/wp-includes/js/jquery/jquery.form.js?ver=2.02'></script>
    <script type='text/javascript' src='http://dev.asbco.com/wp-content/themes/iRealEstate/lib/featured-images/js/jquery.cross-slide.js?ver=2.7.1'></script>
    
    <script type='text/javascript' src='http://dev.asbco.com/wp-content/themes/iRealEstate/lib/contact-page-plugin/js/md5.js?ver=2.7.1'></script>
    <script type='text/javascript' src='http://dev.asbco.com/wp-content/themes/iRealEstate/lib/contact-page-plugin/js/contact-page-plugin.js?ver=2.7.1'></script>
    <script type="text/javascript" src="http://dev.asbco.com/wp-content/themes/iRealEstate/js/jtabber.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
    		jQuery.jtabber({
    			mainLinkTag: "#nav a", // much like a css selector, you must have a 'title' attribute that links to the div id name
    			activeLinkClass: "selected", // class that is applied to the tab once it's clicked
    			hiddenContentClass: "hiddencontent", // the class of the content you are hiding until the tab is clicked
    			showDefaultTab: 1, // 1 will open the first tab, 2 will open the second etc.  null will open nothing by default
    			showErrors: false, // true/false - if you want errors to be alerted to you
    			effect: null, // null, 'slide' or 'fade' - do you want your content to fade in or slide in?
    			effectSpeed: 'fast' // 'slow', 'medium' or 'fast' - the speed of the effect
    		});
    });
    </script>
    
    <!--The RSS and Pingback-->
    <link rel="alternate" type="application/rss+xml" title="American Steel Building Co., Inc. RSS Feed" href="http://dev.asbco.com/feed/" />
    <link rel="pingback" href="http://dev.asbco.com/xmlrpc.php" />
    
    <link rel='stylesheet' href='http://dev.asbco.com/wp-content/plugins/simplemodal-contact-form-smcf/css/smcf.css?ver=1.2.1' type='text/css' media='screen' />
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://dev.asbco.com/xmlrpc.php?rsd" />
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://dev.asbco.com/wp-includes/wlwmanifest.xml" /> 
    <meta name="generator" content="WordPress 2.7.1" />
    
    <link rel="stylesheet" href="http://dev.asbco.com/wp-content/plugins/contact-form-7/stylesheet.css" type="text/css" /><script type='text/javascript' src='http://dev.asbco.com/wp-content/plugins/contact-form-7/contact-form-7.js'></script>
    
    <link rel="stylesheet" href="http://dev.asbco.com/wp-content/plugins/dd-formmailer/dd-formmailer.css" type="text/css" media="screen" />
    
    <script type="text/javascript" src="http://dev.asbco.com/wp-content/plugins/dd-formmailer/date_chooser.js"></script>
    <style type="text/css">
    #header {
    	background: url(http://dev.asbco.com/wp-content/uploads/asbcoheader.jpg) top left no-repeat;
    }
    </style>
    	<style type="text/css">
    		body {
    																																																									}
    	</style>
    	<style type="text/css">
    		#feature-image {
    			width: 394px;
    			height: 261px;
    			text-align: left;
    		}
    	</style>
    	
    	<script type='text/javascript'>
    		jQuery(function($) {$(document).ready(function() {
    			$('#feature-image').crossSlide(
    				{sleep: 4, fade: 2, debug: true},
    				[
    				{src: 'http://dev.asbco.com/wp-content/uploads/feature-image1.jpg', href: 'http://www.simplifieditsolutions.com/wp'},
    {src: 'http://dev.asbco.com/wp-content/uploads/feature-image2.jpg', href: 'http://www.simplifieditsolutions.com/wp'},
    {src: 'http://dev.asbco.com/wp-content/uploads/feature-image3.jpg', href: 'http://www.simplifieditsolutions.com/wp'},
    {src: 'http://dev.asbco.com/wp-content/uploads/feature-image4.jpg', href: 'http://www.simplifieditsolutions.com/wp'},
    {src: 'http://dev.asbco.com/wp-content/uploads/feature-image5.jpg', href: 'http://www.simplifieditsolutions.com/wp'},
    {src: 'http://dev.asbco.com/wp-content/uploads/feature-image6.jpg', href: 'http://www.simplifieditsolutions.com/wp'}
    				]
    			);
    		});});
    	</script>
    
    <script type="text/javascript" src="http://dev.asbco.com/wp-content/themes/iRealEstate/js/jtabber.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
    		jQuery.jtabber({
    			mainLinkTag: "#nav a", // much like a css selector, you must have a 'title' attribute that links to the div id name
    			activeLinkClass: "selected", // class that is applied to the tab once it's clicked
    			hiddenContentClass: "hiddencontent", // the class of the content you are hiding until the tab is clicked
    			showDefaultTab: 1, // 1 will open the first tab, 2 will open the second etc.  null will open nothing by default
    			showErrors: false, // true/false - if you want errors to be alerted to you
    			effect: null, // null, 'slide' or 'fade' - do you want your content to fade in or slide in?
    			effectSpeed: 'fast' // 'slow', 'medium' or 'fast' - the speed of the effect
    		});
    });
    </script>
    <style>
    #r_sidebar{width:auto}</style>
    </head>
    
    <body>
    
    <div id="container">
    
    <div id="header" class="clearfix">
        <div id="newLines"><br><br><br></div>
        <div id="search">
        <!--<form method="get" id="searchform" action="http://dev.asbco.com/">
        <input type="text" value="search..." name="s" id="s" onfocus="if (this.value == 'search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'search...';}" />
        </form>-->
    
        </div>
    </div>
    
    <div id="menu" class="clearfix">
    <ul>
    			<li class="home "><a href="http://dev.asbco.com">Home</a></li>
    	            <li class="page_item page-item-2"><a href="http://dev.asbco.com/about-us/" title="About Us">About Us</a></li>
    <li class="page_item page-item-18 current_page_ancestor current_page_parent"><a href="http://dev.asbco.com/products/" title="Products">Products</a>
    <ul>
    	<li class="page_item page-item-31 current_page_item"><a href="http://dev.asbco.com/products/commercialindustrial/" title="Commercial/Industrial">Commercial/Industrial</a></li>
    
    	<li class="page_item page-item-33"><a href="http://dev.asbco.com/products/institutionalrecrational/" title="Institutional/Recreational">Institutional/Recreational</a></li>
    	<li class="page_item page-item-35"><a href="http://dev.asbco.com/products/warehousesmini-storage/" title="Warehouses/Mini-Storage">Warehouses/Mini-Storage</a></li>
    	<li class="page_item page-item-37"><a href="http://dev.asbco.com/products/special-applications/" title="Special Applications">Special Applications</a></li>
    </ul>
    </li>
    <li class="page_item page-item-391"><a href="http://dev.asbco.com/free-quote/" title="FREE QUOTE">FREE QUOTE</a></li>
    <li class="page_item page-item-20"><a href="http://dev.asbco.com/projects/" title="Projects">Projects</a></li>
    <li class="page_item page-item-88"><a href="http://dev.asbco.com/news/" title="News">News</a></li>
    
    <li class="page_item page-item-25"><a href="http://dev.asbco.com/contact-us/" title="Contact Us">Contact Us</a></li>
    </ul>
    </div>
    <div id="content_wide" class="inner clearfix">
    <div id="inner_products">
    		
    	
    
    	<!--post title-->
    	<h1 id="post-31">Commercial/Industrial</h1>
    
    	<!--post text with the read more link-->
    	<p>American offers a full range of building systems for commercial and industrial applications, from office buildings, shopping centers and automobile agencies to complete manufacturing facilities, food and chemical processing plants.</p>
    
    <p>American’s extensive options include custom mansards and facades, and Amerib and MiniRib wall panels in a multitude of colors to select from.</p>
    <p>We also offer several different factory-assembled Durastone Construction Panels faced with natural marble or granite stone aggregate. These light weight, load bearing modular units are available in both flat panels and complex shapes to replace conventional materials such as stucco, brick or masonry.</p>
    	
    	<!--for paginate posts-->
    		
        	
    			
    </div>
    <!--include sidebar-->
    <div id="r_sidebar">
    
    <!--sidebar.php-->
    <ul>
    		<li>						<div class="execphpwidget"><img src="http://dev.asbco.com/wp-content/uploads/car-dealership.jpg"><br><br><img src="http://dev.asbco.com/wp-content/uploads/restaurant-building.jpg"><br><br><img src="http://dev.asbco.com/wp-content/uploads/manufacturing-facility.jpg"></div>
    
    		</li></ul>
    </div></div>
    <!--include footer-->
    <div style="clear: both;"></div>
    <div id="footer">
    
    <ul id="footernav">
    			<li class="home "><a href="http://dev.asbco.com">Home</a></li>
    	            <li class="page_item page-item-2"><a href="http://dev.asbco.com/about-us/" title="About Us">About Us</a></li>
    <li class="page_item page-item-18 current_page_ancestor current_page_parent"><a href="http://dev.asbco.com/products/" title="Products">Products</a></li>
    
    <li class="page_item page-item-391"><a href="http://dev.asbco.com/free-quote/" title="FREE QUOTE">FREE QUOTE</a></li>
    <li class="page_item page-item-20"><a href="http://dev.asbco.com/projects/" title="Projects">Projects</a></li>
    <li class="page_item page-item-88"><a href="http://dev.asbco.com/news/" title="News">News</a></li>
    <li class="page_item page-item-25"><a href="http://dev.asbco.com/contact-us/" title="Contact Us">Contact Us</a></li>
    <!--title_li=&depth=1&sort_column=menu_order&exclude=--></ul>
    
    
    	<!-- Google Maps Plugin (begin) -->
    	<!-- http://avi.alkalay.net/2006/11/google-maps-plugin-for-wordpress.html -->
    
    	<!-- Google Maps API -->
    
    	<script type="text/javascript"
    		src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAACMEioHd8yixnKf6Nrmp2zhSPDV67QtNIUdqgkXL5zRDJlCCRKRQqbF5rkAcGsj9pCTwBQuXs4Bb02g">
    	</script>
    
    	<!-- Google Maps Plugin logic -->
    	<script type="text/javascript" src="http://dev.asbco.com/wp-content/plugins/google-maps-advanced/googlemapsPlugin.js"></script>
    
    	<!-- Google Maps Plugin initialization -->
    	<script type="text/javascript">
    		//<![CDATA[
    
    		MapPluginInit(
    			/* Default map width  */          500,
    			/* Default map height */          300,
    			/* Use rel instad of title? */    false);
    
    		//]]>
    	</script>
    
    	<!-- Google Maps Plugin SEO -->
    
    	<noscript>
    		<link href="http://avi.alkalay.net/2006/11/google-maps-plugin-for-wordpress.html" rel="uses" type="text/html"/>
    	</noscript>
    	<!-- Google Maps Plugin (end) -->
    <script type='text/javascript' src='http://dev.asbco.com/wp-content/plugins/simplemodal-contact-form-smcf/js/jquery.simplemodal.js?ver=1.2.1'></script>
    <script type='text/javascript' src='http://dev.asbco.com/wp-content/plugins/simplemodal-contact-form-smcf/js/smcf.js?ver=1.2'></script>
    
    	<script type='text/javascript'>
    		var smcf_messages = {
    			loading: 'Loading...',
    			sending: 'Sending...',
    			thankyou: 'Thank You!',
    			error: 'Uh oh...',
    			goodbye: 'Goodbye...',
    			namerequired: 'Name is required.',
    			emailrequired: 'Email is required.',
    			emailinvalid: 'Email is invalid.',
    			messagerequired: 'Message is required.'
    		}
    	</script><div id='smcf-content' style='display:none'>
    	<a href='#' title='Close' class='modalCloseX simplemodal-close'>x</a>
    	<div class='smcf-top'></div>
    
    	<div class='smcf-content'>
    		<h1 class='smcf-title'>Contact American Steel Buildings</h1>
    		<div class='smcf-loading' style='display:none'></div>
    		<div class='smcf-message' style='display:none'></div>
    		<form action='/wp-content/plugins/simplemodal-contact-form-smcf/smcf_data.php' style='display:none'>
    			<label for='smcf-name'>*Name:</label>
    			<input type='text' id='smcf-name' class='smcf-input' name='name' value='' tabindex='1001' />
    			<label for='smcf-email'>*Email:</label>
    
    			<input type='text' id='smcf-email' class='smcf-input' name='email' value='' tabindex='1002' /><label for='smcf-subject'>Subject:</label>
    			<input type='text' id='smcf-subject' class='smcf-input' name='subject' value='' tabindex='1003' /><label for='smcf-message'>*Message:</label>
    			<textarea id='smcf-message' class='smcf-input' name='message' cols='40' rows='4' tabindex='1004'></textarea><br/><label>&nbsp;</label>
    			<input type='checkbox' id='smcf-cc' name='cc' value='1' tabindex='1005' /> <span class='smcf-cc'>Send me a copy</span>
    			<br/><label>&nbsp;</label>
    			<button type='submit' class='smcf-button smcf-send' tabindex='1006'>Send</button>
    
    			<button type='submit' class='smcf-button smcf-cancel simplemodal-close' tabindex='1007'>Cancel</button>
    			<input type='hidden' name='token' value='eb38f63fc2f11142e5b3676638ea36ab'/>
    			<br/>
    		</form>
    	</div>
    	<div class='smcf-bottom'><a href='http://www.ericmmartin.com/projects/smcf/'>Powered by SimpleModal Contact Form</a></div>
    </div></div><!--end #footer-->
    
    </div>
    
    </body>
    </html>
    Run that. It works.
  26. #14
  27. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    If his page doesn't work with that code, that is the only thing that matters. I didn't test your code.
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  28. #15
  29. No Profile Picture
    Permanently Banned
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    16
    Rep Power
    0
    You should test it. He had to have odne something wrong because that code works................
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo