Borde gris abajo del todo de mi web

manuxdjent · #1 (**permalink**) 14/11/2012, 04:07

¿Alguien me puede decir que es lo que genera ese borde gris de unos 10px, abajo del todo de mi web? , he revisado todos los divs y nada, me parece algo muy extraño.

Código HTML:

<HTML>
<HEAD>
<LINK rel="stylesheet" href="orbit-1.2.3.css">
<LINK rel="stylesheet" href="css/style.css">
<LINK rel="stylesheet" href="demo-style.css">
<SCRIPT type="text/javascript" src="jquery-1.5.1.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="jquery.orbit-1.2.3.min.js"></SCRIPT>
<SCRIPT type="text/javascript">
			$(window).load(function() {
				$('#featured').orbit();
			});
</SCRIPT>
<STYLE type="text/css">

@font-face{

font-family:ostrich-black;
src: url(fuentes/ostrich-black.ttf) format('truetype');

}

body{ 
margin:0;
padding:0;
background-position:center center;
background-repeat:no-repeat;
background-image:url(fondo.png);
-webkit-background-size:100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;


} 
#button{
padding:0;

text-align: center;
font-family:ostrich-black;
}
#button li{

font-size: 25px;
background: rgba(0, 0, 0, 0.2);

}
#button li a{

float:left;
padding: 10px; 
padding-left:29.85px;
padding-right:29.85px;
color: #FFF;
text-decoration: none; 

}
#contenedor{
margin:0 auto;
width:950px;
vertical-align:top;
height-size:100%;
background: rgba(0, 0, 0, 0.2);


}

#espacio1{
margin:0 auto;
width:950px;
height:150px;
background: rgba(0, 0, 0, 0.2);

}
#fecha{
position:absolute;
margin-top:5px;
}
#espacio2{
height:2%;
width:950px;
background: rgba(0, 0, 0, 0.0);
}
#menu{
margin:auto;
width:950px;
text-align:center;
background: rgba(0, 0, 0, 0.0);
}

#button li a:hover {  
background-color: rgba(40, 81, 150, 0.2); 
color: #6bb3eb;
}  
#icons{
text-align:right;
margin:35px 20px;

}
#fb{
		
	float:right;


}
#tw{
	margin-left:5px;
	float:right;

}
#tm{
margin-left:5px;
float:right;

}
#sc{
margin-left:5px;
float:right;

}
#yt{
margin-left:5px;
float:right;

}

#fb:hover{
margin-top:-2px;
}
#tw:hover{
margin-top:-2px;
}
#tm:hover{
margin-top:-2px;
}
#sc:hover{
margin-top:-2px;
}
#yt:hover{
margin-top:-2px;
}

#musica{

margin-top:5px;
margin-left:434.5px;

}
#hoja{
margin-left:434.5px;
margin-top:50px;

}
#cosas{
background: rgba(0, 0, 0, 0.0);
width:869px;
margin:0 auto;
}


</STYLE>
</HEAD>
<BODY>
<DIV id="menu">
	<UL id="button">
		<LI><A href="inicio.html">INICIO</A></LI>
		<LI><A href="noticias.html">NOTICIAS</A></LI>
		<LI><A href="trabajos.html">TRABAJOS</A></LI>
		<LI><A href="videos.html">VIDEOS</A></LI>
		<LI><A href="http://www.antilablog.co.nr/" target="_blank">BLOG</A></LI>
		<LI><A href="equipo.html">EQUIPO</A></LI>
		<LI><A href="info.html">INFO</A></LI>
		<LI><A href="contacto.html">CONTACTO</A></LI>
	</UL>
