Help with main nav and wrapper squiz of home page

[wd2b]

Hello Folks,

I am working on a site for a friend that gets me puzzled, don’t know exactly what is happening with the home page. The site is mainly HTML and CSS. Here is the link: http://www.flamousgrill.com/Index.html

On my local computer, when viewed under Chrome, IE, and FireFox, FireFox shows the home page to be quizzed (narrower than the rest of the pages). All the pages use the same main CSS to control their width.

Also the top sub-level of the main nav appears to be pushed to the right. If you click on “Menus”, for example, under “FlamousGrill”, you’ll the first sublevel in white letters to the right. This is not supposed to be the case at all. This only occur in the main nav of the Home page. The rest of the completed pages appear OK. Been trying to understand what the problem may be, but could not find any thing. Perhaps someone with more knowledge and fresh view/eye can help me to sort out what is causing the homepage to be narrower and the top sub-level of the main nav to be pushed to the right.

Plus any other recommendation(s) to help improve my work so far would much appreciated.

Thank you in advance.
wd2b

[wd2b]

Thank you, Chris.

Added “width: 100%;”, but still not working. For whatever reason, only the homepage appear narrower than the rest, perhaps that forces the top sub-level of the main nav to move to the right?

What else could be causing this?

[wd2b]

Chris, that gray background showed more in the home page because I was desperately trying to increase the width of the wrapper, hoping that it would undo the squeezed width of the homepage. But it obviously does not help.

The clearfix was applied to bring forth the background image of the sidebar for the faux equal-height-two-columns that Chris C showed us here. In the home page and holidaySpecials (if you just click on the “specials” of the main nav) page, I don’t need that left sidebar, so the “clearfix” class was not applied. But the shifted top-sub-level nav and squeezed-width did not appear/occur in the “holidaySpecials” page, only in the home page. That’s what I don’t understand.

To try things out, I did applied the clearfix as you shown above for the home page as well as specifying a width in “#nav” of the CSS, yet nothing changed/worked.

In light of this, what else can we try to see if it would make the difference?

Edit: here is a picture showing exactly what I meant by the home page being squeezed:

Looking at the right edge of the picture, it shows an indented right side, make the whole page narrower than the rest of the pages, which in turn forces the nav bar to break off and move that last link to the next line. Again, this only occur in the home page.

EDIT2:
Tried converting the “holidaySpecials” page to the “Index” page. Something peculiar with FireFox. The over width of the newly converted Index got narrowed (seemed to be squeezed) in FireFox, but not in Chrome or IE.

One hopeful thing, I don’t see the problem with the main navigation as previously described.

Chris, you are right, in that the wrapper of the “holidaySpecials” page does have the clearfix class applied. Somehow, I didn’t remember that.

Now, what is it about the FF and this home page that’s making it squeezed like that? Just by simply renaming the “holidaySpecials” page to “Index” changes the width.

[wd2b]

Has any one ever run into FireFox squeezing the over width of a page before? Hopefully, it is only some thing simple that I overlooked, but can’t seem to be able to pinpoint what it is.

Again, by simply renaming a normal page to “Index”, FF forces it to be narrower. Hitting my head against the wall and can’t find a solution to this. Any and all thoughts are much appreciated.

[wd2b]

Thank you, Chris, for all your help. The situation is still not solved yet. Tried naming other pages to “Index” and have the very same effect – squeezed in FF.

Hopping you or someone here with more knowledge and a fresh eye can help pinpoint as to what it is that’s causing this. Thanks in advance.

[wd2b]

Thanks for the candid thought, Chris. Obviously still have much to learn. Let me ask for more detailed info regarding the disorganized CSS. Are you referring to the individual codes or different section for different page?

In the original Index page, I had an overall DIV for the main content, which then contain two larger DIVs for the top and bottom portions, which then have individual DIVs for detailed contents. For example, the top DIV have individual DIVs for the flame and the home intro, which then further have nested DIVs for networks. I will double check the width for the mainContent DIV and Top DIV.

Really appreciate this dialogue — allowed me to look at things from different perspectives.

[wd2b]

Appreciate all the troubleshoots. That’s precisely what I am looking for. I think you can understand, when a one gets into a situation, its can be difficult to see the bigger picture, especially one with limited knowledge. While it’s not realistic to expect you to fix it for me, it is much encouraged to have a dialogue and look at things I may not have thought of or pay little attention to. Thanks!

True, not all codes look the same in every browser, but I didn’t expect this much of a difference within the same browser. From my short experience with website building, FF seems to be very picky, too. Is that true for you experience as well? Wondering if I am over looking some thing very simple that FF does not like.

For the homepage, I have
mainContent DIV = 810px width

Within that, I have a top DIV of homeFlash DIV = 810px width, which contains the followings:
1. sideFrame DIV = 142px width with a righ margin of 10px
2. homeIntro DIV = 658px

All this accounted for the 810px width of the mainContent as well as the wrapper.

At the bottom, I have the specials DIV, which also have a width of 810px.
This DIV then contain 4 nested DIVs.

The same wrapper width is used for all the other pages, but when FF looks the Home page, it renders it smaller than the rest of the pages.

[wd2b]

Chris, if you are referring to the #nav at 805px, I did it simply based on visual. On some pages, 810px was just simply too long — stretched out to the side; don’t know why, but it does.

