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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    May 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Slider outside and to the right of container in firefox

    Hi. I'm having issues with my slideshow appearing to the right in firefox. www.officeworldworkplace.com In the other browsers, it appears in the center how I'd like it to. What can I do to have the slideshow appear properly in firefox? I'm new to HTML and CSS so I'm sure my code is incorrect in many other ways. I'm also open to suggestions on how I can clean up my code since I'm sure my CSS is conflicting. Thank you.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    We need code or link to site to solve problems.
    But I'd disable my plug ins first to see if one of them is causing problems. Under menu HELP is RESTART WITH ADD-ONS DISABLED.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New to the CF scene
    Join Date
    May 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry. Here's the link Office World :: An Office Furniture Dealership in Eugene, Oregon. I tried disabling plugins and the slider is still not appearing in the correct place. Thank you.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Here's a couple of places to start:
    This section of CSS:
    Code:
    <div class="banner"><!-- InstanceBeginEditable name="Menu Bar 2" -->
      <ul id="MenuBar1" class="MenuBarVertical">
        <li><a class="MenuBarItemSubmenu" href="about.html">about us</a></li>
        <li><a href="services.html" class="MenuBarItemSubmenu">services</a></li>
        <li><a class="MenuBarItemSubmenu" href="markets.html">markets</a></li>
        <li><a href="products.html" class="MenuBarItemSubmenu">products</a></li>
        <li><a href="furniture.html">furniture lines</a></li>
      </ul>
    
    
    <!-- InstanceEndEditable -->
      <div id= "mainslidecontainer">
    It's just a guess on my part but I think you wanted to end the <div class="banner"> before the <div id= "mainslidecontainer"> started. The way it is now the mainslidecontainer is inside the banner div and both have a width: 900px; rule. Not gonna work.
    Next thing is missing semicolons:
    Code:
    .banner {
    	width: 900px
    	height: 1000px
    	text-align: left;
    	border: 0;
    	border-top-style: none;
    	border-right-style: none;
    	border-bottom-style: none;
    	border-left-style: none;
    	overflow: visible;
    	z-index: 0;
    	
    }
    As a final though and one that has no bearing on your question:
    if you have no border style you do not have to say that, that is the default. Also no need to add z-index:0 It won't work anyway cause it only works on positioned elements.

    Hope this gives you a start into solving your problems.
    It would behoove you to use The W3C Markup Validation Service to check your code as you go along and The W3C CSS Validation Service for CSS. The CSS validator shows what I told you plus a number of others.
    If you have more come back.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    I wonder where my post went?
    Would one of you monitors check it out and place it here. I have answered this question.


    You have missed two semicolons in your css.css file:
    Code:
    .banner {
    	width: 900px
    	height: 1000px
    	text-align: left;
    	border: 0;
    	border-top-style: none;
    	border-right-style: none;
    	border-bottom-style: none;
    	border-left-style: none;
    	overflow: visible;
    	z-index: 0;
    	
    }
    I suggest that you use The W3C CSS Validation Service to check other errors in CSS.

    Also From HTML:

    Code:
     <div class="nav" id="nav">
    <ul>
    <li><a href="architect.html">a & d</a></li>
    <li><a href="healthcare.html">healthcare</a></li>
    <li><a href="education.html">education</a></li>
    <li><a href="government.html">government</a></li>
    <li><a href="business.html">business</a></li>
    <li><a href="index.html">home</a><br></li>
    </ul></div>
    
    <div class="banner"><!-- InstanceBeginEditable name="Menu Bar 2" -->
      <ul id="MenuBar1" class="MenuBarVertical">
        <li><a class="MenuBarItemSubmenu" href="about.html">about us</a></li>
        <li><a href="services.html" class="MenuBarItemSubmenu">services</a></li>
        <li><a class="MenuBarItemSubmenu" href="markets.html">markets</a></li>
        <li><a href="products.html" class="MenuBarItemSubmenu">products</a></li>
        <li><a href="furniture.html">furniture lines</a></li>
      </ul>
    
    
    <!-- InstanceEndEditable -->
      <div id= "mainslidecontainer">
    Notice that mainslidecontainer is inside of banner and they both use width: 900px; which leads to trouble my friend. Think you wanted to end banner before starting mainslidecontainer. You'll have to find were that end tag is and delete it.
    Last edited by sunfighter; 05-09-2014 at 09:51 PM.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    Quote Originally Posted by sunfighter View Post
    I wonder where my post went?
    Would one of you monitors check it out and place it here. I have answered this question.
    It was here but in moderation state for some reason and therefore hidden to the public. perhaps you have used a word that triggered the spam filter? I’ve approved your post now despite there probably being a duplicate now.

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Curiouser and curiouser... Thanks Steve.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #8
    New to the CF scene
    Join Date
    May 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, Steve. I'm still working on it. When I added the semicolons, the layout shifted around completely. And the div wasn't cooperating before the 'mainslidecontainer'. All I know is that firefox was unaffected by any of the changes I had made and the layout was still intact with the slider outside of the container....even though the other browsers went out of whack when I made the semi-colon/div change. Any other suggestions to why the slider is outside of the container on firefox? I've been trying to fiddle with it, but I'm getting nowhere. Thank you.

  • #9
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    jennymae I thought you were going to look at the remaining code come up with something. I don't know what the size you want for your divs so I left that up to you.
    Please look at this:
    This is basicly what your div structures looks like:
    Code:
    <div class="container">
    	<div class="banner"></div>
    	<div class="nav" id="nav"</div>
    	<div class="banner"></div>
    	<div id= "mainslidecontainer"></div>
    	<div class="content2"></div>
    	<div class="subfooter"></div>
    </div>
    This is the CSS you use to style them(but I only include widths):
    Code:
    .container {width: 900px;} This contains the following:
    ---------------------------------------------------------
    .banner {width: 900px;} <= These two can not be side by side in a 900px width div
    .mainslidecontainer {width: 900px;} <= These two can not be side by side in a 900px width div
    
    .content2 {width: 790px;} <= This is next image but has smaller width
    .subfooter {width: 900px;}<= This is shupposed to be a 900px width div to be the width of the .container div
    You need to make some adjustments.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

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