</DIV>
<DIV id="espacio1">
<IMG src="raya.png"/>
<DIV id="icons">
		
		
		
	
		<DIV id="yt">
			<A href="http://www.youtube.com/user/AntilaProductions" target="_blank"><IMG src="minilogos/minilogoyoutube.png"/></A>
		</DIV>
			<DIV id="sc">
			<A href="http://soundcloud.com/antilaproductions" target="_blank"><IMG src="minilogos/minilogosoundcloud.png"/></A>
		</DIV>
		<DIV id="tm">
			<A href="http://antilaproductions.tumblr.com/" target="_blank"><IMG src="minilogos/minilogotumblr.png"/></A>
		</DIV>
		<DIV id="tw">
			<A href="https://twitter.com/Antila_P" target="_blank"><IMG src="minilogos/minilogotwitter.png"/></A>
		</DIV>
		<DIV id="fb">
			<A href="http://www.facebook.com/AntilaProductions" target="_blank"><IMG src="minilogos/minilogofacebook.png"/></A>
		</DIV>
</DIV>
</DIV>
<DIV id="contenedor">

<DIV class="container">
	<div id="featured">

			<a href="https://soundcloud.com/ultimatebreath/ultimate-breath-exhumed-body" target="_blank"><img src="slider.png" /></a>
			


	</div>
		
</DIV>
<DIV id="espacio2">
</DIV>
<DIV id="cosas">
		<DIV id="fecha">
			<IMG src="marca.png"/>
		</DIV>
		<DIV id="musica">
			<IMG src="musica.png"/>
				<iframe width="100%" height="450" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F2717374&amp;auto_play=false&amp;show_artwork=true&amp;color=09a5ff"></iframe>
		
		</DIV>
		<DIV id="hoja">
		
			<IMG src="hoja.png"/><br>
			

			
		
				
		

		</DIV>	

		
</DIV>
</DIV>
</BODY>
</HTML>

Un saludo y gracias.

emprear · #2 (**permalink**) 14/11/2012, 11:17

Nos falta ver todo el resto de tu css, incluso que está haciendo el javascript, sin una url, no se puede analizar el pronblema.
Por otro lado tendrías que limpiar tu html e incluir un Doctype válido (esto último fundamental)

Saludos

manuxdjent · #3 (**permalink**) 14/11/2012, 11:32

Éste es el reset del css que tengo puesto:

Código HTML:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	margin-left:0;
	margin-right:0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers. */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Y estos los javascript del slider:

manuxdjent · #4 (**permalink**) 14/11/2012, 11:33

