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

    Join Date
    Sep 2003
    Posts
    50
    Rep Power
    16

    Graphic Pixelating in Firefox but not IE


    Hi there,

    I have two questions actually. I purchased this web template and am putting in my own logo but running into two problems:

    1) I don't know how to adjust the css file to get the logo to move towards the bottom of brown header area (more in line with the nav text)

    2) The logo I created looks okay in Internet Explorer, but is showing up as really pixelated in Firefox and I cannot seem to find any reasons why this is occurring.

    I am including links to the website http://www.kohlrbaby.com/Communicating/index.html and CSS file http://www.kohlrbaby.com/Communicating/default.css , but have put in the exact associated code below:



    CSS code associated with the logo as far as I can tell:
    Code:
    /** LOGO */
    
    #logo {
    	float: left;
    	width: 430px;
    	height: 96px;
    }
    
    #logo h1, #logo p {
    	margin: 0px;
    	line-height: normal;
    	text-indent: -9999em;
    }
    
    #logo h1  {
    	display: block;
    	top: 0px;
    	left: 0px;
    	width: 430px;
    	height: 96px;
    }
    
    #logo img  {
    	top: 200px;
    	left: 0px;
    
    }
    
    
    #logo p {
    	margin: -50px 0px 0px 0px;
    	padding: 0px 0px 0px 0px;
    }
    HTML Code:

    Code:
    <div id="logo">
    		  <a href="http://www.communicatingwell.com"><img src="images/CWlogo.gif" height="35" width="300"/></a>
    </div>
    I hope these are okay questions to post, I have tried to figure it out myself, but don't seem to be getting anywhere!

    Many thanks for any ideas or help!
    Last edited by Kravvitz; November 11th, 2010 at 05:16 PM. Reason: added [code] tags
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    1) The vspace attribute is obsolete. Use CSS instead. In this case, I would decrease the height of "#logo" and give it some top padding.

    2) The logo looks ok in IE8 but equally bad in Firefox and IE7. Why it looks so bad is that the image is being scaled by the browser. Avoid setting dimensions for an image that are different from the image's real dimensions. (Both for that reason but also to not make people wait longer while the over-sized image loads.)

    I hope these are okay questions to post, I have tried to figure it out myself, but don't seem to be getting anywhere!
    Your questions are fine. They're better suited to the CSS forum though. I've moved the thread for you.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Posts
    50
    Rep Power
    16
    Thank you so much Kravvitz!

    Originally Posted by Kravvitz
    1) The vspace attribute is obsolete. Use CSS instead. In this case, I would decrease the height of "#logo" and give it some top padding.

    2) The logo looks ok in IE8 but equally bad in Firefox and IE7. Why it looks so bad is that the image is being scaled by the browser. Avoid setting dimensions for an image that are different from the image's real dimensions. (Both for that reason but also to not make people wait longer while the over-sized image loads.)


    Your questions are fine. They're better suited to the CSS forum though. I've moved the thread for you.

IMN logo majestic logo threadwatch logo seochat tools logo