CSS - Positioning Images and Removing Borders?

[zyggiepyggie]

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:

/*=========================================
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.

 

[bpaluzzi]

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

 

[zyggiepyggie]

Oh yeah! Well, I feel a tad foolish now.
That's fixed all the issues I was having, thank you so much!

 

[bpaluzzi]

Oh yeah! Well, I feel a tad foolish now.
That's fixed all the issues I was having, thank you so much!

Nice! Glad it worked!