If you saw the 805px elsewhere, I missed it. Again, alot of what’s done so far is through visual inspection.

Now in regards to the 36 errors, I am assuming you are referring to HTML errors? I don’t know how to use firebug to find the errors yet, so that didn’t help me. However, I did use Dreamweaver to do a site report on the homepage document but only find an empty tag, which I removed. Please bear with me. I am learning.

Googled on how to use firebug to find error, but didn’t see much that’s helpful. What I found that is most relevant is: http://getfirebug.com/errors

But I am not seeing any errors. There must be a more specific way of getting these error reports. Please walk me through the error finding process with firebug, if that is what you used to spot the errors.

As for where did I learn my CSS from? pretty much self learning and from Lynda.com’s tutorials.

Thanks

[wd2b]

Thank you for that link. It’s a big help.

Managed to bring the errors down to 8, all of which are now commentary declaration errors, which I have a hard time understanding. For example, what does the validator try to say here:

" Line 458, Column 11: invalid comment declaration: found name character outside comment but inside comment declaration


ends #header

>



Line 458, Column 5: comment declaration started here


ends #header

>



Line 460, Column 11: invalid comment declaration: found name character outside comment but inside comment declaration


#mainContent begins

>

✉

Line 460, Column 5: comment declaration started here


#mainContent begins

>

Line 497, Column 12: invalid comment declaration: found delimiter "#" outside comment but inside comment declaration



✉

Line 497, Column 6: comment declaration started here

"

I really don’t understand the errors pointed out here.
In regards to the #nav’s width, I understand where you are coming from, but if I make it match and one end of it stick out like a sore thumb, that would not be good. I must be misunderstanding something here. Please point it out for me.

Thanks again for the help. I am learning!

[wd2b]

Chris, thanks! That’s a great lesson. I have misunderstood what I’ve observed both in HTML and CSS usage. Now is this understanding correct — In CSS, we can use more than two dashes (-) as we want; whereas in HTML, we can only have two dashes on each side of our comments, correct? After correcting what you pointed out above, homepage is home free of errors.

As for the sidebar, yes, you are correct in that I don’t want to use a standard sidebar as used in other pages. With this in mind, should be the general coding method? Also what is considered a balance usage of DIV’s as compared to classes?

Indeed, http://www.w3cschools.com is the place to iron out misunderstandings. Though, I have yet found a clear explanation for moderate ratio between DIVs and classes. Your thought on this would be much appreciated.

Ran the validator on another page (VIP), came out with the following as one among the errors. But this form was written by the developer of the server, and I just simply don’t know enough on it yet. What’s your thought?

“# Error Line 465, Column 76: end tag for “input” omitted, but OMITTAG NO was specified

You may have neglected to close an element, or perhaps you meant to “self-close” an element, that is, ending it with “/>” instead of “>”.”

Why was this one be marked as incorrect?

Thanks again.

[wd2b]

Chris, thank you. I realize, it can be quite frustrating for you; all the more, I am grateful for taking the time and making effort to give great explicit examples. It really helps. Simple task as it maybe, but to a novice, it can be a daunting challenge. Once again, thank you.

What’s your view on a fair ratio of DIVs and classes?

[wd2b]

I see. you are right, I didn’t make sense because I meant to say what might be a fair share amount of ID’s to classes, not DIVs. If you will, please use an example from any one of my pages to illustrate a good condensation of what I have. Thanks again for all these great help.

ADDITION: Chris, tried validating some of my pages, and four of them came back with the following warning:

” Byte-Order Mark found in UTF-8 File.

The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files is known to cause problems for some text editors and older browsers. You may want to consider avoiding its use until it is better supported.”

Couldn’t see the UTF-8 in Dreamweaver, but did see “” in the head section.

Should I go a head a delete the “charset=utf-8”?

I don’t remember putting that up there, but some how it got up there. What is your thought on delete it?

[wd2b]

Chris, I appreciate your encouragement and sharing of your experiences. I am reading more from http://www.w3schools.com on CSS and HTML. 3 days! Wow, how did you do that! Seems like there un-ending CSS readings, but at least I know that to reference by.

Lol…something from the 90! No offense taken. I am actually grateful for candid thoughts and reflections. Very much curious, are you referring to the coding structures or the visual (color) appearance or both?

There is no denying that I need to learn more. Speaking of client, that’s exciting thought! Can’t wait til I have my first! But I am taking heed of your advises. The last thing I can afford is turning potential clients off. Will look for the videos you referred to and go through them as well. Thanks again.

[wd2b]

Oh, my…! thanks for that answer. Thought it was nice, but with that candid reflection, its big time for me to relearn what I thought were the basics.

“I’ll tell you what, if you can show you have learned the basics..i’ll help you re-design and code your website. If you’re up for it.“

Chris, I will learn, regardless. But the bonus would be a much welcome impetus and irresistible challenge. So, I am certainly up for it! Thank you! Looking forward to this.

The trick, though, is what can we use and how to measure whether I’ve learned the basics or not? Let me know your thought.

Can’t wait! A quick look at HTML Dog, and I like it already. Wished I’ve seen this previously. Thanks.

[wd2b]

Hey Chris, I will look forward to gain your assistant then. It is eye opening experience rereading over the basics so far. Thanks for the challenge! Will get back to you with a new make over page then.

[Author]

Posts