[CODE]/*
* jQuery Orbit Plugin 1.2.3
* www.ZURB.com/playground
* Copyright 2010, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/

(function($) {

$.fn.orbit = function(options) {

//Defaults to extend options
var defaults = {
animation: 'horizontal-push', // fade, horizontal-slide, vertical-slide, horizontal-push
animationSpeed: 1200, // how fast animtions are
timer: true, // true or false to have the timer
advanceSpeed: 4000, // if timer is enabled, time between transitions
pauseOnHover: false, // if you hover pauses the slider
startClockOnMouseOut: false, // if clock should start on MouseOut
startClockOnMouseOutAfter: 1000, // how long after MouseOut should the timer start again
directionalNav: true, // manual advancing directional navs
captions: true, // do you want captions?
captionAnimation: 'fade', // fade, slideOpen, none
captionAnimationSpeed: 600, // if so how quickly should they animate in
bullets: false, // true or false to activate the bullet navigation
bulletThumbs: false, // thumbnails for the bullets
bulletThumbLocation: '', // location from this file where thumbs will be
afterSlideChange: function(){} // empty function
};

//Extend those options
var options = $.extend(defaults, options);

return this.each(function() {

// ==============
// ! SETUP
// ==============

//Global Variables
var activeSlide = 0,
numberSlides = 0,
orbitWidth,
orbitHeight,
locked;

//Initialize
var orbit = $(this).addClass('orbit'),
orbitWrapper = orbit.wrap('<div class="orbit-wrapper" />').parent();
orbit.add(orbitWidth).width('1px').height('1px');

//Collect all slides and set slider size of largest image
var slides = orbit.children('img, a, div');
slides.each(function() {
var _slide = $(this),
_slideWidth = _slide.width(),
_slideHeight = _slide.height();
if(_slideWidth > orbit.width()) {
orbit.add(orbitWrapper).width(_slideWidth);
orbitWidth = orbit.width();
}
if(_slideHeight > orbit.height()) {
orbit.add(orbitWrapper).height(_slideHeight);
orbitHeight = orbit.height();
}
numberSlides++;
});

//Animation locking functions
function unlock() {
locked = false;
}
function lock() {
locked = true;
}

//If there is only a single slide remove nav, timer and bullets
if(slides.length == 1) {
options.directionalNav = false;
options.timer = false;
options.bullets = false;
}

//Set initial front photo z-index and fades it in
slides.eq(activeSlide)
.css({"z-index" : 3})
.fadeIn(function() {
//brings in all other slides IF css declares a display: none
slides.css({"display":"block"})
});

// ==============
// ! TIMER
// ==============

//Timer Execution
function startClock() {
if(!options.timer || options.timer == 'false') {
return false;
//if timer is hidden, don't need to do crazy calculations
} else if(timer.is(':hidden')) {
clock = setInterval(function(e){
shift("next");
}, options.advanceSpeed);
//if timer is visible and working, let's do some math
} else {
timerRunning = true;
pause.removeClass('active')
clock = setInterval(function(e){
var degreeCSS = "rotate("+degrees+"deg)"
degrees += 2
rotator.css({
"-webkit-transform": degreeCSS,
"-moz-transform": degreeCSS,
"-o-transform": degreeCSS
});
if(degrees > 180) {
rotator.addClass('move');
mask.addClass('move');
}
if(degrees > 360) {
rotator.removeClass('move');
mask.removeClass('move');
degrees = 0;
shift("next");
}
}, options.advanceSpeed/180);
}
}
function stopClock() {
if(!options.timer || options.timer == 'false') { return false; } else {
timerRunning = false;
clearInterval(clock);
pause.addClass('active');
}
}

//Timer Setup
if(options.timer) {
var timerHTML = '<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>'
orbitWrapper.append(timerHTML);
var timer = orbitWrapper.children('div.timer'),
timerRunning;
if(timer.length != 0) {
var rotator = $('div.timer span.rotator'),
mask = $('div.timer span.mask'),
pause = $('div.timer span.pause'),
degrees = 0,
clock;
startClock();
timer.click(function() {
if(!timerRunning) {
startClock();
} else {
stopClock();
}
});
if(options.startClockOnMouseOut){
var outTimer;
orbitWrapper.mouseleave(function() {
outTimer = setTimeout(function() {
if(!timerRunning){
startClock();
}
}, options.startClockOnMouseOutAfter)
})
orbitWrapper.mouseenter(function() {
clearTimeout(outTimer);
})
}
}
}

//Pause Timer on hover
if(options.pauseOnHover) {
orbitWrapper.mouseenter(function() {
stopClock();
});
}

// ==============
// ! CAPTIONS
// ==============

//Caption Setup
if(options.captions) {
var captionHTML = '<div class="orbit-caption"></div>';
orbitWrapper.append(captionHTML);
var caption = orbitWrapper.children('.orbit-caption');
setCaption();
}

manuxdjent · #5 (**permalink**) 14/11/2012, 11:34

Código:

//Caption Execution
            function setCaption() {
            	if(!options.captions || options.captions =="false") {
            		return false; 
            	} else {
	            	var _captionLocation = slides.eq(activeSlide).data('caption'); //get ID from rel tag on image
	            		_captionHTML = $(_captionLocation).html(); //get HTML from the matching HTML entity            		
	            	//Set HTML for the caption if it exists
	            	if(_captionHTML) {
	            		caption
		            		.attr('id',_captionLocation) // Add ID caption
		                	.html(_captionHTML); // Change HTML in Caption 
		                //Animations for Caption entrances
		             	if(options.captionAnimation == 'none') {
		             		caption.show();
		             	}
		             	if(options.captionAnimation == 'fade') {
		             		caption.fadeIn(options.captionAnimationSpeed);
		             	}
		             	if(options.captionAnimation == 'slideOpen') {
		             		caption.slideDown(options.captionAnimationSpeed);
		             	}
	            	} else {
	            		//Animations for Caption exits
	            		if(options.captionAnimation == 'none') {
		             		caption.hide();
		             	}
		             	if(options.captionAnimation == 'fade') {
		             		caption.fadeOut(options.captionAnimationSpeed);
		             	}
		             	if(options.captionAnimation == 'slideOpen') {
		             		caption.slideUp(options.captionAnimationSpeed);
		             	}
	            	}
				}
            }
            
// ==================
// ! DIRECTIONAL NAV   
// ==================

            //DirectionalNav { rightButton --> shift("next"), leftButton --> shift("prev");
            if(options.directionalNav) {
            	if(options.directionalNav == "false") { return false; }
                var directionalNavHTML = '<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>';
                orbitWrapper.append(directionalNavHTML);
                var leftBtn = orbitWrapper.children('div.slider-nav').children('span.left'),
                	rightBtn = orbitWrapper.children('div.slider-nav').children('span.right');
                leftBtn.click(function() { 
                    stopClock();
                    shift("prev");
                });
                rightBtn.click(function() {
                    stopClock();
                    shift("next")
                });
            }
            
// ==================
// ! BULLET NAV   
// ==================
            
            //Bullet Nav Setup
            if(options.bullets) { 
            	var bulletHTML = '<ul class="orbit-bullets"></ul>';            	
            	orbitWrapper.append(bulletHTML);
            	var bullets = orbitWrapper.children('ul.orbit-bullets');
            	for(i=0; i<numberSlides; i++) {
            		var liMarkup = $('<li>'+(i+1)+'</li>');
            		if(options.bulletThumbs) {
            			var	thumbName = slides.eq(i).data('thumb');
            			if(thumbName) {
            				var liMarkup = $('<li class="has-thumb">'+i+'</li>')
            				liMarkup.css({"background" : "url("+options.bulletThumbLocation+thumbName+") no-repeat"});
            			}
            		} 
            		orbitWrapper.children('ul.orbit-bullets').append(liMarkup);
            		liMarkup.data('index',i);
            		liMarkup.click(function() {
            			stopClock();
            			shift($(this).data('index'));
            		});
            	}
            	setActiveBullet();
            }
            //Bullet Nav Execution
        	function setActiveBullet() { 
        		if(!options.bullets) { return false; } else {
	        		bullets.children('li').removeClass('active').eq(activeSlide).addClass('active');
	        	}
        	}
        	
// ====================
// ! SHIFT ANIMATIONS   
// ====================
            
            //Animating the shift!
            function shift(direction) {
        	    //remember previous activeSlide
                var prevActiveSlide = activeSlide,
                	slideDirection = direction;
                //exit function if bullet clicked is same as the current image
                if(prevActiveSlide == slideDirection) { return false; }
                //reset Z & Unlock
                function resetAndUnlock() {
                    slides
                    	.eq(prevActiveSlide)
                    	.css({"z-index" : 1});
                    unlock();
                    options.afterSlideChange.call(this);
                }
                if(slides.length == "1") { return false; }
                if(!locked) {
                    lock();
					 //deduce the proper activeImage
                    if(direction == "next") {
                        activeSlide++
                        if(activeSlide == numberSlides) {
                            activeSlide = 0;
                        }
                    } else if(direction == "prev") {
                        activeSlide--
                        if(activeSlide < 0) {
                            activeSlide = numberSlides-1;
                        }
                    } else {
                        activeSlide = direction;
                        if (prevActiveSlide < activeSlide) { 
                            slideDirection = "next";
                        } else if (prevActiveSlide > activeSlide) { 
                            slideDirection = "prev"
                        }
                    }
                    //set to correct bullet
                     setActiveBullet();  
                     
                    //set previous slide z-index to one below what new activeSlide will be
                    slides
                    	.eq(prevActiveSlide)
                    	.css({"z-index" : 2});    
                    
                    //fade
                    if(options.animation == "fade") {
                        slides
                        	.eq(activeSlide)
                        	.css({"opacity" : 0, "z-index" : 3})
                        	.animate({"opacity" : 1}, options.animationSpeed, resetAndUnlock);
                    }
                    //horizontal-slide
                    if(options.animation == "horizontal-slide") {
                        if(slideDirection == "next") {
                            slides
                            	.eq(activeSlide)
                            	.css({"left": orbitWidth, "z-index" : 3})
                            	.animate({"left" : 0}, options.animationSpeed, resetAndUnlock);
                        }
                        if(slideDirection == "prev") {
                            slides
                            	.eq(activeSlide)
                            	.css({"left": -orbitWidth, "z-index" : 3})
                            	.animate({"left" : 0}, options.animationSpeed, resetAndUnlock);
                        }
                    }
                    //vertical-slide
                    if(options.animation == "vertical-slide") { 
                        if(slideDirection == "prev") {
                            slides
                            	.eq(activeSlide)
                            	.css({"top": orbitHeight, "z-index" : 3})
                            	.animate({"top" : 0}, options.animationSpeed, resetAndUnlock);
                        }
                        if(slideDirection == "next") {
                            slides
                            	.eq(activeSlide)
                            	.css({"top": -orbitHeight, "z-index" : 3})
                            	.animate({"top" : 0}, options.animationSpeed, resetAndUnlock);
                        }
                    }
                    //push-over
                    if(options.animation == "horizontal-push") {
                        if(slideDirection == "next") {
                            slides
                            	.eq(activeSlide)
                            	.css({"left": orbitWidth, "z-index" : 3})
                            	.animate({"left" : 0}, options.animationSpeed, resetAndUnlock);
                            slides
                            	.eq(prevActiveSlide)
                            	.animate({"left" : -orbitWidth}, options.animationSpeed);
                        }
                        if(slideDirection == "prev") {
                            slides
                            	.eq(activeSlide)
                            	.css({"left": -orbitWidth, "z-index" : 3})
                            	.animate({"left" : 0}, options.animationSpeed, resetAndUnlock);
							slides
                            	.eq(prevActiveSlide)
                            	.animate({"left" : orbitWidth}, options.animationSpeed);
                        }
                    }
                    setCaption();
                } //lock
            }//orbit function
        });//each call
    }//orbit plugin call
})(jQuery);

manuxdjent · #6 (**permalink**) 14/11/2012, 11:35

El CSS del slider:

Código HTML:

/* These are just the demo styles and these can be removed and Orbit 
will still work like a champ (except any content block needs a background which
our demo gets from this sheet) */

