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 8 of 8
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS div issue in Firefox

    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.
    Last edited by gigax; 04-01-2009 at 08:19 PM.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    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>

  • #4
    New Coder
    Join Date
    Mar 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Are you talking about getting this:
    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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #6
    New Coder
    Join Date
    Mar 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I mean this:

    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.

  • #7
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts

  • #8
    New Coder
    Join Date
    Mar 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 .


  •  

    Posting Permissions

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