...

View Full Version : Page indenting by itself on Firefox



ThumperSD
06-27-2010, 01:20 AM
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.

Brucey2010
06-27-2010, 01:35 AM
Can you post a screen shot of how it looks in firefox for you? it looks ok for me.

ThumperSD
06-27-2010, 01:48 AM
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?

Brucey2010
06-27-2010, 01:53 AM
What css do you have for the body tag?

ThumperSD
06-27-2010, 01:56 AM
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

Brucey2010
06-27-2010, 01:58 AM
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.

ThumperSD
06-27-2010, 02:19 AM
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.

Brucey2010
06-27-2010, 02:27 AM
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

Apostropartheid
06-27-2010, 02:36 AM
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.

Major Payne
06-27-2010, 06:39 AM
Value Error : background-color fffdf9 is not a color value : fffdf9 fffdf9 (http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fmicunlimited.com%2Findex.html)

Might help to correct some HTML errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fmicunlimited.com%2Findex.html). 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.

ThumperSD
06-27-2010, 06:36 PM
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



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.


Value Error : background-color fffdf9 is not a color value : fffdf9 fffdf9 (http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fmicunlimited.com%2Findex.html)

Might help to correct some HTML errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fmicunlimited.com%2Findex.html). 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.

Apostropartheid
06-27-2010, 06:55 PM
It won't add an extra scrollbar if you apply it to the body element (or the HTML element, try both).

ThumperSD
06-27-2010, 06:57 PM
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">

Major Payne
06-27-2010, 07:38 PM
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 (http://www.w3.org/QA/2002/04/valid-dtd-list.html). 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? (http://validator.w3.org/docs/why.html)

ThumperSD
06-27-2010, 07:50 PM
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?

Major Payne
06-27-2010, 08:07 PM
MySpace is the only site I know that does not like the "#" in front of the hex code. Think they prefer the character entity for it, but MySpace code has always been messed up. :P

Since you are using XHTML 1.0 document type, tags that do not normally have a closing tag MUST be closed using a space and the "/" character before the ">".

I am a freelancer as well as others on this forum, but the services we offer here are free. No soliciting for business is allowed on the forum. You could check out FreeLancer (http://www.freelancer.com/).

Apostropartheid
06-28-2010, 06:25 PM
Well, business dealings are allowed, but only in the appropriate fora. Soliciting on the general fora (such as this one) will result in removal.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum