Web Analytics Made Easy -
StatCounter CSS div issue in Firefox - CodingForum

Announcement

Collapse
No announcement yet.

CSS div issue in Firefox

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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; Apr 1, 2009, 03:19 PM.

  • #2
    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

    Comment


    • #3
      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>
      Is IE9 a modern browser?
      IE9 is at least 2 years behind the modern web.

      Comment


      • #4
        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

        Comment


        • #5
          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">
          [B][COLOR="Red"]<head>[/COLOR][/B]
          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

          Comment


          • #6
            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.

            Comment


            • #7
              69 HTML errors
              CSS errors
              Is IE9 a modern browser?
              IE9 is at least 2 years behind the modern web.

              Comment


              • #8
                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 .

                Comment

                Working...
                X