CSS - Positioning Images and Removing Borders?

Discussion in 'Web Design and Development' started by zyggiepyggie, May 3, 2011.

  1. zyggiepyggie macrumors member

    zyggiepyggie

    Joined:
    Apr 9, 2010
    #1
    Hey,

    I've been messing around with a basic page for my site (http://jakestubbs.co.uk).

    If the page is opened in either Safari or Chrome the images are centrally positioned and work as I would expect.

    If the page is opened in IE, Firefox or Opera the images appear at the top left corner of the screen and in IE they are surrounded by the annoying blue borders.

    My CSS is as follows:

    Code:
    /*=========================================
    COMMON ELEMENTS
    ==============================================*/
    
    body {
    	
    }
    
    h1 {
    	
    }
    
    a img {
    	border: none;
    }
    
    /*==============================================
    MAIN PAGE
    ==============================================*/
    
    #main {
    	width: 250px;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    #main img {
    	top: 50%;
    	height: 558px;
    	margin-top: 100px;
    }
    
    /*==============================================
    COMING SOON
    ==============================================*/
    
    #comingsoon {
    	width: 558px;
    	margin-left: auto;
    	margin-right:auto;
    }
    
    #comingsoon img {
    	top: 50%;
    	height: 100px;	
    	margin-top: -50px;
    	display:none;
    	position:absolute;
    }
    Even if I set #main img {border: none;} the border is still there. The only way I have managed to make it vanish is by using <img border="0" /> but then they appear when hovering. I'd like to be able to sort this with CSS if possible.

    The fading colors on the images are done using basic jQuery.

    Can anyone lend a hand? Also, would appreciate feedback on the general idea of the page (I know, its very basic)

    Thanks.
     
  2. bpaluzzi, May 3, 2011
    Last edited by a moderator: May 8, 2011

    bpaluzzi macrumors 6502a

    bpaluzzi

    Joined:
    Sep 2, 2010
    Location:
    London
    #2
    Hi - your CSS is fine, it's the link to the CSS in the HTML that is giving you problems. You have the type set as "style/css", it should be "text/css".

    That should clear up the issues.

    b
     
  3. zyggiepyggie thread starter macrumors member

    zyggiepyggie

    Joined:
    Apr 9, 2010
    #3
    Oh yeah! Well, I feel a tad foolish now.
    That's fixed all the issues I was having, thank you so much!
     
  4. bpaluzzi macrumors 6502a

    bpaluzzi

    Joined:
    Sep 2, 2010
    Location:
    London
    #4
    Nice! Glad it worked!
     

Share This Page