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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Page indenting by itself on Firefox

    Please check out (with Firefox) this website I am designing:

    http://micunlimited.com/index.html

    When you look at the Quartz and Granite pages, the page indents itself to the left slightly. I have identified that this problem occurs when the height of the page is longer than what can fit on your screen (meaning you can scroll down/up).

    How can I fix this? Again, this problem only occurs with Firefox but works fine with IE.

  • #2
    New Coder
    Join Date
    Jun 2010
    Posts
    12
    Thanks
    1
    Thanked 1 Time in 1 Post
    Can you post a screen shot of how it looks in firefox for you? it looks ok for me.

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Ok after some experimenting, the reason why it is indenting to the left is because the added length of the page adds a up/down scroll bar. The scroll bar then takes up room in the browser, therefore forces everything to relocate to the center (the browser now has lesser room because of the scroll bar). If you notice, IE already includes an up/down scroll bar on every page (even if it is greyed out) by default. Firefox pages which are short in height do not include a scroll bar (because it is unnecessary).

    Does that make any sense? Please let me know if you dont understand it. But I will still like the website to not indent even with the scroll bar. Is there any way to prevent that?
    Last edited by ThumperSD; 06-27-2010 at 01:50 AM.

  • #4
    New Coder
    Join Date
    Jun 2010
    Posts
    12
    Thanks
    1
    Thanked 1 Time in 1 Post
    What css do you have for the body tag?

  • #5
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Brucey2010 View Post
    What css do you have for the body tag?
    body {
    background-color:fffdf9;
    margin:20px auto 10px auto;
    text-align:center;
    }

    I know it has nothing to do with the css body tag since I still had the same problem after removing the css from my code

  • #6
    New Coder
    Join Date
    Jun 2010
    Posts
    12
    Thanks
    1
    Thanked 1 Time in 1 Post
    add

    position: relative;

    and see if that works


    If not try

    putting all the elements in a div, make that div position relative and overflow hidden


    I'm also still learning all this I tend to learn by trial and error lost count on the numbers of times I been picking my brains out about something that's been so simple to fix.

  • Users who have thanked Brucey2010 for this post:

    ThumperSD (06-27-2010)

  • #7
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    position: relative; did not work

    Im not sure what you mean by the second method but still sounds like a lot of work. I guess it's not a big deal since I see it happening on other sites too with Firefox. Thanks though.

  • #8
    New Coder
    Join Date
    Jun 2010
    Posts
    12
    Thanks
    1
    Thanked 1 Time in 1 Post
    Put the content (so everything that is moving left) between two <div> tags give the div an ID then add the rules

    position: relative;
    overflow: hidden;

    to the id in your CSS

    example



    <div id="bingo">

    Your content here

    Your content here

    Your content here

    </div>


    CSS

    #bingo {
    position: relative;
    overflow: hidden;
    }



    If that don't work I'm not sure. Like I said I cant see anything moving I am however sat in front of a large monitor.


    Best of luck with it


    Brucey

  • #9
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Although invalid, overflow-y: scroll will achieve what you need.
    Really, though, I doubt anyone would really notice, or, even if they did, care. The scrollbar would look far more out of place to a Firefox, Chrome or Safari user than the jump would.

  • #10
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    831
    Thanks
    10
    Thanked 79 Times in 77 Posts
    Value Error : background-color fffdf9 is not a color value : fffdf9 fffdf9

    Might help to correct some HTML errors. You do not have a proper document type which may put a few browsers into Quirks Mode guaranteeing that your pages will not be cross-browser compatible.
    ☠ ☠RON☠ ☠

  • Users who have thanked Major Payne for this post:

    ThumperSD (06-27-2010)

  • #11
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Brucey2010 View Post
    Put the content (so everything that is moving left) between two <div> tags give the div an ID then add the rules

    position: relative;
    overflow: hidden;

    to the id in your CSS

    example



    <div id="bingo">

    Your content here

    Your content here

    Your content here

    </div>


    CSS

    #bingo {
    position: relative;
    overflow: hidden;
    }



    If that don't work I'm not sure. Like I said I cant see anything moving I am however sat in front of a large monitor.


    Best of luck with it


    Brucey
    Thanks but that does not work


    Quote Originally Posted by Apostropartheid View Post
    Although invalid, overflow-y: scroll will achieve what you need.
    Really, though, I doubt anyone would really notice, or, even if they did, care. The scrollbar would look far more out of place to a Firefox, Chrome or Safari user than the jump would.
    That adds an extra scroll bar. When there is a long page, I end up with two scroll bars.

    Quote Originally Posted by Major Payne View Post
    Value Error : background-color fffdf9 is not a color value : fffdf9 fffdf9

    Might help to correct some HTML errors. You do not have a proper document type which may put a few browsers into Quirks Mode guaranteeing that your pages will not be cross-browser compatible.
    It is a color I made on Photoshop. It works for me on every browser Ive used so far so is it only an invalid color value on certain browsers?

    I understand that the first link you showed me above adds the internal css to my external css. I was going to do that when I get everything running normally. Other than that may you tell me what improper doc type I have? I havent done web design in 10 years.

    So do I just add the following to the beginning of my doc?
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    I deleted that code (dreamweaver automatically added it) because I did not know it was relevant.

    Also may you tell me how I can ecrypt certain folders and make it inaccessible (403 error)? I remember it was something i had to do via FTP.
    Last edited by ThumperSD; 06-27-2010 at 06:40 PM.

  • #12
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    It won't add an extra scrollbar if you apply it to the body element (or the HTML element, try both).

  • Users who have thanked Apostropartheid for this post:

    ThumperSD (06-27-2010)

  • #13
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Adding the following doc type to my page takes away the background color. What cross browser problem can I run into for leaving it out?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    Last edited by ThumperSD; 06-27-2010 at 07:00 PM.

  • #14
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    831
    Thanks
    10
    Thanked 79 Times in 77 Posts
    Quote Originally Posted by ThumperSD View Post
    It is a color I made on Photoshop. It works for me on every browser Ive used so far so is it only an invalid color value on certain browsers?
    The color is not invalid. When it says that, the color VALUE code is inavlid. Hex color values require the "#" in front: #ddfacb

    You DON'T leave OUT a document type. If there are problems AFTER you add a PROPER doctype, then its your coding at fault and it must be corrected to come as close as you can to being cross-browser compatible. XHTML 1.0 Transitional is a good one to start with, but you have to code to it.

    You can beat yourself to death trying to please the hundreds of browsers actually out there. Just validate your CSS and HTML.

    Why Validate?
    Last edited by Major Payne; 06-27-2010 at 07:43 PM.
    ☠ ☠RON☠ ☠

  • Users who have thanked Major Payne for this post:

    ThumperSD (06-27-2010)

  • #15
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Oh I forgot the #. Im really only aiming for compatibility for Firefox/IE/Safari/Chrome since that will be what most of the target customers will be utilizing.

    I came across 24 errors and 1 warning for my index page. However I do not understand what some of these errors mean. What is the difference between ending a tag with ">" and " />"

    BTW are you guys freelancers?
    Last edited by ThumperSD; 06-27-2010 at 07:55 PM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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