.container {
    position: relative; 
    left:4.5%;
	}
    
.content { background: url(dummy-images/coffee.jpg); }
.content h1 {
	font-size: 40px; 
	text-transform: uppercase; 
	font-weight: bold; 
	text-align: center;
	margin-top: 180px;
	color: #222;
	line-height: 50px;  }
.content h3 {
	text-align: center; 
	font-size: 22px; 
	color: #222; }

Código HTML:

/* CSS for jQuery Orbit Plugin 1.2.3
 * www.ZURB.com/playground
 * Copyright 2010, ZURB
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 
 
 
/* PUT IN YOUR SLIDER ID AND SIZE TO MAKE LOAD BEAUTIFULLY
   ================================================== */
#featured { 
	width: 869px;
	height: 398px;
	background: #000 url('orbit/loading.gif') no-repeat center center;
	overflow: hidden; 
	
	
	}
#featured>img,  
#featured>div,
#featured>a { display: none; }




/* CONTAINER
   ================================================== */

div.orbit-wrapper {
    width: 1px;
    height: 1px;
    position: relative; }

div.orbit {
    width: 1px;
    height: 1px;
    position: relative;
    overflow: hidden }

div.orbit>img {
    position: absolute;
    top: 0;
    left: 0;
    display: none; }

div.orbit>a {
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 0; 
    display: none; }

.orbit>div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

/* Note: If your slider only uses content or anchors, you're going to want to put the width and height declarations on the ".orbit>div" and "div.orbit>a" tags in addition to just the .orbit-wrapper */


/* TIMER
   ================================================== */

div.timer {
    width: 40px;
    height: 40px;
    overflow: hidden;
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: .6;
    cursor: pointer;
    z-index: 1001; }

span.rotator {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: -20px;
    background: url(orbit/rotator-black.png) no-repeat;
    z-index: 3; }

span.mask {
    display: block;
    width: 20px;
    height: 40px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    overflow: hidden; }

span.rotator.move {
    left: 0 }

span.mask.move {
    width: 40px;
    left: 0;
    background: url(orbit/timer-black.png) repeat 0 0; }

span.pause {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    background: url(orbit/pause-black.png) no-repeat;
    z-index: 4;
    opacity: 0; }

span.pause.active {
    background: url(orbit/pause-black.png) no-repeat 0 -40px }

div.timer:hover span.pause,
span.pause.active {
    opacity: 1 }


/* CAPTIONS
   ================================================== */

.orbit-caption {
    display: none;
    font-family: "HelveticaNeue", "Helvetica-Neue", Helvetica, Arial, sans-serif; }

.orbit-wrapper .orbit-caption {
    background: #000;
    background: rgba(0,0,0,.6);
    z-index: 1000;
    color: #fff;
	text-align: center;
	padding: 7px 0;
    font-size: 13px;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%; }


/* DIRECTIONAL NAV
   ================================================== */

div.slider-nav {
    display: block }

div.slider-nav span {
    width: 78px;
    height: 100px;
    text-indent: -9999px;
    position: absolute;
    z-index: 1000;
    top: 50%;
    margin-top: -50px;
    cursor: pointer; }

div.slider-nav span.right {
    background: url(orbit/right-arrow.png);
    right: 0; }

div.slider-nav span.left {
    background: url(orbit/left-arrow.png);
    left: 0; }

/* BULLET NAV
   ================================================== */

.orbit-bullets {
    position: absolute;
    z-index: 1000;
    list-style: none;
    bottom: -40px;
    left: 50%;
	margin-left: -50px;
    padding: 0; }

.orbit-bullets li {
    float: left;
    margin-left: 5px;
    cursor: pointer;
    color: #999;
    text-indent: -9999px;
    background: url(orbit/bullets.jpg) no-repeat 4px 0;
    width: 13px;
    height: 12px;
    overflow: hidden; }

.orbit-bullets li.active {
    color: #222;
    background-position: -8px 0; }
    
.orbit-bullets li.has-thumb {
    background: none;
    width: 100px;
    height: 75px; }

.orbit-bullets li.active.has-thumb {
    background-position: 0 0;
    border-top: 2px solid #000; }

Espero que me podáis ayudar, gracias y un saludo.

C2am · #7 (**permalink**) 14/11/2012, 17:24

Emprear pediste código, obtienes código.

Hola, me parece que la idea de Emprear al pedir mayor información era que nos dieras algún link.
Digo, porque está bien, nos muestras todo lo que tienes, pero para ver cual es la cuestión deberíamos montar el sitio, y hacer que funcione el jquery, etc.

Por ejemplo: http://jsfiddle.net/2Gvnp/embedded/result/

Como te darás cuenta siempre faltará algo.

Suponemos que, o ya tienes algo subido a internet o que pronto lo subirás.
Si aún no tienes hosting prueba con alguno gratuito para las pruebas online.

En cuanto a como determinar cual es el problema, una muy buena ayuda son las herramientas de desarrollo de los navegadores (F12 generalmente).
Con ellas puedes localizar la zona de interes y ver que propiedades css la afectan, y en base a eso y a pruebas en el mismo navegador podrás determinar como solucionar el problema.

Esperamos el link.
Saludos