[html] Having webpages keep consistent look

[-Jim]

I am trying to keep my basic outline the same from page to page. I come across a problem when a one page has more content on it and it require a vertical scroll, versus a page that all content fit on the screen.

 

Look at these 2 pages and notice how on #1 the outline is wider and the link; 'Research Services, Company Profile, etc" move slightly to the right. I would like to keep these inline with #2 so that they dont move when going from page to page and I cant seem to figure it out.

 

1) Shamrock Structures, LLC -- -AssesEXPRESS : Protein Gallery

 

2) Shamrock Structures, LLC -- About Shamrock Structures

[beeswax]

Does this happen in both FF and IE? With IE even if there is no scrollbar to the right of the window, the scrollbar placeholder remains so that your page doesn't jump. With FF you only get a scrollbar if the content merits it, so as you move from page to page you can get a slight jump depending if the scrollbar is there or not.

Of course I could be barking up the wrong tree and have misinterpreted your question.

[chrbb]

I may have the wrong end of the stick, but is it when you go from the home page to the three links in the Research services box? If so there's a couple of pixels difference in width, try using the same logo as the home page and the other main pages to see if that makes a difference. Even though your table is the same width - 800 on all pages, html does very odd things sometimes!

[-Jim]

Weird....I posted a reply but it never showed up.

 

Yes, it does just happen in FF. In IE the shift is very very minuscule and something I can live with.

 

chrbb, I will check on the logo too, thx.

 

Also, for those viewing it in IE, doesnt the green scrollbars look tacky for a business website? I inherited this website and I am trying to improve it (Im no design expert by any stretch of the imagination). Wanted your thoughts.

[Little-Miss]

This is where CSS comes in handy..

[powdarrmonkey]

IIRC, there's a CSS parameter for the body tag that forces the scrollbar to stay on screen (like the IE default behaviour). Think it's something to do with Overflow.

[PaulBM]

Regarding the coloured scrollbars in IE, I'd agree. Dump the following code to get rid of them...

 

  <br />
BODY<br />
{scrollbar-3dlight-color:#308014;<br />
         scrollbar-arrow-color:#00FF66;<br />
         scrollbar-base-color:#orange;<br />
         scrollbar-darkshadow-color:003300;<br />
         scrollbar-face-color:#9BCD9B;<br />
         scrollbar-highlight-color:#EEEEFF;<br />
         scrollbar-shadow-color:#3B5E2B}<br />

My first port of call on any website with any problems is validation. Using HTML Tidy with Firefox reveals 13 warnings...

 

Result: 0 errors / 13 warnings

 

line 1 column 1 - Warning: missing declaration

line 32 column 1 - Warning: discarding unexpected

line 73 column 1 - Warning: discarding unexpected

line 73 column 7 - Warning: discarding unexpected

line 68 column 1 - Warning: missing

line 85 column 1 - Warning: missing

line 133 column 1 - Warning: missing

line 218 column 30 - Warning: entity "&nbsp" doesn't end in ';'

line 5 column 3 - Warning:

line 64 column 1 - Warning:

proprietary attribute "background"

line 179 column 1 - Warning:

proprietary attribute "bordercolor"

line 219 column 1 - Warning:

proprietary attribute "background" line 113 column 64 - Warning: trimming empty   Info: Document content looks like HTML Proprietary   Fix these and then check again, it's possible that some of these warnings could be causing inconsistencies.   Also try moving all the Style into a stylesheet (.CSS). Then you'll have 100% consistent styling across all pages.

Edited March 23, 2009 by PaulBM
additional thoughts and missed a bit from the code section.

[-Jim]

Regarding the coloured scrollbars in IE, I'd agree. Dump the following code to get rid of them...

 

  <br />
BODY<br />
{scrollbar-3dlight-color:#308014;<br />
         scrollbar-arrow-color:#00FF66;<br />
         scrollbar-base-color:#orange;<br />
         scrollbar-darkshadow-color:003300;<br />
         scrollbar-face-color:#9BCD9B;<br />
         scrollbar-highlight-color:#EEEEFF;<br />
         scrollbar-shadow-color:#3B5E2B}<br />

My first port of call on any website with any problems is validation. Using HTML Tidy with Firefox reveals 13 warnings...

 

Result: 0 errors / 13 warnings

 

line 1 column 1 - Warning: missing declaration

line 32 column 1 - Warning: discarding unexpected

line 73 column 1 - Warning: discarding unexpected

line 73 column 7 - Warning: discarding unexpected

line 68 column 1 - Warning: missing

line 85 column 1 - Warning: missing

line 133 column 1 - Warning: missing

line 218 column 30 - Warning: entity "&nbsp" doesn't end in ';'

line 5 column 3 - Warning:

line 64 column 1 - Warning:

proprietary attribute "background"

line 179 column 1 - Warning:

proprietary attribute "bordercolor"

line 219 column 1 - Warning:

proprietary attribute "background" line 113 column 64 - Warning: trimming empty   Info: Document content looks like HTML Proprietary   Fix these and then check again, it's possible that some of these warnings could be causing inconsistencies.   Also try moving all the Style into a stylesheet (.CSS). Then you'll have 100% consistent styling across all pages.   Thx, I will look into those. I dont really know to much about CSS at all, there a good tutorial anywhere? Basically I'm able to sorta figure out what the stuff means, make changes, see if the change was what wanted and try again if not. But as far as creating a new CSS style sheet, I would not know where to start.

[beeswax]

Before you begin hacking your stylesheets make a copy of the original ones and put them somewhere safe, just in case you mess up.

[CESIL]

If you add the following to your css file the scrollbar problem should go away

 

/* hide from IE mac \*/
html {overflow: scroll;}
/* end hiding from IE5 mac */

[powdarrmonkey]

Thx, I will look into those. I dont really know to much about CSS at all, there a good tutorial anywhere?

 

CSS Tutorial

[-Jim]

So what CSS style would I use to get all the borders of my table (the green) the same width? Cause right now the top border is bigger than the sides.

 

Untitled Document

[mrwITch]

Thx, I will look into those. I dont really know to much about CSS at all, there a good tutorial anywhere? Basically I'm able to sorta figure out what the stuff means, make changes, see if the change was what wanted and try again if not. But as far as creating a new CSS style sheet, I would not know where to start.

 

A starting point for CSS (& other stuff)

CSS Tutorial

 

 

OOPs - sorry powdarrmonkey didn't read all of the posts

Edited March 24, 2009 by mrwITch
Duplicate info

[-Jim]

If you add the following to your css file the scrollbar problem should go away

 

/* hide from IE mac \*/
html {overflow: scroll;}
/* end hiding from IE5 mac */

 

does this make the scroll bar always visible? if so, is there a similar command for firefox and safari?

[CESIL]

does this make the scroll bar always visible? if so, is there a similar command for firefox and safari?

 

This should work in all browsers...