#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    2
    Rep Power
    0

    Cross Browser CSS question.


    I can't post the URL to show you.
    BUT.... the site I wanted to show you:

    Looks great in Chrome. Loses a little in Firefox, and looks absolutely horrid in IE.

    Is there a service or website that allows me to paste my CSS into and have it output what browsers have a problem with what part of the code?

    Thanks
    Nick
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    16
    Rep Power
    0
    Can you attached your CSS code? Please surround the code in CODE tags.

    You can also just give the link like this your(dot)link(dot)come.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    2
    Rep Power
    0

    Thank you...


    for the fast reply. I figured I could use some work around like DOT instead of periods...didn't want to upset admins ; )

    www dot leadfootgearjammers dot com

    note: I'm pasting this, realizing it will be one long line of text.

    Code:
    	html { 
    	background: url(picture_gal/1353302979-2012-03-02_21-13-14_906.jpg) no-repeat center center fixed; 
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    		background-color:black;
    	}
    
    	body {
        		height: 100%;
        		margin: 0;
    		font-size: 12px;
    		line-height: 1.5;
    		color: #878484;
    		font-family: "Droid Serif", sans-serif;
    		-webkit-text-size-adjust: 100%;
    		-ms-text-size-adjust: 100%;
    		text-rendering: optimizeLegibility;
    		-webkit-font-smoothing: antialiased;
        	}
    
        	#wrapper {
        		min-height: 100%; 
    		
        	}
    
    	.header {
    		background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)),to(rgba(55,55,55,0.5)));
    		min-height: 60px;
    		min-width: 100%;
    	}
    
    
    	.header_menu {
    		padding-top:1px;
    		padding-bottom:1px;
    		margin-left: 5%;
    		margin-right: 5%;	
    	
    		
    	}
    	img.middle {vertical-align:middle;}
    
    	img.thumbnail {
    		margin:5px;
    		height:150px;
    	}
    
    
    	a:link {
    		font: normal 0.9em/1 "Kreon", serif;
    		color: white; text-decoration: none;
    	}
    
    	.menu_link {
    		color: white;
    		font: normal 0.9em/1 "Kreon", serif;
    		text-transform: uppercase;
    		color: white; text-decoration: none;
    		margin:14px;
    	}
    
    	a:visited {
    		font: normal 0.9em/1 "Kreon", serif;
    		color: white; text-decoration: none; 
    
    	}
    
    	a:hover {
    		font: normal 0.9em/1 "Kreon", serif;
    		color: red; text-decoration: none; 
    		
    	}
    
    	a:active {
    		font: normal 0.9em/1 "Kreon", serif;
    		color: red; text-decoration: none; 
    	
    	}
    
    	.container {
    		overflow:auto; 
    		margin-left: 5%;
    		margin-right: 5%;
    
    	}
    
    	#right { width: 25%; } 
    	#left { width: 25%; } 
    	#left  { float:left;  }
    	#right { float:right; }
    
    	#middle { 
    		
    		display: inline-block; 
    		margin-left: 3%;
    		margin-right: 3%;
    		width:43%;
    
    	}
    
    
    	.body_item_header {
    		margin-top:25px;
    		font-size:20px;
    		color: white;
    		text-shadow:0px 1px 15px #000000;
    
    	}
    	.body_item {
    
    background-color: rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.8);
    color: rgba(0, 0, 0, 0.8);
    		border:solid 1px #333333;
    		-moz-border-radius-topleft: 2px;
    		-moz-border-radius-topright:2px;
    		-moz-border-radius-bottomleft:2px;
    		-moz-border-radius-bottomright:2px;
    		-webkit-border-top-left-radius:2px;
    		-webkit-border-top-right-radius:2px;
    		-webkit-border-bottom-left-radius:2px;
    		-webkit-border-bottom-right-radius:2px;
    		border-top-left-radius:2px;
    		border-top-right-radius:2px;
    		border-bottom-left-radius:2px;
    		border-bottom-right-radius:2px;
    		padding:10px;
    
    
    	}
    
    	.youtube_thumb {
    		border:solid 1px #333333;
    		-moz-border-radius-topleft: 2px;
    		-moz-border-radius-topright:2px;
    		-moz-border-radius-bottomleft:2px;
    		-moz-border-radius-bottomright:2px;
    		-webkit-border-top-left-radius:2px;
    		-webkit-border-top-right-radius:2px;
    		-webkit-border-bottom-left-radius:2px;
    		-webkit-border-bottom-right-radius:2px;
    		border-top-left-radius:2px;
    		border-top-right-radius:2px;
    		border-bottom-left-radius:2px;
    		border-bottom-right-radius:2px;
    		background-color: rgba(0, 0, 0, 0.8);
    		padding:10px;
    		
    		align;center;
    	}
    
    
    audio { width: 200px; }
    Sorry, I'm a noob when it comes to using the CODE tags, is there a better way for me to get that code in here?

    This was my first attempt at using this much CSS, and keeping it all in a dedicated file.

    Browser differences are killing me! It seems that none of the css works in IE. I used the page css3maker dot com to generate most of the CSS, and going back to check the features I used, this page states no problems with IE. The page looks freaking great in chrome though =|

    Thanks again for the fast reply. It means a lot to me!

    Nick
    Last edited by Kravvitz; November 26th, 2012 at 11:59 PM. Reason: replaced the single very long line of code with the actual code from the page
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,126
    Rep Power
    4304
    Welcome to DevShed Forums, njdubois.

    As you found out new users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam.

    Originally Posted by njdubois
    Sorry, I'm a noob when it comes to using the CODE tags, is there a better way for me to get that code in here?
    Paste the code in the textarea and then select it before clicking the button (so you don't get the problematic JavaScript prompt dialog). Fortunately though, this forum is scheduled for a very badly needed upgrade.

    Originally Posted by njdubois
    Browser differences are killing me! It seems that none of the css works in IE. I used the page css3maker dot com to generate most of the CSS, and going back to check the features I used, this page states no problems with IE. The page looks freaking great in chrome though =|
    Good question! I recommend that you use these references:
    http://reference.sitepoint.com/css
    http://caniuse.com/

    There are a few editors, including (if I remember correctly) DreamWeaver and Style Master, that have a feature that warns of compatibility problems, but I don't trust them myself.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo