Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE7 "pushing down" graphics...

    http://www.tzpikes.com/dark_shine/re...ecruitment.php

    In Firefox, this page loads fine, but in IE7, the top two graphics are "pushed down" (for lack of better words). I have no idea what the problem could be, but here is the offending CSS code:
    Code:
    #adspace {	
    	height: 67px;
    	background: #86221B url(graphics/ad.gif) repeat-x;
    	border-top: 1px solid #CA807C;
    	border-left: 1px solid #A5514B;
    	border-right: 1px solid #5B1D1B;
    	border-bottom: 1px solid #3E1B19;
    	font: normal 10px/100px verdana, arial, sans-serif;
    	text-align: center;
    	color: #fff;
    	cursor: default;
    	overflow: hidden;
    }
    And what's in the page:

    Code:
    <div id="adspace"><img style="width: 730px; height: 70px;" alt="" src="../graphics/logo.jpg" />
            ad space
          </div>
    I didn't write this CSS myself, I used a template because I'm new to CSS and trying to learn. Thanks in advance for the help!!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,693
    Thanks
    22
    Thanked 1,831 Times in 1,815 Posts
    Hello chase,
    This works:
    Code:
    #adspace {	
    	height: 67px;
    	background: #86221B url(graphics/ad.gif) repeat-x;
    	border-top: 1px solid #CA807C;
    	border-left: 1px solid #A5514B;
    	border-right: 1px solid #5B1D1B;
    	border-bottom: 1px solid #3E1B19;
    }
    #underlogo {
    	BORDER-RIGHT: #5b1d1b 1px solid; BORDER-TOP: #ca807c 1px solid; BACKGROUND: url(graphics/ad.gif) #86221b repeat-x; FONT: 10px/100px verdana, arial, sans-serif; OVERFLOW: hidden; BORDER-LEFT: #a5514b 1px solid; CURSOR: default; COLOR: #fff; BORDER-BOTTOM: #3e1b19 1px solid; HEIGHT: 133px; TEXT-ALIGN: center
    }
    #brounderlogo {
    	BORDER-RIGHT: #5b1d1b 1px solid;
    	BORDER-TOP: #ca807c 1px solid;
    	BORDER-LEFT: #a5514b 1px solid;
    	BORDER-BOTTOM: #3e1b19 1px solid;
    	background: #86221B url(graphics/ad.gif) repeat-x;
    	HEIGHT: 55px;
    }
    I haven't figured out why for sure. Your just putting too much stuff in those divs - do they really need the ad.gif?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Excavator,
    Thank you for the help! It worked perfectly! Like I said, I used a template that someone else created and hacked it together to make it work for my site. This is my first attempt with CSS, so hopefully in a month or two I'll get a better hang of it and start from scratch.

    Thanks again.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •