CSS div issue in Firefox

gigax · 04-01-2009, 06:41 PM

Hello,
I have one issue :
i have to show rss content in slider and it works peffect in all other
browsers except in Firefox , where the rss content come out of the boundaries of the slider,
my question is how to make the content to show in slider div properly like
in other browsers? I have tried almost everything with no success, i think
maybe the problem is somewhere in the css file but don't know what exactly
is wrong, please if you can sudgest something to fix it i'll be very greatfull
for any help.

-here is the code:

Code:

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 10px solid navy;
border-bottom-width: 6px;
width: 400px; /*width of featured content slider*/
height: 250px;
}



.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0;  /*leave as is*/
top: 0;  /*leave as is*/
padding: 5px;
background: white;
width: 390px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

.pagination{
width: 400px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
text-align: right;
background-color: navy;
padding: 5px 10px;
}

.pagination a{
padding: 0 5px;
text-decoration: none; 
color: #00007D;
background: white;
}

.pagination a:hover, .pagination a.selected{
color: #000;
background-color: #FEE496;
}

-i also use ajax code:

Code:

<html>
<head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<link rel="stylesheet" type="text/css" href="contentslider.css" />

<script type="text/javascript" src="contentslider.js">

/***********************************************
* Featured Content Slider- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

/***********************************************
* Ajax Includes script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//To include a page, invoke ajaxinclude("afile.htm") in the BODY of page
//Included file MUST be from the same domain as the page displaying it.

var rootdomain="http://"+window.location.hostname

function ajaxinclude(url) {
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.open('GET', url, false) //get page synchronously 
page_request.send(null)
writecontent(page_request)
}

function writecontent(page_request){
if (window.location.href.indexOf("http")==-1 || page_request.status==200)
document.write(page_request.responseText)
}

</script>


</head>

<body>


<h2>Example 2, Pagination links from markup</h2>

<!--Inner content DIVs should always carry "contentdiv" CSS class-->
<!--Pagination DIV should always carry "paginate-SLIDERID" CSS class-->

<div id="slider2" class="sliderwrapper">

<div class="contentdiv">
Content 1 Here.
</div>

<div class="contentdiv">
Content 2 Here. <br />
<p></p><a href="javascript:featuredcontentslider.jumpTo('slider2', 1)">Go back to 1st slide</a></p>
</div>

<div class="contentdiv">
<script type="text/javascript">
ajaxinclude("feed.php")
</script>
</div>

</div>

<div id="paginate-slider2" class="pagination">

<a href="#" class="toc">First Page</a> <a href="#" class="toc anotherclass">Second Page</a> <a href="#" class="toc">Third Page</a> <a href="#" class="prev" style="margin-left: 10px"><</a> <a href="#" class="next">></a>

</div>

<script type="text/javascript">

featuredcontentslider.init({
	id: "slider2",  //id of main slider DIV
	contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
	toc: "markup",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
	nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
	revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
	enablefade: [true, 0.2],  //[true/false, fadedegree]
	autorotate: [false, 3000],  //[true/false, pausetime]
	onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
		//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
		//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
	}
})

</script>

</body>
</html>

Thank you in advance.

Rowsdower! · 04-01-2009, 06:44 PM

Hello and welcome to the forums! A live page example would be much easier for us to diagnose and work on. Do you have a link to a working sample page?

drhowarddrfine · 04-01-2009, 06:45 PM

This is incorrect:

Code:

<html>
<head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Remove the <html> and <head>

gigax · 04-01-2009, 06:50 PM

Here is the link you can see it in IE-others browsers
and in Firefox and compare it:

http://http://www.itgama.com/news.php

Rowsdower! · 04-01-2009, 07:26 PM

Are you talking about getting this:

Quote:

Site: DarikNews.bg: света и България
Ангелов: Продължаваме да вярваме
ArcelorMIttal оставил без работа 700 миньори в Босна
Черно море излезе на трето място в НБЛ
Президентът на България доволен от победата на националите
Мъри: Проблемите ни обединиха в отличен колектив
Осем чужденци пострадаха при катастрофа
Дело за наркотици тръгна след шест отлагания
Отново в играта! България би Кипър 2:0
Обама: Трябва да действаме заедно срещу икономическата криза
Лидерът на СДС – Варна се оттегля
Започва ремонтът на една от най-разбитите улици в Свиленград
Бронзовият Кирил Терзиев: Беше много тежко
На живо: Световни квалификации, Зона Европа
Б. Кръстев: "Бяхме дошли за 1 точка. Дано си вземем следващите домакински мачове"
Bутов се оттегля от треньорския пост в Локо СЗ, но остава, като съветник

To appear inside of your <div id="slider2" class="sliderwrapper"> div? If so, you've closed your div tag in front of the content. Just move the closing div tag down below.

As for the error pointed out by drhowarddrfine, he's taken you most of the way there. You want to delete the <html> and <head> tags but you'll also want to add another <head> tag down below like so:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>

If you don't do this extra step you will still be in a bad position.

gigax · 04-01-2009, 08:10 PM

I mean this:

Quote:

Site: DarikNews.bg: света и България
Ангелов: Продължаваме да вярваме
ArcelorMIttal оставил без работа 700 миньори в Босна
Черно море излезе на трето място в НБЛ
Президентът на България доволен от победата на националите
Мъри: Проблемите ни обединиха в отличен колектив
Осем чужденци пострадаха при катастрофа
Дело за наркотици тръгна след шест отлагания
Отново в играта! България би Кипър 2:0
Обама: Трябва да действаме заедно срещу икономическата криза
Лидерът на СДС – Варна се оттегля
Започва ремонтът на една от най-разбитите улици в Свиленград
Бронзовият Кирил Терзиев: Беше много тежко
На живо: Световни квалификации, Зона Европа
Б. Кръстев: "Бяхме дошли за 1 точка. Дано си вземем следващите домакински мачове"
Bутов се оттегля от треньорския пост в Локо СЗ, но остава, като съветник

to show in one of the three <div class="contentdiv"> Content here </div>

in <div id="slider2" class="sliderwrapper"> ....</div>

i tried to move end div like you sudgest ,but not worked ,

if you can guide me how exactly to do it i 'll be very greatful.

drhowarddrfine · 04-01-2009, 09:06 PM

69 HTML errors
CSS errors

gigax · 04-01-2009, 09:59 PM

I don't think fixing the W3C html errors will solve the problem with the slider in firefox
i fix some of them with no effect, i will fix all of them later after i solve the problem with slider, i think the issue is somewhere in css file or in divs but dont know what exactly, please if you can guide me how to fix it.

Thank you .